@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -5,7 +5,7 @@ exports[`VMenu.ts should render multiple content nodes 1`] = `
   <button>
   </button>
   <div role="menu"
-       class="v-menu__content theme--light "
+       class="v-menu__content theme--light"
        style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"
   >
     <span>
@@ -18,7 +18,7 @@ exports[`VMenu.ts should render multiple content nodes 1`] = `
 </div>
 `;
 
-exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 0; display: none;"`;
+exports[`VMenu.ts should round dimensions 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none; z-index: 8;"`;
 
 exports[`VMenu.ts should update position dynamically 1`] = `"max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none;"`;
 
@@ -26,10 +26,8 @@ exports[`VMenu.ts should update position dynamically 2`] = `"max-height: auto; m
 
 exports[`VMenu.ts should work 1`] = `
 <div class="v-menu">
-  <button>
-  </button>
   <div role="menu"
-       class="v-menu__content theme--light menuable__content__active "
+       class="v-menu__content theme--light menuable__content__active"
        style="max-height: auto; min-width: 0px; max-width: auto; top: 12px; left: 0px; transform-origin: top left; z-index: 8; display: none; z-index: 8;"
   >
     <div class="v-card v-sheet theme--light">

package/src/components/VMessages/VMessages.ts

@@ -7,21 +7,32 @@ import Themeable from '../../mixins/themeable'
 
 // Types
 import { TransitionGroup, VNode, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
 import mixins from '../../util/mixins'
 
 // Utilities
 import { getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 /* @vue/component */
 export default mixins(Colorable, Themeable).extend({
   name: 'v-messages',
 
   props: {
-    value: {
+    modelValue: {
       type: Array,
-      default: () => ([]),
-    } as PropValidator<string[]>,
+      default: () => ([])
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   methods: {
@@ -29,20 +40,27 @@ export default mixins(Colorable, Themeable).extend({
       return h(TransitionGroup, {
         class: 'v-messages__wrapper',
         name: 'message-transition',
-        tag: 'div',
-      }, this.value.map(this.genMessage))
+        tag: 'div'
+      }, () => this.modelValue.map(this.genMessage))
     },
     genMessage (message: string, key: number) {
+      const fromSlot = getSlot(this, 'default', { message, key })
+      const hasSlotContent = fromSlot != null &&
+        (!Array.isArray(fromSlot) || fromSlot.length > 0)
+      const children = hasSlotContent
+        ? (Array.isArray(fromSlot) ? fromSlot : [fromSlot])
+        : [message]
+
       return h('div', {
         class: 'v-messages__message',
-        key,
-      }, getSlot(this, 'default', { message, key }) || [message])
-    },
+        key
+      }, children)
+    }
   },
 
   render (): VNode {
     return h('div', this.setTextColor(this.color, {
-      class: ['v-messages', this.themeClasses],
+      class: ['v-messages', this.themeClasses]
     }), [this.genChildren()])
-  },
+  }
 })

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

@@ -4,20 +4,37 @@ import VMessages from '../VMessages'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 // Types
-import { ExtractVue } from '../../../util/mixins'
+import type { ComponentPublicInstance } from 'vue'
 
 describe('VMessages.ts', () => {
-  type Instance = ExtractVue<typeof VMessages>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VMessages, {
-        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              icons: {
+                component: null
+              },
+              lang: {
+                t: (val: string) => val
+              }
+            }
+          }
+        },
+        ...options
       })
     }
   })
@@ -25,29 +42,29 @@ describe('VMessages.ts', () => {
   it('should have a default array', () => {
     const wrapper = mountFunction()
 
-    expect(Array.isArray(wrapper.vm.value)).toBe(true)
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.find('.v-messages').exists()).toBe(true)
   })
 
   it('should show messages', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: ['foo', 'bar'],
-      },
+      props: {
+        modelValue: ['foo', 'bar']
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: [] })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ modelValue: [] })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should allow HTML', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: ['<a href="#">a link</a>'],
-      },
+      props: {
+        modelValue: ['<a href="#">a link</a>']
+      }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -55,9 +72,20 @@ describe('VMessages.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/9491
   it('should not allow HTML', () => {
     const wrapper = mount(VMessages, {
-      propsData: {
-        value: ['<a href="#">a link</a>'],
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            icons: {},
+            lang: {
+              t: (val: string) => val
+            }
+          }
+        }
       },
+      props: {
+        modelValue: ['<a href="#">a link</a>']
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -65,12 +93,23 @@ describe('VMessages.ts', () => {
 
   it('should accept a scoped slot', () => {
     const wrapper = mount(VMessages, {
-      propsData: { value: ['Foo'] },
-      scopedSlots: {
-        default (props) {
-          return h('div', props.message)
-        },
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            icons: {},
+            lang: {
+              t: (val: string) => val
+            }
+          }
+        }
       },
+      props: { modelValue: ['Foo'] },
+      slots: {
+        default (props: any) {
+          return h('div', props.message)
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

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

@@ -2,67 +2,58 @@
 
 exports[`VMessages.ts should accept a scoped slot 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       <div>
         Foo
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should allow HTML 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       &lt;a href="#"&gt;a link&lt;/a&gt;
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should not allow HTML 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       &lt;a href="#"&gt;a link&lt;/a&gt;
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should show messages 1`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
+  <div class="v-messages__wrapper">
     <div class="v-messages__message">
       foo
     </div>
     <div class="v-messages__message">
       bar
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VMessages.ts should show messages 2`] = `
 <div class="v-messages theme--light">
-  <span name="message-transition"
-        tag="div"
-        class="v-messages__wrapper"
-  >
-  </span>
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      foo
+    </div>
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      bar
+    </div>
+  </div>
 </div>
 `;

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VNavigationDrawer.sass'
 
@@ -20,11 +20,12 @@ import Resize from '../../directives/resize'
 import Touch from '../../directives/touch'
 
 // Utilities
-import { convertToUnit, getSlot } from '../../util/helpers'
+import { convertToUnit, getSlot, getTagValue } from '../../util/helpers'
+import { breaking } from '../../util/console'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode, VNodeDirective, PropType } from 'vue'
+import { VNode, PropType } from 'vue'
 import { TouchWrapper } from 'vuetify/types'
 
 const baseMixins = mixins(
@@ -36,7 +37,7 @@ const baseMixins = mixins(
     'permanent',
     'right',
     'temporary',
-    'width',
+    'width'
   ]),
   Colorable,
   Dependent,
@@ -50,15 +51,9 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-navigation-drawer',
 
-  directives: {
-    ClickOutside,
-    Resize,
-    Touch,
-  },
-
   provide (): object {
     return {
-      isInNav: this.$tag === 'nav',
+      isInNav: this.$tag === 'nav'
     }
   },
 
@@ -70,18 +65,18 @@ export default baseMixins.extend({
     expandOnHover: Boolean,
     floating: Boolean,
     height: {
-      type: [Number, String],
+      type: [Number, String]
     },
     miniVariant: Boolean,
     miniVariantWidth: {
       type: [Number, String],
-      default: 56,
+      default: 56
     },
     permanent: Boolean,
     right: Boolean,
     src: {
       type: [String, Object] as PropType<string | srcObject>,
-      default: '',
+      default: ''
     },
     stateless: Boolean,
     tag: {
@@ -91,25 +86,27 @@ export default baseMixins.extend({
     touchless: Boolean,
     width: {
       type: [Number, String],
-      default: 256,
+      default: 256
     },
-    modelValue: null as unknown as PropType<any>,
+    modelValue: null as unknown as PropType<any>
   },
 
+  emits: ['update:modelValue', 'transitionend', 'update:mini-variant'],
+
   data: () => ({
     isMouseover: false,
     touchArea: {
       left: 0,
-      right: 0,
+      right: 0
     },
-    stackMinZIndex: 6,
+    stackMinZIndex: 6
   }),
 
   computed: {
-    $tag() {
+    $tag () {
       return this.tag || this.app ? 'nav' : 'aside'
     },
-    $height() {
+    $height () {
       return this.height || (this.app ? '100vh' : '100%')
     },
     /**
@@ -136,7 +133,7 @@ export default baseMixins.extend({
         'v-navigation-drawer--open-on-hover': this.expandOnHover,
         'v-navigation-drawer--right': this.right,
         'v-navigation-drawer--temporary': this.temporary,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     computedMaxHeight (): number | null {
@@ -238,9 +235,9 @@ export default baseMixins.extend({
           ? `calc(100% - ${convertToUnit(this.computedMaxHeight)})`
           : undefined,
         transform: `${translate}(${convertToUnit(this.computedTransform, '%')})`,
-        width: convertToUnit(this.computedWidth),
+        width: convertToUnit(this.computedWidth)
       }
-    },
+    }
   },
 
   watch: {
@@ -286,7 +283,19 @@ export default baseMixins.extend({
     expandOnHover: 'updateMiniVariant',
     isMouseover (val) {
       this.updateMiniVariant(!val)
-    },
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   beforeMount () {
@@ -303,11 +312,11 @@ export default baseMixins.extend({
 
       this.touchArea = {
         left: parentRect.left + 50,
-        right: parentRect.right - 50,
+        right: parentRect.right - 50
       }
     },
     closeConditional () {
-      return this.isActive && !this._isDestroyed && this.reactsToClick
+      return this.isActive && !this.$.isUnmounted && this.reactsToClick
     },
     genAppend () {
       return this.genPosition('append')
@@ -316,7 +325,7 @@ export default baseMixins.extend({
       const props = {
         height: '100%',
         width: '100%',
-        src: this.src,
+        src: this.src
       }
 
       const image = this.$slots.img
@@ -324,17 +333,17 @@ export default baseMixins.extend({
         : h(VImg, { props })
 
       return h('div', {
-        class: 'v-navigation-drawer__image',
+        class: 'v-navigation-drawer__image'
       }, [image])
     },
-    genDirectives (): VNodeDirective[] {
-      const directives = [
+    genDirectives (): any[] {
+      return [
         [
           ClickOutside,
           {
             handler: () => { this.isActive = false },
             closeConditional: this.closeConditional,
-            include: this.getOpenDependentElements,
+            include: this.getOpenDependentElements
           }
         ],
         [
@@ -344,11 +353,9 @@ export default baseMixins.extend({
             left: this.swipeLeft,
             right: this.swipeRight,
             isDirActive: !this.touchless && !this.stateless
-          },
+          }
         ]
       ]
-
-      return directives
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {
@@ -362,7 +369,7 @@ export default baseMixins.extend({
           const resizeEvent = document.createEvent('UIEvents')
           resizeEvent.initUIEvent('resize', true, false, window, 0)
           window.dispatchEvent(resizeEvent)
-        },
+        }
       }
 
       if (this.miniVariant) {
@@ -377,7 +384,7 @@ export default baseMixins.extend({
       if (!slot) return slot
 
       return h('div', {
-        class: `v-navigation-drawer__${name}`,
+        class: `v-navigation-drawer__${name}`
       }, slot)
     },
     genPrepend () {
@@ -385,12 +392,12 @@ export default baseMixins.extend({
     },
     genContent () {
       return h('div', {
-        class: 'v-navigation-drawer__content',
+        class: 'v-navigation-drawer__content'
       }, getSlot(this))
     },
     genBorder () {
       return h('div', {
-        class: 'v-navigation-drawer__border',
+        class: 'v-navigation-drawer__border'
       })
     },
     init () {
@@ -446,7 +453,7 @@ export default baseMixins.extend({
     },
     updateMiniVariant (val: boolean) {
       if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val)
-    },
+    }
   },
 
   render (): VNode {
@@ -454,17 +461,18 @@ export default baseMixins.extend({
       this.genPrepend(),
       this.genContent(),
       this.genAppend(),
-      this.genBorder(),
+      this.genBorder()
     ]
 
     if (this.src || getSlot(this, 'img')) children.unshift(this.genBackground())
 
-    const node = h(this.$tag, this.setBackgroundColor(this.color, {
+    // this.$tag сейчас всегда равен nav|aside, но оборачиваем в getTagValue на случай возможных изменений
+    const node = h(getTagValue(this.$tag), this.setBackgroundColor(this.color, {
       class: this.classes,
       style: this.styles,
-      ...this.genListeners(),
+      ...this.genListeners()
     }), children)
 
     return withDirectives(node, this.genDirectives())
-  },
+  }
 })