@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

package/src/components/VOverlay/VOverlay.ts

@@ -10,6 +10,7 @@ import Toggleable from './../../mixins/toggleable'
 // Utilities
 import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -75,6 +76,17 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genContent () {
       return h('div', {

package/src/components/VPagination/VPagination.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VPagination.sass'
 
 import VIcon from '../VIcon'
@@ -13,9 +13,10 @@ import Themeable from '../../mixins/themeable'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue'
+import type { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -25,7 +26,6 @@ export default mixins(
 ).extend({
   name: 'v-pagination',
 
-
   props: {
     circle: Boolean,
     disabled: Boolean,
@@ -81,7 +81,7 @@ export default mixins(
   },
 
   computed: {
-    value() {
+    value () {
       return this.modelValue
     },
     classes (): object {
@@ -139,6 +139,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     value () {
       this.init()
@@ -226,14 +238,14 @@ export default mixins(
     },
     genList (h: CreateElement, children: VNodeChildrenArrayContents): VNode {
       return withDirectives(h('ul', {
-        class: this.classes
+        class: this.classes,
       }, children), [
         [
           Resize,
           this.onResize,
           '',
-          { quiet: true }
-        ]
+          { quiet: true },
+        ],
       ])
     },
   },
@@ -244,13 +256,15 @@ export default mixins(
         this.$vuetify.rtl ? this.nextIcon : this.prevIcon,
         this.value <= 1,
         this.previous,
-        this.$vuetify.lang.t(this.previousAriaLabel)),
+        this.$vuetify.lang.t(this.previousAriaLabel),
+      ),
       this.genItems(h),
       this.genIcon(h,
         this.$vuetify.rtl ? this.prevIcon : this.nextIcon,
         this.value >= this.length,
         this.next,
-        this.$vuetify.lang.t(this.nextAriaLabel)),
+        this.$vuetify.lang.t(this.nextAriaLabel),
+      ),
     ]
 
     return h('nav', {

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -19,6 +19,7 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue'
@@ -191,6 +192,18 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     modelValue (val) {
       this.internalLazyValue = val

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -9,6 +9,7 @@ import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 // Utilities
 import { mergeProps, h } from 'vue'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import type { PropType } from 'vue'
@@ -56,6 +57,19 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genDefaultSlot () {
       return h('div', {

package/src/components/VRating/VRating.ts

@@ -16,6 +16,7 @@ import Ripple from '../../directives/ripple'
 // Utilities
 import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeDirective, VNodeChildren } from 'vue'
@@ -127,6 +128,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     internalValue (val) {
       val !== this.modelValue && this.$emit('update:modelValue', val)

package/src/components/VSelect/VSelect.ts

@@ -22,7 +22,7 @@ import ClickOutside from '../../directives/click-outside'
 // Utilities
 import mergeData from '../../util/mergeData'
 import { getPropertyFromItem, getObjectValueByPath, keyCodes, normalizeAttrs } from '../../util/helpers'
-import { consoleError } from '../../util/console'
+import { consoleError, breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
@@ -72,6 +72,7 @@ export default baseMixins.extend({
       type: null as unknown as PropType<string | boolean | Element | VNode>,
       default: false,
     },
+    auto: Boolean,
     cacheItems: Boolean,
     chips: Boolean,
     clearable: Boolean,
@@ -103,6 +104,7 @@ export default baseMixins.extend({
       type: [String, Array, Object],
       default: () => defaultMenuProps,
     },
+    minWidth: [String, Number],
     multiple: Boolean,
     openOnClear: Boolean,
     returnObject: Boolean,
@@ -172,8 +174,8 @@ export default baseMixins.extend({
             handler: () => this.isFocused && this.blur(),
             closeConditional: this.closeConditional,
             include: () => this.getOpenDependentElements(),
-          }
-        ]
+          },
+        ],
       ]
     },
     dynamicHeight () {
@@ -251,42 +253,31 @@ export default baseMixins.extend({
         eager: this.eager,
         modelValue: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
+        auto: this.auto,
+        minWidth: this.minWidth,
         ...normalisedProps,
       }
     },
   },
 
-  mounted () {
-    this.$nextTick(() => {
-      if (this.$el && this.$el.attributes) {
-        const attrs = this.$el.attributes
-        for (let i = 0; i < attrs.length; i++) {
-          const attr = attrs[i]
-          if (attr.name.startsWith('data-v-')) {
-            this.detectedScopeId = attr.name
-            // scopeId найден и сохранен для использования в dropdown
-            break
-          }
-        }
-      }
-    })
-  },
-
   watch: {
-    internalValue (val) {
-      this.initialValue = val
-      this.setSelectedItems()
+    internalValue: {
+      handler (val) {
+        this.initialValue = val
+        this.setSelectedItems()
 
-      if (this.multiple) {
-        this.$nextTick(() => {
-          this.$refs.menu?.updateDimensions()
-        })
-      }
-      if (this.hideSelected) {
-        this.$nextTick(() => {
-          this.onScroll()
-        })
-      }
+        if (this.multiple) {
+          this.$nextTick(() => {
+            this.$refs.menu?.updateDimensions()
+          })
+        }
+        if (this.hideSelected) {
+          this.$nextTick(() => {
+            this.onScroll()
+          })
+        }
+      },
+      deep: true,
     },
     isMenuActive (val) {
       window.setTimeout(() => this.onMenuActiveChange(val))
@@ -308,6 +299,34 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      if (this.$el && this.$el.attributes) {
+        const attrs = this.$el.attributes
+        for (let i = 0; i < attrs.length; i++) {
+          const attr = attrs[i]
+          if (attr.name.startsWith('data-v-')) {
+            this.detectedScopeId = attr.name
+            // scopeId найден и сохранен для использования в dropdown
+            break
+          }
+        }
+      }
+    })
+  },
+
   methods: {
     /** @public */
     blur (e?: Event) {
@@ -436,7 +455,7 @@ export default baseMixins.extend({
       return [
         this.genFieldset(),
         withDirectives(h('div', {
-          class: 'v-select__slot'
+          class: 'v-select__slot',
         }, [
           this.genLabel(),
           this.prefix ? this.genAffix('prefix') : null,
@@ -464,7 +483,7 @@ export default baseMixins.extend({
         iconChild.props = mergeData(iconChild.props || {}, {
           tabindex: hasListeners ? '-1' : undefined,
           'aria-hidden': 'true',
-          'aria-label': undefined
+          'aria-label': undefined,
         })
       }
 
@@ -505,9 +524,9 @@ export default baseMixins.extend({
       }
 
       return h('input', {
-        value: value,
+        value,
         type: 'hidden',
-        name: this.$attrs.name
+        name: this.$attrs.name,
       })
     },
     genInputSlot (): VNode {
@@ -518,7 +537,7 @@ export default baseMixins.extend({
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
         'aria-owns': this.computedOwns,
-        ...render.props
+        ...render.props,
       }
 
       return render
@@ -536,8 +555,8 @@ export default baseMixins.extend({
         .filter(slotName => this.$slots[slotName])
         .map(slotName => [
           slotName,
-          this.$slots[slotName]
-          ]
+          this.$slots[slotName],
+        ]
         ))
       // Requires destructuring due to Vue
       // modifying the `on` property when passed
@@ -545,7 +564,7 @@ export default baseMixins.extend({
       return h(VSelectList, {
         ...this.listData,
         ...this.listAttrs,
-      }, {...slots, item: this.$slots.item})
+      }, { ...slots, item: this.$slots.item })
     },
     genMenu (): VNode {
       const props = this.$_menuProps as any
@@ -568,7 +587,7 @@ export default baseMixins.extend({
       return h(VMenu, {
         role: undefined,
         ...props,
-        onInput: (val: boolean) => {
+        'onUpdate:modelValue': (val: boolean) => {
           this.isMenuActive = val
           this.isFocused = val
         },
@@ -915,8 +934,6 @@ export default baseMixins.extend({
     setValue (value: any) {
       if (!this.valueComparator(value, this.internalValue)) {
         this.internalValue = value
-        this.$emit('update:modelValue', value)
-        // Note: change event is already emitted by VInput's internalValue setter
       }
     },
     isAppendInner (target: any) {

package/src/components/VSelect/VSelectList.ts

@@ -19,6 +19,7 @@ import Themeable from '../../mixins/themeable'
 
 // Helpers
 import { getPropertyFromItem } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
@@ -80,6 +81,18 @@ export default mixins(Colorable, Themeable).extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genAction (item: object, inputValue: any): VNode {
       return h(VListItemAction, {}, () => [
@@ -87,7 +100,7 @@ export default mixins(Colorable, Themeable).extend({
           color: this.color,
           modelValue: inputValue,
           ripple: false,
-          onInput: () => this.$emit('select', item),
+          'onUpdate:modelValue': () => this.$emit('select', item),
         }),
       ])
     },
@@ -180,9 +193,9 @@ export default mixins(Colorable, Themeable).extend({
         attrs: tile,
         on: {
           onMousedown,
-          onClick
-        }
-      });
+          onClick,
+        },
+      })
 
       return this.needsTile(scopedSlot)
         ? h(VListItem, tile, scopedSlot)
@@ -198,10 +211,18 @@ export default mixins(Colorable, Themeable).extend({
     hasItem (item: object) {
       return this.parsedItems.indexOf(this.getValue(item)) > -1
     },
-    needsTile (slot: VNode[] | undefined) {
-      return slot!.length !== 1 ||
-        slot![0].componentOptions == null ||
-        slot![0].componentOptions.Ctor.name !== 'v-list-item'
+    needsTile (slot: VNode[] | undefined): boolean {
+      const [vnode] = slot ?? []
+
+      if (!slot?.length || slot.length !== 1) return true
+
+      const { type } = vnode ?? {}
+
+      const isComponent = type && typeof type === 'object'
+
+      const isVListItem = isComponent && 'name' in type && type.name === 'v-list-item'
+
+      return !isVListItem
     },
     getDisabled (item: object) {
       return Boolean(getPropertyFromItem(item, this.itemDisabled, false))

package/src/components/VSlider/VSlider.ts

@@ -13,7 +13,7 @@ import ClickOutside from '../../directives/click-outside'
 
 // Helpers
 import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit, passiveSupported } from '../../util/helpers'
-import { consoleWarn } from '../../util/console'
+import { consoleWarn, breaking } from '../../util/console'
 
 // Types
 import { defineComponent, VNode, PropType, h, getCurrentInstance, withDirectives, vShow } from 'vue'
@@ -105,6 +105,19 @@ export default mixins<options &
     startOffset: 0,
   }),
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   computed: {
     classes (): object {
       return {

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -20,8 +20,6 @@ import { getSlot } from '../../util/helpers'
 export default mixins(Positionable, Toggleable, Transitionable).extend({
   name: 'v-speed-dial',
 
-  emits: ['update:modelValue'],
-
   props: {
     direction: {
       type: String as Prop<'top' | 'right' | 'bottom' | 'left'>,
@@ -37,6 +35,8 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     },
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     classes (): object {
       return {
@@ -57,20 +57,19 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     let children: VNode[] = []
     const data: VNodeData = {
       class: this.classes,
-      on: {
-        click: () => (this.isActive = !this.isActive),
-      },
+      onClick: () => (this.isActive = !this.isActive),
     }
 
     if (this.openOnHover) {
-      data.on!.mouseenter = () => (this.isActive = true)
-      data.on!.mouseleave = () => (this.isActive = false)
+      data.onMouseenter = () => (this.isActive = true)
+      data.onMouseleave = () => (this.isActive = false)
     }
 
     if (this.isActive) {
       let btnCount = 0
       children = (getSlot(this) || []).map((b, i) => {
-        if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.name === 'v-btn' || b.componentOptions.Ctor.name === 'v-tooltip')) {
+        const componentName = b.type && typeof b.type === 'object' && 'name' in b.type ? b.type.name : null
+        if (b.tag && (componentName === 'v-btn' || componentName === 'v-tooltip')) {
           btnCount++
           return h('div', {
             style: {

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

@@ -7,13 +7,16 @@ import VTooltip from '../../VTooltip/VTooltip'
 import {
   mount,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 
 describe('VSpeedDial.ts', () => {
   type Instance = InstanceType<typeof VSpeedDial>
   let mountFunction: (options?: object) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSpeedDial, {
@@ -31,7 +34,7 @@ describe('VSpeedDial.ts', () => {
   it('should render active component and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>test</span>')],
+        default: () => h('span', 'test'),
       },
       data: () => ({ isActive: true }),
     })
@@ -41,7 +44,7 @@ describe('VSpeedDial.ts', () => {
 
   it('should render component with custom direction and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         direction: 'right',
       },
     })
@@ -49,37 +52,42 @@ describe('VSpeedDial.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should activate on click', () => {
+  it('should activate on click', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('click')
+    await wrapper.trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should activate on hover', () => {
+  it('should activate on hover', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openOnHover: true,
       },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('mouseenter')
+    await wrapper.trigger('mouseenter')
     expect(wrapper.vm.isActive).toBe(true)
-    wrapper.trigger('mouseleave')
+    await wrapper.trigger('mouseleave')
     expect(wrapper.vm.isActive).toBe(false)
   })
 
-  it('should wrap v-btn or v-tooltip component with div tag', () => {
+  it('should render v-btn and v-tooltip components when active', () => {
     const wrapper = mount(VSpeedDial, {
       slots: {
-        default: [VBtn, VTooltip],
+        default: () => [h(VBtn, { key: 'btn' }), h(VTooltip, { key: 'tooltip' })],
       },
       data: () => ({ isActive: true }),
     })
 
-    expect(wrapper.findAll('.v-speed-dial__list div button')).toHaveLength(1)
-    expect(wrapper.findAll('.v-speed-dial__list div .v-tooltip')).toHaveLength(1)
+    expect(wrapper.findComponent(VBtn).exists()).toBe(true)
+    expect(wrapper.findComponent(VTooltip).exists()).toBe(true)
+
+    const speedDialList = wrapper.find('.v-speed-dial__list')
+    expect(speedDialList.exists()).toBe(true)
+    expect(speedDialList.findComponent(VBtn).exists()).toBe(true)
+    expect(speedDialList.findComponent(VTooltip).exists()).toBe(true)
   })
 })

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

@@ -2,24 +2,24 @@
 
 exports[`VSpeedDial.ts should render active component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top v-speed-dial--is-active">
-  <span class="v-speed-dial__list">
+  <div class="v-speed-dial__list">
     <span>
       test
     </span>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component with custom direction and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-right">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;