@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha24

package/src/components/VBadge/VBadge.ts

@@ -1,4 +1,4 @@
-import {Transition, h} from 'vue'
+import { Transition, h, defineComponent, VNode, withDirectives, vShow } from 'vue'
 // Styles
 import './VBadge.sass'
 
@@ -8,30 +8,29 @@ import VIcon from '../VIcon/VIcon'
 // Mixins
 import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
-import Toggleable from '../../mixins/toggleable'
+import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
 import mergeData from '../../util/mergeData'
 // Utilities
-import mixins from '../../util/mixins'
 import {
   convertToUnit,
   getSlot,
 } from '../../util/helpers'
 
-// Types
-import { VNode } from 'vue'
-
-export default mixins(
-  Colorable,
-  PositionableFactory(['left', 'bottom']),
-  Themeable,
-  Toggleable,
-  Transitionable,
-/* @vue/component */
-).extend({
+const Toggleable = ToggleableFactory('modelValue', 'update:modelValue')
+
+export default defineComponent({
   name: 'v-badge',
 
+  mixins: [
+    Colorable,
+    PositionableFactory(['left', 'bottom']),
+    Themeable,
+    Toggleable,
+    Transitionable,
+  ],
+
   props: {
     avatar: Boolean,
     bordered: Boolean,
@@ -55,7 +54,7 @@ export default mixins(
       type: String,
       default: 'scale-rotate-transition',
     },
-    value: { default: true },
+    modelValue: { default: true },
   },
 
   computed: {
@@ -136,13 +135,12 @@ export default mixins(
         'aria-live': this.$attrs['aria-live'] || 'polite',
         title: this.$attrs.title,
         role: this.$attrs.role || 'status',
-        directives: [{
-          name: 'show',
-          value: this.isActive,
-        }],
       })
 
-      const badge = h('span', data, [this.genBadgeContent()])
+      const badge = withDirectives(
+        h('span', data, [this.genBadgeContent()]),
+        [[vShow, this.isActive]]
+      )
 
       if (!this.transition) return badge
 
@@ -150,7 +148,9 @@ export default mixins(
         name: this.transition,
         origin: this.origin,
         mode: this.mode,
-      }, [badge])
+      }, {
+        default: () => [badge],
+      })
     },
     genBadgeContent () {
       // Dot prop shows no content
@@ -160,7 +160,7 @@ export default mixins(
 
       if (slot) return slot
       if (this.content) return String(this.content)
-      if (this.icon) return h(VIcon, this.icon)
+      if (this.icon) return h(VIcon, { icon: this.icon })
 
       return undefined
     },
@@ -187,8 +187,7 @@ export default mixins(
     else children.push(badge)
 
     return h('span', mergeData({
-      class: ['v-badge', this.classes]
-    }, attrs)
-    , children)
+      class: ['v-badge', this.classes],
+    }, attrs), children)
   },
 })

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

@@ -2,25 +2,26 @@
 import VBadge from '../VBadge'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { mount, enableAutoUnmount, VueWrapper } from '@vue/test-utils'
 
 // Types
-import { ExtractVue } from '../../../util/mixins'
+import { ComponentPublicInstance } from 'vue'
 
 describe('VBadge.ts', () => {
-  type Instance = ExtractVue<typeof VBadge>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VBadge, {
-        mocks: {
-          $vuetify: {
-            lang: { t: (text = '') => text },
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: { t: (text = '') => text },
+              rtl: false,
+            },
           },
         },
         ...options,
@@ -31,22 +32,22 @@ describe('VBadge.ts', () => {
   it('should render component and match snapshot', async () => {
     const wrapper = mountFunction({
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
-        default: [compileToFunctions('<span>element</span>')],
+        badge: '<span>content</span>',
+        default: '<span>element</span>',
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with with value=false and match snapshot', async () => {
+  it('should render component with with modelValue=false and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
+      props: {
+        modelValue: false,
       },
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
-        default: [compileToFunctions('<span>element</span>')],
+        badge: '<span>content</span>',
+        default: '<span>element</span>',
       },
     })
 
@@ -55,7 +56,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with bottom prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         bottom: true,
       },
     })
@@ -65,7 +66,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with left prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         left: true,
       },
     })
@@ -75,7 +76,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with overlap prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         overlap: true,
       },
     })
@@ -85,11 +86,11 @@ describe('VBadge.ts', () => {
 
   it('should render component with color prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'green lighten-1',
       },
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
+        badge: '<span>content</span>',
       },
     })
 
@@ -104,9 +105,17 @@ describe('VBadge.ts', () => {
       render: jest.fn(),
     }
 
-    mountFunction({
-      stubs: {
-        transition: transitionStub,
+    const wrapper = mount(VBadge, {
+      global: {
+        mocks: {
+          $vuetify: {
+            lang: { t: (text = '') => text },
+            rtl: false,
+          },
+        },
+        stubs: {
+          transition: transitionStub,
+        },
       },
     })
 
@@ -119,12 +128,20 @@ describe('VBadge.ts', () => {
       render: jest.fn(),
     }
 
-    mountFunction({
-      propsData: {
+    const wrapper = mount(VBadge, {
+      props: {
         transition: '',
       },
-      stubs: {
-        transition: transitionStub,
+      global: {
+        mocks: {
+          $vuetify: {
+            lang: { t: (text = '') => text },
+            rtl: false,
+          },
+        },
+        stubs: {
+          transition: transitionStub,
+        },
       },
     })
 

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

@@ -6,11 +6,11 @@ exports[`VBadge.ts should render component and match snapshot 1`] = `
     element
   </span>
   <span class="v-badge__wrapper">
-    <span aria-atomic="true"
+    <span class="v-badge__badge primary"
+          aria-atomic="true"
           aria-label="$vuetify.badge"
           aria-live="polite"
           role="status"
-          class="v-badge__badge primary"
     >
       <span>
         content
@@ -20,17 +20,17 @@ exports[`VBadge.ts should render component and match snapshot 1`] = `
 </span>
 `;
 
-exports[`VBadge.ts should render component with with value=false and match snapshot 1`] = `
+exports[`VBadge.ts should render component with with modelValue=false and match snapshot 1`] = `
 <span class="v-badge theme--light">
   <span>
     element
   </span>
   <span class="v-badge__wrapper">
-    <span aria-atomic="true"
+    <span class="v-badge__badge primary"
+          aria-atomic="true"
           aria-label="$vuetify.badge"
           aria-live="polite"
           role="status"
-          class="v-badge__badge primary"
           style="display: none;"
     >
       <span>

package/src/components/VInput/VInput.ts

@@ -107,6 +107,10 @@ export default baseMixins.extend({
       set (val: any) {
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
+
+        if('$_emitChangeEvent' in this) {
+          this.$emit('change', val)
+        }
       },
     },
     isDirty (): boolean {

package/src/components/VSelect/VSelectList.ts

@@ -176,6 +176,7 @@ export default mixins(Colorable, Themeable).extend({
         attrs: {
           ...tile.attrs,
           ...tile.props,
+          ...tile.on
         },
         on: tile.on,
       })

package/src/mixins/activatable/index.ts

@@ -92,7 +92,8 @@ export default baseMixins.extend({
         attrs: {
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
-        }
+        },
+        on: this.genActivatorListeners()
       })) || []
 
       node = Array.isArray(node) ? node : [node]

package/src/mixins/bootable/__tests__/bootable.spec.ts

@@ -4,18 +4,22 @@ import Bootable from '../index'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h, nextTick, Comment } from 'vue'
 
 describe('Bootable.ts', () => {
   type Instance = InstanceType<typeof Bootable>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount({
         mixins: [Bootable],
-        render: h => h('div'),
+        render: () => h('div'),
       }, {
         ...options,
       })
@@ -31,13 +35,13 @@ describe('Bootable.ts', () => {
 
     expect(wrapper.vm.isBooted).toBe(false)
     wrapper.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 
   it('should return lazy content', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -50,18 +54,20 @@ describe('Bootable.ts', () => {
       }),
     })
 
-    expect(wrapperLazy.vm.showLazyContent(() => 'content')).toMatchObject([{ isComment: true }])
+    const lazyResult = wrapperLazy.vm.showLazyContent(() => 'content')
+    expect(Array.isArray(lazyResult)).toBe(true)
+    expect(lazyResult[0].type).toBe(Comment)
     wrapperLazy.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
     wrapperLazy.vm.isActive = false
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
   })
 
   it('should show if lazy and active at boot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -77,8 +83,8 @@ describe('Bootable.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isBooted).toBe(false)
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    wrapper.vm.isActive = true
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 })

package/src/mixins/bootable/index.ts

@@ -1,9 +1,10 @@
 // Utilities
 import { removed } from '../../util/console'
-import {h} from 'vue'
 
 // Types
-import  { defineComponent, VNode, App } from 'vue'
+import type { VNode, App } from 'vue'
+
+import { defineComponent, h, Comment } from 'vue'
 interface Toggleable extends App {
   isActive?: boolean
 }
@@ -49,7 +50,7 @@ export default defineComponent({
 
   methods: {
     showLazyContent (content?: () => VNode[]): VNode[] {
-      return (this.hasContent && content) ? content() : [h()]
+      return (this.hasContent && content) ? content() : [h(Comment)]
     },
   },
 })

package/src/mixins/mouse/__tests__/mouse.spec.ts

@@ -2,89 +2,103 @@ import Mouse from '../index'
 
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
-import { ExtractVue } from '../../../util/mixins'
+import { ComponentPublicInstance, h, defineComponent } from 'vue'
 
-const Mock = Mouse.extend({
-  render: h => h('div'),
+const Mock = defineComponent({
+  mixins: [Mouse],
+  render: () => h('div'),
 })
 
 describe('mouse.ts', () => {
-  type Instance = ExtractVue<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance & InstanceType<typeof Mock>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, options)
     }
   })
 
   it('should generate mouse event handlers', async () => {
-    const noop = e => e
+    const noop = (e: any) => e
     const wrapper = mount(Mock, {
-      listeners: {
-        click: noop,
+      attrs: {
+        onClick: noop,
       },
     })
 
-    expect(typeof wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, noop).click).toBe('function')
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, noop)
+    expect(typeof handlers.click).toBe('function')
   })
 
   it('should generate default mouse event handlers', async () => {
-    const noop = e => e
+    const noop = (e: any) => e
     const wrapper = mount(Mock, {
-      listeners: {
-        'click:foo': noop,
+      attrs: {
+        'onClick:foo': noop,
       },
     })
 
-    expect(typeof wrapper.vm.getDefaultMouseEventHandlers(':foo', noop).click).toBe('function')
-    expect(Object.keys(typeof wrapper.vm.getDefaultMouseEventHandlers('', noop))).toHaveLength(6)
+    const handlers = wrapper.vm.getDefaultMouseEventHandlers(':foo', noop)
+    // Для события click с суффиксом :foo, ключ будет 'click'
+    expect(typeof handlers.click).toBe('function')
+
+    // Тест для пустого суффикса
+    const wrapper2 = mount(Mock, {
+      attrs: {
+        onClick: noop,
+        onMouseenter: noop,
+        onMouseleave: noop,
+        onMousedown: noop,
+        onMouseup: noop,
+        onMousemove: noop,
+      },
+    })
+    const emptySuffixHandlers = wrapper2.vm.getDefaultMouseEventHandlers('', noop)
+    expect(Object.keys(emptySuffixHandlers)).toHaveLength(6)
   })
 
   it('should emit events', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, () => {})
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click' } }, () => ({}))
+    const click = handlers.click
     Array.isArray(click) ? click[0](null) : click(null)
-    expect(fn).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted()).toBeTruthy()
   })
 
   it('should handle prevent modifier', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
-    const event = { preventDefault: () => {} }
-    const spy = jest.spyOn(event, 'preventDefault')
+    const event = { preventDefault: jest.fn() } as unknown as MouseEvent
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', prevent: true } }, () => {})
-    Array.isArray(click) ? click[0](event as MouseEvent) : click(event as MouseEvent)
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledTimes(1)
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', prevent: true } }, () => ({}))
+    const click = handlers.click
+    Array.isArray(click) ? click[0](event) : click(event)
+    expect(event.preventDefault).toHaveBeenCalledTimes(1)
   })
 
   it('should handle stop modifier', async () => {
-    const fn = jest.fn()
     const wrapper = mount(Mock, {
-      listeners: {
-        click: fn,
+      attrs: {
+        onClick: () => {},
       },
     })
-    const event = { stopPropagation: () => {} }
-    const spy = jest.spyOn(event, 'stopPropagation')
+    const event = { stopPropagation: jest.fn() } as unknown as MouseEvent
 
-    const { click } = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', stop: true } }, () => {})
-    Array.isArray(click) ? click[0](event as MouseEvent) : click(event as MouseEvent)
-    expect(fn).toHaveBeenCalledTimes(1)
-    expect(spy).toHaveBeenCalledTimes(1)
+    const handlers = wrapper.vm.getMouseEventHandlers({ click: { event: 'click', stop: true } }, () => ({}))
+    const click = handlers.click
+    Array.isArray(click) ? click[0](event) : click(event)
+    expect(event.stopPropagation).toHaveBeenCalledTimes(1)
   })
 })

package/src/mixins/mouse/index.ts

@@ -1,4 +1,5 @@
-import {defineComponent} from 'vue'
+import { defineComponent } from 'vue'
+import { upperFirst } from '../../util/helpers'
 
 export type MouseHandler = (e: MouseEvent | TouchEvent) => any
 
@@ -12,6 +13,7 @@ export type MouseEvents = {
     prevent?: boolean
     button?: number
     result?: any
+    originalKey?: string
   }
 }
 
@@ -19,9 +21,8 @@ export type MouseEventsMap = {
   [event: string]: MouseHandler | MouseHandler[]
 }
 
-function mapEventName(str) {
-  let newStr = "on" + str;
-  return newStr.charAt(0).toUpperCase() + newStr.slice(1);
+function mapEventName (str: string): string {
+  return `on${upperFirst(str)}`
 }
 
 export default defineComponent({
@@ -32,7 +33,9 @@ export default defineComponent({
       const listeners = Object.keys(this.$attrs)
         .filter(key => key.endsWith(suffix))
         .reduce((acc, key) => {
-          acc[key] = { event: key.slice(0, -suffix.length) }
+          const eventName = suffix ? key.slice(0, -suffix.length) : key
+          const cleanEventName = eventName.startsWith('on') ? eventName.slice(2).toLowerCase() : eventName.toLowerCase()
+          acc[cleanEventName] = { event: cleanEventName, originalKey: key }
           return acc
         }, {} as MouseEvents)
 
@@ -47,7 +50,8 @@ export default defineComponent({
       for (const event in events) {
         const eventOptions = events[event]
 
-        if (!this.$attrs[mapEventName(event)]) continue
+        const attrName = eventOptions.originalKey || (event.includes(':') ? event : mapEventName(event))
+        if (!this.$attrs[attrName]) continue
 
         // TODO somehow pull in modifiers
 

package/src/mixins/selectable/index.ts

@@ -40,6 +40,10 @@ export default mixins(
     }
   },
 
+  created() {
+    this.$_emitChangeEvent = true
+  },
+
   computed: {
     computedColor (): string | undefined {
       if (!this.isActive) return undefined