@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -25,7 +25,7 @@ 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(
@@ -37,7 +37,7 @@ const baseMixins = mixins(
     'permanent',
     'right',
     'temporary',
-    'width',
+    'width'
   ]),
   Colorable,
   Dependent,
@@ -53,7 +53,7 @@ export default baseMixins.extend({
 
   provide (): object {
     return {
-      isInNav: this.$tag === 'nav',
+      isInNav: this.$tag === 'nav'
     }
   },
 
@@ -65,30 +65,30 @@ 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: {
-      type: String,
+      type: String
     },
     temporary: Boolean,
     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'],
@@ -97,9 +97,9 @@ export default baseMixins.extend({
     isMouseover: false,
     touchArea: {
       left: 0,
-      right: 0,
+      right: 0
     },
-    stackMinZIndex: 6,
+    stackMinZIndex: 6
   }),
 
   computed: {
@@ -133,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 {
@@ -235,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: {
@@ -283,13 +283,13 @@ export default baseMixins.extend({
     expandOnHover: 'updateMiniVariant',
     isMouseover (val) {
       this.updateMiniVariant(!val)
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -312,7 +312,7 @@ export default baseMixins.extend({
 
       this.touchArea = {
         left: parentRect.left + 50,
-        right: parentRect.right - 50,
+        right: parentRect.right - 50
       }
     },
     closeConditional () {
@@ -325,7 +325,7 @@ export default baseMixins.extend({
       const props = {
         height: '100%',
         width: '100%',
-        src: this.src,
+        src: this.src
       }
 
       const image = this.$slots.img
@@ -333,18 +333,18 @@ export default baseMixins.extend({
         : h(VImg, { props })
 
       return h('div', {
-        class: 'v-navigation-drawer__image',
+        class: 'v-navigation-drawer__image'
       }, [image])
     },
-    genDirectives (): VNodeDirective[] {
+    genDirectives (): any[] {
       return [
         [
           ClickOutside,
           {
             handler: () => { this.isActive = false },
             closeConditional: this.closeConditional,
-            include: this.getOpenDependentElements,
-          },
+            include: this.getOpenDependentElements
+          }
         ],
         [
           Touch,
@@ -352,9 +352,9 @@ export default baseMixins.extend({
             parent: true,
             left: this.swipeLeft,
             right: this.swipeRight,
-            isDirActive: !this.touchless && !this.stateless,
-          },
-        ],
+            isDirActive: !this.touchless && !this.stateless
+          }
+        ]
       ]
     },
     genListeners () {
@@ -369,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) {
@@ -384,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 () {
@@ -392,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 () {
@@ -453,7 +453,7 @@ export default baseMixins.extend({
     },
     updateMiniVariant (val: boolean) {
       if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val)
-    },
+    }
   },
 
   render (): VNode {
@@ -461,7 +461,7 @@ export default baseMixins.extend({
       this.genPrepend(),
       this.genContent(),
       this.genAppend(),
-      this.genBorder(),
+      this.genBorder()
     ]
 
     if (this.src || getSlot(this, 'img')) children.unshift(this.genBackground())
@@ -470,9 +470,9 @@ export default baseMixins.extend({
     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())
-  },
+  }
 })

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

@@ -9,13 +9,13 @@ import { preset } from '../../../presets/default'
 // Utilities
 import {
   resizeWindow,
-  touch,
+  touch
 } from '../../../../test'
 import {
   mount,
   MountingOptions,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 beforeEach(() => resizeWindow(1920, 1080))
@@ -37,20 +37,20 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
             $vuetify: {
               rtl: false,
               theme: {
-                dark: false,
+                dark: false
               },
               breakpoint,
-              application: new Application(),
-            },
-          },
-        },
+              application: new Application()
+            }
+          }
+        }
       })
     }
   })
 
   it('should become temporary when the window resizes', async () => {
     const wrapper = mountFunction({
-      props: { app: true },
+      props: { app: true }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -65,8 +65,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
       props: {
         app: true,
         temporary: true,
-        modelValue: true,
-      },
+        modelValue: true
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -79,8 +79,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
       props: {
         app: true,
         permanent: true,
-        stateless: true,
-      },
+        stateless: true
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -96,8 +96,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
       props: {
         app: true,
         permanent: true,
-        disableResizeWatcher: true,
-      },
+        disableResizeWatcher: true
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -113,8 +113,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
       props: {
         app: true,
         temporary: true,
-        modelValue: true,
-      },
+        modelValue: true
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -131,8 +131,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should open when changed to permanent', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: null,
-      },
+        modelValue: null
+      }
     })
 
     wrapper.setProps({ permanent: true })
@@ -146,8 +146,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         permanent: true,
-        modelValue: true,
-      },
+        modelValue: true
+      }
     })
 
     wrapper.setProps({ modelValue: false })
@@ -160,8 +160,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should update content padding when temporary state is changed', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
-      },
+        app: true
+      }
     })
     await wrapper.vm.$nextTick()
 
@@ -178,8 +178,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should update content padding when permanent state is changed', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
-      },
+        app: true
+      }
     })
     await resizeWindow(800)
     wrapper.vm.$vuetify.breakpoint.width = 800
@@ -198,8 +198,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should update content padding when miniVariant is changed', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
-      },
+        app: true
+      }
     })
     await wrapper.vm.$nextTick()
 
@@ -217,8 +217,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     await resizeWindow(800)
     const wrapper = mountFunction({
       props: {
-        temporary: true,
-      },
+        temporary: true
+      }
     })
 
     await resizeWindow(1920)
@@ -227,7 +227,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
   it('should stay closed when mobile and temporary is enabled', async () => {
     const wrapper = mountFunction({
-      props: { app: true },
+      props: { app: true }
     })
     await resizeWindow(800)
     wrapper.vm.$vuetify.breakpoint.width = 800
@@ -246,8 +246,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
       props: {
         app: true,
         fixed: true,
-        modelValue: true,
-      },
+        modelValue: true
+      }
     })
     await wrapper.vm.$nextTick()
 
@@ -274,8 +274,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should not have marginTop when temporary / isMobile', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
-      },
+        app: true
+      }
     })
     wrapper.vm.$vuetify.application.bar = 0
 
@@ -320,11 +320,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const update = jest.fn()
     const wrapper = mountFunction({
       props: {
-        miniVariant: true,
+        miniVariant: true
       },
       attrs: {
-        'onUpdate:mini-variant': update,
-      },
+        'onUpdate:mini-variant': update
+      }
     })
 
     wrapper.trigger('click')
@@ -337,11 +337,11 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         miniVariant: true,
-        expandOnHover: true,
+        expandOnHover: true
       },
       attrs: {
-        'onUpdate:mini-variant': update,
-      },
+        'onUpdate:mini-variant': update
+      }
     })
 
     wrapper.trigger('mouseenter')
@@ -358,14 +358,14 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         miniVariant: true,
-        expandOnHover: true,
+        expandOnHover: true
       },
       attrs: {
         'onUpdate:mini-variant': (value: boolean) => {
           wrapper.setProps({ miniVariant: value })
           update(value)
-        },
-      },
+        }
+      }
     })
 
     wrapper.trigger('mouseenter')
@@ -383,14 +383,14 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         miniVariant: false,
-        expandOnHover: false,
+        expandOnHover: false
       },
       attrs: {
         'onUpdate:mini-variant': (value: boolean) => {
           wrapper.setProps({ miniVariant: value })
           update(value)
-        },
-      },
+        }
+      }
     })
 
     wrapper.setProps({ expandOnHover: true })
@@ -405,7 +405,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should react to open / close from touch events', async () => {
     const wrapper = mountFunction({
       attachTo: document.body,
-      props: { modelValue: false },
+      props: { modelValue: false }
     })
     const element = wrapper.vm.$el.parentElement
 
@@ -451,8 +451,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
   it('should activate and expand on hover', () => {
     const wrapper = mountFunction({
       props: {
-        expandOnHover: true,
-      },
+        expandOnHover: true
+      }
     })
 
     expect(wrapper.vm.isMouseover).toBe(false)
@@ -471,8 +471,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         app: true,
-        clipped: true,
-      },
+        clipped: true
+      }
     })
 
     wrapper.vm.$vuetify.application.bottom = 20
@@ -486,8 +486,8 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         app: true,
-        disableRouteWatcher: true,
-      },
+        disableRouteWatcher: true
+      }
     })
 
     expect(wrapper.vm.isActive).toBe(true)
@@ -497,7 +497,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
     wrapper.setProps({
       disableRouteWatcher: false,
-      stateless: true,
+      stateless: true
     })
 
     wrapper.vm.onRouteChange()
@@ -505,7 +505,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
     wrapper.setProps({
       stateless: false,
-      temporary: true,
+      temporary: true
     })
 
     wrapper.vm.onRouteChange()
@@ -514,7 +514,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
 
     wrapper.setProps({
       temporary: false,
-      modelValue: true,
+      modelValue: true
     })
     await wrapper.vm.$nextTick() // Wait for value watcher to fire
 
@@ -537,13 +537,13 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     expect(wrapper.vm.$tag).toBe('aside')
 
     const wrapper2 = mountFunction({
-      props: { app: true },
+      props: { app: true }
     })
 
     expect(wrapper2.vm.$tag).toBe('nav')
 
     const wrapper3 = mountFunction({
-      props: { tag: 'div' },
+      props: { tag: 'div' }
     })
 
     // app по умолчанию false, поэтому $tag должен быть 'aside', но tag переопределяет это