@dimailn/vuetify 2.7.2-alpha35 → 2.7.2-alpha37

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

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

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

@@ -77,7 +77,7 @@ describe('VBtn.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should register and unregister', () => {
+  it('should register and unregister', async () => {
     const register = jest.fn()
     const unregister = jest.fn()
 
@@ -94,6 +94,7 @@ describe('VBtn.ts', () => {
 
     expect(register).toHaveBeenCalled()
     wrapper.unmount()
+    await nextTick()
     expect(unregister).toHaveBeenCalled()
   })
   it('should use custom active-class', () => {

package/src/components/VDialog/VDialog.ts

@@ -171,7 +171,7 @@ export default baseMixins.extend({
       // if it was dragged onto the overlay (#6969),
       // or if this isn't the topmost dialog (#9907)
       return !(
-        this._isDestroyed ||
+        this.$.isUnmounted ||
         !this.isActive ||
         this.$refs.content.contains(target) ||
         (this.overlay && target && !this.overlay.$el.contains(target))

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

@@ -26,7 +26,7 @@ describe('VExpansionPanel', () => {
             VExpansionPanelHeader,
             {
               render: () => h(VExpansionPanelContent, {
-                props: { eager: true },
+                eager: true,
               }),
             },
           ],
@@ -113,7 +113,7 @@ describe('VExpansionPanel', () => {
         default: [
           {
             render: () => h(VExpansionPanelHeader, {
-              props: { hideActions: true },
+              hideActions: true,
             }),
           },
           VExpansionPanelContent,

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

@@ -7,14 +7,7 @@ exports[`VExpansionPanel should hide actions and match snapshot 1`] = `
   <button class="v-expansion-panel-header"
           type="button"
           aria-expanded="false"
-          props="[object Object]"
   >
-    <div class="v-expansion-panel-header__icon">
-      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
-         aria-hidden="true"
-      >
-      </i>
-    </div>
   </button>
 </div>
 `;
@@ -34,5 +27,11 @@ exports[`VExpansionPanel should hide actions and match snapshot 2`] = `
       </i>
     </div>
   </button>
+  <div class="v-expansion-panel-content"
+       style="display: none;"
+  >
+    <div class="v-expansion-panel-content__wrap">
+    </div>
+  </div>
 </div>
 `;

package/src/components/VItemGroup/VItemGroup.ts

@@ -149,7 +149,7 @@ export const BaseItemGroup = mixins(
       this.updateItem(item, index)
     },
     unregister (item: GroupableInstance) {
-      if (this._isDestroyed) return
+      if (this.$.isUnmounted) return
 
       const index = this.items.indexOf(item)
       const value = this.getValue(item, index)

package/src/components/VMenu/VMenu.ts

@@ -300,7 +300,7 @@ export default baseMixins.extend({
       const target = e.target as HTMLElement
 
       return this.isActive &&
-        !this._isDestroyed &&
+        !this.$.isUnmounted &&
         this.closeOnClick &&
         this.$refs.content &&
         !this.$refs.content.contains(target)

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -316,7 +316,7 @@ export default baseMixins.extend({
       }
     },
     closeConditional () {
-      return this.isActive && !this._isDestroyed && this.reactsToClick
+      return this.isActive && !this.$.isUnmounted && this.reactsToClick
     },
     genAppend () {
       return this.genPosition('append')

package/src/components/VSelect/VSelect.ts

@@ -360,7 +360,7 @@ export default baseMixins.extend({
       if (!this.isMenuActive) return true
 
       return (
-        !this._isDestroyed &&
+        !this.$.isUnmounted &&
 
         // Click originates from outside the menu content
         // Multiple selects don't close when an item is clicked
@@ -631,7 +631,7 @@ export default baseMixins.extend({
         parent: this,
         item,
         index,
-        select: (e: Event) => {
+        onSelect: (e: Event) => {
           e.stopPropagation()
           this.selectedIndex = index
         },

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VSlideGroup.sass'
 
@@ -20,7 +20,7 @@ import Touch from '../../directives/touch'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
-import Vue, { VNode, defineComponent } from 'vue'
+import { VNode, defineComponent } from 'vue'
 import { composedPath, getSlot } from '../../util/helpers'
 
 interface TouchEvent {
@@ -36,7 +36,7 @@ interface Widths {
   wrapper: number
 }
 
-interface options extends Vue {
+interface options {
   $refs: {
     content: HTMLElement
     wrapper: HTMLElement
@@ -107,7 +107,6 @@ export const BaseSlideGroup = mixins<options &
 ).extend({
   name: 'base-slide-group',
 
-
   props: {
     activeClass: {
       type: String,
@@ -257,7 +256,10 @@ export const BaseSlideGroup = mixins<options &
 
   methods: {
     onScroll () {
-      this.$refs.wrapper.scrollLeft = 0
+      const wrapper = this.$refs.wrapper as HTMLElement
+      if (wrapper) {
+        wrapper.scrollLeft = 0
+      }
     },
     onFocusin (e: FocusEvent) {
       if (!this.isOverflowing) return
@@ -301,7 +303,7 @@ export const BaseSlideGroup = mixins<options &
     },
     genData (): object {
       return {
-        class: this.classes
+        class: this.classes,
       }
     },
     genIcon (location: 'prev' | 'next'): VNode | null {
@@ -321,9 +323,9 @@ export const BaseSlideGroup = mixins<options &
         !hasAffix
       ) return null
 
-      return h(VIcon, () => ({
+      return h(VIcon, {
         disabled: !hasAffix,
-      }, (this as any)[`${icon}Icon`]))
+      }, (this as any)[`${icon}Icon`])
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
@@ -340,7 +342,7 @@ export const BaseSlideGroup = mixins<options &
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, () => [this.genIcon(location)])
+      return h(VFadeTransition, {}, [this.genIcon(location)])
     },
     genWrapper (): VNode {
       return withDirectives(h('div', {
@@ -354,8 +356,8 @@ export const BaseSlideGroup = mixins<options &
             start: (e: TouchEvent) => this.overflowCheck(e, this.onTouchStart),
             move: (e: TouchEvent) => this.overflowCheck(e, this.onTouchMove),
             end: (e: TouchEvent) => this.overflowCheck(e, this.onTouchEnd),
-          }
-        ]
+          },
+        ],
 
       ])
     },
@@ -372,12 +374,14 @@ export const BaseSlideGroup = mixins<options &
     },
     onResize () {
       /* istanbul ignore next */
-      if (this._isDestroyed) return
+      if (this.$.isUnmounted) return
 
       this.setWidths()
     },
     onTouchStart (e: TouchEvent) {
-      const { content } = this.$refs
+      const content = this.$refs.content as HTMLElement
+
+      if (!content) return
 
       this.startX = this.scrollOffset + e.touchstartX as number
 
@@ -406,7 +410,11 @@ export const BaseSlideGroup = mixins<options &
     onTouchEnd () {
       if (!this.canTouch) return
 
-      const { content, wrapper } = this.$refs
+      const content = this.$refs.content as HTMLElement
+      const wrapper = this.$refs.wrapper as HTMLElement
+
+      if (!content || !wrapper) return
+
       const maxScrollOffset = content.clientWidth - wrapper.clientWidth
 
       content.style.setProperty('transition', null)
@@ -439,7 +447,10 @@ export const BaseSlideGroup = mixins<options &
     scrollIntoView /* istanbul ignore next */ () {
       if (!this.selectedItem && this.items.length) {
         const lastItemPosition = this.items[this.items.length - 1].$el.getBoundingClientRect()
-        const wrapperPosition = this.$refs.wrapper.getBoundingClientRect()
+        const wrapper = this.$refs.wrapper as HTMLElement
+
+        if (!wrapper) return
+        const wrapperPosition = wrapper.getBoundingClientRect()
 
         if (
           (this.$vuetify.rtl && wrapperPosition.right < lastItemPosition.right) ||
@@ -482,13 +493,16 @@ export const BaseSlideGroup = mixins<options &
     },
     setWidths () {
       window.requestAnimationFrame(() => {
-        if (this._isDestroyed) return
+        if (this.$.isUnmounted) return
+
+        const content = this.$refs.content as HTMLElement
+        const wrapper = this.$refs.wrapper as HTMLElement
 
-        const { content, wrapper } = this.$refs
+        if (!content || !wrapper) return
 
         this.widths = {
-          content: content ? content.clientWidth : 0,
-          wrapper: wrapper ? wrapper.clientWidth : 0,
+          content: content.clientWidth,
+          wrapper: wrapper.clientWidth,
         }
 
         // https://github.com/vuetifyjs/vuetify/issues/13212
@@ -509,8 +523,8 @@ export const BaseSlideGroup = mixins<options &
     ]), [
       [
         Resize,
-        this.onResize
-      ]
+        this.onResize,
+      ],
     ])
   },
 })

package/src/components/VStepper/VStepperContent.ts

@@ -149,18 +149,17 @@ export default baseMixins.extend({
       ref: 'wrapper',
     }
 
+    const wrapper = h('div', wrapperData, getSlot(this))
+    let content: VNode
+
     if (!this.isVertical) {
-      contentData.directives = [
-        [
-          vShow,
-          this.isActive,
-        ],
-      ]
+      content = withDirectives(h('div', contentData, [wrapper]), [
+        [vShow, this.isActive]
+      ])
+    } else {
+      content = h('div', contentData, [wrapper])
     }
 
-    const wrapper = h('div', wrapperData, getSlot(this))
-    const content = h('div', contentData, [wrapper])
-
     return h(this.computedTransition, {
       ...this.$listeners,
     }, () => [content])

package/src/components/VTabs/VTabs.ts

@@ -276,7 +276,7 @@ export default baseMixins.extend({
       }, [slider])
     },
     onResize () {
-      if (this._isDestroyed) return
+      if (this.$.isUnmounted) return
 
       clearTimeout(this.resizeTimeout)
       this.resizeTimeout = window.setTimeout(this.callSlider, 0)

package/src/components/VTextarea/VTextarea.ts

@@ -95,7 +95,7 @@ export default baseMixins.extend({
       input.tag = 'textarea'
       input.type = 'textarea'
       delete input.props.type
-      input.rows = this.rows
+      input.props.rows = this.rows
 
       return input
     },

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

@@ -221,4 +221,55 @@ describe('VTextarea.ts', () => {
 
     expect(wrapper.vm.$refs.input.style.height).toBe('150px')
   })
+
+  it('should render with default rows attribute', () => {
+    const wrapper = mountFunction()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with custom rows attribute', () => {
+    const wrapper = mountFunction({
+      props: {
+        rows: 3,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with rows as string', () => {
+    const wrapper = mountFunction({
+      props: {
+        rows: '10',
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render with rows and autoGrow', () => {
+    const wrapper = mountFunction({
+      props: {
+        rows: 7,
+        autoGrow: true,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should have rows attribute in DOM', () => {
+    const wrapper = mountFunction({
+      props: {
+        rows: 8,
+      },
+    })
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('rows')).toBe('8')
+  })
+
+  it('should have default rows attribute in DOM', () => {
+    const wrapper = mountFunction()
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('rows')).toBe('5')
+  })
 })

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

@@ -6,6 +6,7 @@ exports[`VTextarea.ts should calculate element height when using auto-grow prop
     <div class="v-input__slot">
       <div class="v-text-field__slot">
         <textarea id="input-1"
+                  rows="5"
                   value="this
 is
 a
@@ -34,3 +35,87 @@ maybe?"
   </div>
 </div>
 `;
+
+exports[`VTextarea.ts should render with custom rows attribute 1`] = `
+<div class="v-input v-textarea theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <textarea id="input-45"
+                  rows="3"
+        >
+        </textarea>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextarea.ts should render with default rows attribute 1`] = `
+<div class="v-input v-textarea theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <textarea id="input-41"
+                  rows="5"
+        >
+        </textarea>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextarea.ts should render with rows and autoGrow 1`] = `
+<div class="v-input v-textarea v-textarea--auto-grow v-textarea--no-resize theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <textarea id="input-53"
+                  rows="7"
+        >
+        </textarea>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VTextarea.ts should render with rows as string 1`] = `
+<div class="v-input v-textarea theme--light v-text-field">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-text-field__slot">
+        <textarea id="input-49"
+                  rows="10"
+        >
+        </textarea>
+      </div>
+    </div>
+    <div class="v-text-field__details">
+      <div class="v-messages theme--light">
+        <div class="v-messages__wrapper">
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/VTreeview/__tests__/VTreeviewNode.spec.ts

@@ -17,27 +17,9 @@ const defaultSlot = () => h('div', 'foobar')
 const Mock = defineComponent({
   name: 'test',
 
-  render() {
+  render () {
     return h(VTreeviewNode, {
-      slots: {
-        prepend: defaultSlot,
-        append: defaultSlot,
-      },
-    })
-  },
-})
-
-const MockScopedLabel = defineComponent({
-  name: 'test',
-
-  render() {
-    return h(VTreeviewNode, {
-      props: {
-        item: singleRootTwoChildren,
-      },
-      slots: {
-        label: (props: any) => h('div', [props.item.name.toUpperCase()]),
-      },
+      item: singleRootTwoChildren,
     })
   },
 })
@@ -85,14 +67,20 @@ describe('VTreeViewNode.ts', () => {
     expect(wrapper.vm.computedIcon).toBe('$checkboxOff')
 
     // В Vue 3 нужно использовать другой подход для изменения внутренних данных
-    wrapper.vm.isIndeterminate = true
-    await wrapper.vm.$nextTick()
+    await wrapper.setData({ isIndeterminate: true })
 
     expect(wrapper.vm.computedIcon).toBe('$checkboxIndeterminate')
   })
 
   it('should use scoped slots', () => {
-    const wrapper = mount(Mock, {
+    const wrapper = mount(VTreeviewNode, {
+      props: {
+        item: singleRootTwoChildren,
+      },
+      slots: {
+        prepend: defaultSlot,
+        append: defaultSlot,
+      },
       global: {
         provide: { treeview },
       },
@@ -110,7 +98,13 @@ describe('VTreeViewNode.ts', () => {
   })
 
   it('should use label slot', () => {
-    const wrapper = mount(MockScopedLabel, {
+    const wrapper = mount(VTreeviewNode, {
+      props: {
+        item: singleRootTwoChildren,
+      },
+      slots: {
+        label: (props: any) => h('div', [props.item.name.toUpperCase()]),
+      },
       global: {
         provide: { treeview },
       },
@@ -120,23 +114,14 @@ describe('VTreeViewNode.ts', () => {
   })
 
   it('should render disabled item', () => {
-    const TestComponent = defineComponent({
-      name: 'test',
-
-      render() {
-        return h(VTreeviewNode, {
-          slots: {
-            prepend: defaultSlot,
-            append: defaultSlot,
-          },
-          props: {
-            item: { ...singleRootTwoChildren, disabled: true },
-          },
-        })
+    const wrapper = mount(VTreeviewNode, {
+      props: {
+        item: { ...singleRootTwoChildren, disabled: true },
+      },
+      slots: {
+        prepend: defaultSlot,
+        append: defaultSlot,
       },
-    })
-
-    const wrapper = mount(TestComponent, {
       global: {
         provide: { treeview },
       },
@@ -146,7 +131,7 @@ describe('VTreeViewNode.ts', () => {
   })
 
   const singleRootWithEmptyChildrens = { id: 1, name: 'Child', children: [] }
-  it('should be able to have active children with empty array', () => {
+  it('should be able to have active children with empty array', async () => {
     const wrapper = mountFunction({
       props: {
         item: singleRootWithEmptyChildrens,
@@ -157,13 +142,13 @@ describe('VTreeViewNode.ts', () => {
 
     expect(wrapper.vm.isActive).toBe(false)
     const selectedLeaf = wrapper.find('.v-treeview-node__root')
-    selectedLeaf.trigger('click')
+    await selectedLeaf.trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should not be able to have active children with empty array when loadChildren is specified', () => {
+  it('should not be able to have active children with empty array when loadChildren is specified', async () => {
     const wrapper = mountFunction({
       props: {
         item: singleRootWithEmptyChildrens,
@@ -175,13 +160,13 @@ describe('VTreeViewNode.ts', () => {
 
     expect(wrapper.vm.isActive).toBe(false)
     const selectedLeaf = wrapper.find('.v-treeview-node__root')
-    selectedLeaf.trigger('click')
+    await selectedLeaf.trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should not be able to have active children with empty array when disabled', () => {
+  it('should not be able to have active children with empty array when disabled', async () => {
     const wrapper = mountFunction({
       props: {
         item: { ...singleRootWithEmptyChildrens, disabled: true },
@@ -192,7 +177,7 @@ describe('VTreeViewNode.ts', () => {
 
     expect(wrapper.vm.isActive).toBe(false)
     const selectedLeaf = wrapper.find('.v-treeview-node__root')
-    selectedLeaf.trigger('click')
+    await selectedLeaf.trigger('click')
     expect(wrapper.vm.isActive).toBe(false)
 
     expect(wrapper.html()).toMatchSnapshot()