@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VTabs/VTabs.ts

@@ -22,7 +22,7 @@ import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode } from 'vue/types'
+import type { VNode } from '../../types/vue-internal'
 
 const baseMixins = mixins(
   Colorable,
@@ -30,7 +30,7 @@ const baseMixins = mixins(
   Themeable
 )
 
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   $refs: {
     items: InstanceType<typeof VTabsBar>
   }
@@ -42,12 +42,12 @@ export default baseMixins.extend({
   props: {
     activeClass: {
       type: String,
-      default: '',
+      default: ''
     },
     alignWithTitle: Boolean,
     allowDeselect: {
       type: Boolean,
-      default: false,
+      default: false
     },
     backgroundColor: String,
     centerActive: Boolean,
@@ -56,28 +56,28 @@ export default baseMixins.extend({
     grow: Boolean,
     height: {
       type: [Number, String],
-      default: undefined,
+      default: undefined
     },
     hideSlider: Boolean,
     iconsAndText: Boolean,
     mobileBreakpoint: [String, Number],
     nextIcon: {
       type: String,
-      default: '$next',
+      default: '$next'
     },
     optional: Boolean,
     prevIcon: {
       type: String,
-      default: '$prev',
+      default: '$prev'
     },
     right: Boolean,
     showArrows: [Boolean, String],
     sliderColor: String,
     sliderSize: {
       type: [Number, String],
-      default: 2,
+      default: 2
     },
-    vertical: Boolean,
+    vertical: Boolean
   },
 
   data () {
@@ -88,9 +88,9 @@ export default baseMixins.extend({
         left: null as null | number,
         right: null as null | number,
         top: null as null | number,
-        width: null as null | number,
+        width: null as null | number
       },
-      transitionTime: 300,
+      transitionTime: 300
     }
   },
 
@@ -104,7 +104,7 @@ export default baseMixins.extend({
         'v-tabs--icons-and-text': this.iconsAndText,
         'v-tabs--right': this.right,
         'v-tabs--vertical': this.vertical,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     isReversed (): boolean {
@@ -117,21 +117,21 @@ export default baseMixins.extend({
         right: this.isReversed ? convertToUnit(this.slider.right) : undefined,
         top: this.vertical ? convertToUnit(this.slider.top) : undefined,
         transition: this.slider.left != null ? null : 'none',
-        width: convertToUnit(this.slider.width),
+        width: convertToUnit(this.slider.width)
       }
     },
     computedColor (): string {
       if (this.color) return this.color
       else if (this.isDark && !this.appIsDark) return 'white'
       else return 'primary'
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
       ['onChange', 'onUpdate:modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -155,7 +155,7 @@ export default baseMixins.extend({
     '$vuetify.rtl': 'onResize',
     modelValue (val: any) {
       this.validateModelValue(val)
-    },
+    }
   },
 
   mounted () {
@@ -208,7 +208,7 @@ export default baseMixins.extend({
           left: this.vertical ? 0 : el.offsetLeft,
           right: this.vertical ? 0 : el.offsetLeft + el.offsetWidth,
           top: el.offsetTop,
-          width: this.vertical ? Number(this.sliderSize) : el.scrollWidth,
+          width: this.vertical ? Number(this.sliderSize) : el.scrollWidth
         }
       })
 
@@ -217,7 +217,7 @@ export default baseMixins.extend({
     genBar (items: VNode[], slider: VNode | null) {
       const data = {
         style: {
-          height: convertToUnit(this.height),
+          height: convertToUnit(this.height)
         },
         activeClass: this.activeClass,
         allowDeselect: this.allowDeselect,
@@ -234,7 +234,7 @@ export default baseMixins.extend({
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
         },
-        ref: 'items',
+        ref: 'items'
       }
 
       this.setTextColor(this.computedColor, data)
@@ -242,7 +242,7 @@ export default baseMixins.extend({
 
       return h(VTabsBar, data, () => [
         this.genSlider(slider),
-        items,
+        items
       ])
     },
     genItems (items: VNode | null, item: VNode[]) {
@@ -258,7 +258,7 @@ export default baseMixins.extend({
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
-        },
+        }
       }, () => item)
     },
     genSlider (slider: VNode | null) {
@@ -266,13 +266,13 @@ export default baseMixins.extend({
 
       if (!slider) {
         slider = h(VTabsSlider, {
-          color: this.sliderColor,
+          color: this.sliderColor
         })
       }
 
       return h('div', {
         class: 'v-tabs-slider-wrapper',
-        style: this.sliderStyles,
+        style: this.sliderStyles
       }, [slider])
     },
     onResize () {
@@ -293,7 +293,12 @@ export default baseMixins.extend({
         const vnode = slot[i]
 
         if (vnode.type) {
-          switch (vnode.type.name) {
+          const t = vnode.type
+          const componentName =
+            typeof t === 'object' && t !== null && 'name' in t
+              ? (t as { name?: string }).name
+              : undefined
+          switch (componentName) {
             case 'v-tabs-slider': slider = vnode
               break
             case 'v-tabs-items': items = vnode
@@ -315,24 +320,24 @@ export default baseMixins.extend({
        * item: array of `v-tab-item`
        */
       return { tab, slider, items, item }
-    },
+    }
   },
 
   render (): VNode {
     const { tab, slider, items, item } = this.parseNodes()
 
     return withDirectives(h('div', {
-      class: ['v-tabs', this.classes],
+      class: ['v-tabs', this.classes]
     }, [
       this.genBar(tab, slider),
-      this.genItems(items, item),
+      this.genItems(items, item)
     ]), [
       [
         Resize,
         this.onResize,
         '',
-        { quiet: true },
-      ],
+        { quiet: true }
+      ]
     ])
-  },
+  }
 })

package/src/components/VTabs/VTabsBar.ts

@@ -27,12 +27,12 @@ export default mixins(
 
   provide () {
     return {
-      tabsBar: this,
+      tabsBar: this
     }
   },
 
   props: {
-    allowDeselect: Boolean,
+    allowDeselect: Boolean
   },
 
   computed: {
@@ -43,15 +43,15 @@ export default mixins(
         'v-tabs-bar--is-mobile': this.isMobile,
         // TODO: Remove this and move to v-slide-group
         'v-tabs-bar--show-arrows': this.showArrows,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
-    },
+    }
   },
 
   watch: {
     items: 'callSlider',
     internalValue: 'callSlider',
-    $route: 'onRouteChange',
+    $route: 'onRouteChange'
   },
 
   methods: {
@@ -92,7 +92,7 @@ export default mixins(
       // it's assumed that the user navigated to
       // a path that is not present in the items
       if (!hasNew && hasOld) this.internalValue = undefined
-    },
+    }
   },
 
   render (): VNode {
@@ -101,5 +101,5 @@ export default mixins(
     render.role = 'tablist'
 
     return render
-  },
+  }
 })

package/src/components/VTabs/VTabsItems.ts

@@ -13,8 +13,8 @@ export default defineComponent({
   props: {
     mandatory: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
 
   emits: ['change'],
@@ -23,17 +23,17 @@ export default defineComponent({
     classes (): object {
       return {
         ...VWindow.computed.classes.call(this),
-        'v-tabs-items': true,
+        'v-tabs-items': true
       }
     },
     isDark (): boolean {
       return this.rootIsDark
-    },
+    }
   },
 
   methods: {
     getValue (item: GroupableInstance, i: number) {
       return item.id || BaseItemGroup.methods.getValue.call(this, item, i)
-    },
-  },
+    }
+  }
 })

package/src/components/VTabs/VTabsSlider.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Mixins
 import Colorable from '../../mixins/colorable'
 
@@ -6,7 +6,7 @@ import Colorable from '../../mixins/colorable'
 import mixins from '../../util/mixins'
 
 // Types
-import { VNode } from 'vue/types'
+import type { VNode } from '../../types/vue-internal'
 
 /* @vue/component */
 export default mixins(Colorable).extend({
@@ -14,7 +14,7 @@ export default mixins(Colorable).extend({
 
   render (): VNode {
     return h('div', this.setBackgroundColor(this.color, {
-      class: 'v-tabs-slider',
+      class: 'v-tabs-slider'
     }))
-  },
+  }
 })

package/src/components/VTabs/__tests__/VTab.spec.ts

@@ -4,7 +4,7 @@ import VTab from '../VTab'
 // Utilities
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 
@@ -15,7 +15,7 @@ describe('VTab.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VTab, {
-        ...options,
+        ...options
       })
     }
   })
@@ -23,7 +23,7 @@ describe('VTab.ts', () => {
   it('should have the correct value', async () => {
     const wrapper = mountFunction({
       props: {
-        href: '#foo',
+        href: '#foo'
       },
       global: {
         mocks: {
@@ -34,13 +34,13 @@ describe('VTab.ts', () => {
               if (to.path) href = to.path
 
               return { href }
-            },
-          },
+            }
+          }
         },
         stubs: {
-          'router-link': Vue3RouterLinkStub,
-        },
-      },
+          'router-link': Vue3RouterLinkStub
+        }
+      }
     })
 
     expect(wrapper.vm.value).toBe('foo')
@@ -56,16 +56,16 @@ describe('VTab.ts', () => {
     const wrapper = mountFunction({
       props: {
         activeClass: 'bar',
-        to: 'foo',
+        to: 'foo'
       },
       global: {
         mocks: {
-          $route: { path: '/' },
+          $route: { path: '/' }
         },
         stubs: {
-          'router-link': Vue3RouterLinkStub,
-        },
-      },
+          'router-link': Vue3RouterLinkStub
+        }
+      }
     })
 
     // Mock the toggle method
@@ -80,13 +80,13 @@ describe('VTab.ts', () => {
     // explicitly mock class added
     // by vue router
     if (wrapper.vm.$refs.link) {
-      ;(wrapper.vm.$refs.link as any)._vnode = {
+      (wrapper.vm.$refs.link as any)._vnode = {
         data: {
-          class: { 'bar v-tab--active': true },
+          class: { 'bar v-tab--active': true }
         }
       }
     }
-    ;(wrapper.vm as any).$route.path = '/foo'
+    (wrapper.vm as any).$route.path = '/foo'
 
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()

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

@@ -12,14 +12,14 @@ import VTabsSlider from '../VTabsSlider'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 // Avoriaz does not like extended
 // components with no render fn
 const TabsItemsMock = {
   name: 'v-tabs-items',
-  render: () => {},
+  render: () => {}
 }
 
 describe('VTabs.ts', () => {
@@ -34,20 +34,20 @@ describe('VTabs.ts', () => {
       return mount(VTabs, {
         global: {
           config: {
-            warnHandler: () => {}, // Подавляем предупреждения Vue
+            warnHandler: () => {} // Подавляем предупреждения Vue
           },
           mocks: {
             $vuetify: {
               application: { left: 0, right: 0 },
               breakpoint: { mobileBreakpoint: 1264 },
-              theme: { dark: false },
-            },
+              theme: { dark: false }
+            }
           },
           stubs: {
-            'v-tabs-items': TabsItemsMock,
-          },
+            'v-tabs-items': TabsItemsMock
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -71,9 +71,9 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: () => [h(VTabsSlider, {
-          color: 'pink',
-        })],
-      },
+          color: 'pink'
+        })]
+      }
     })
 
     const slider = wrapper.findComponent(VTabsSlider)
@@ -84,8 +84,8 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       props: { modelValue: 'foo' },
       slots: {
-        default: () => [h(VTabItem)],
-      },
+        default: () => [h(VTabItem)]
+      }
     })
 
     expect(wrapper.findAllComponents(TabsItemsMock)).toHaveLength(1)
@@ -95,11 +95,11 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       props: {
         hideSlider: true,
-        modelValue: 0,
+        modelValue: 0
       },
       slots: {
-        default: () => [h(VTab)],
-      },
+        default: () => [h(VTab)]
+      }
     })
 
     const slider = wrapper.findAll('.v-tabs-slider')
@@ -110,8 +110,8 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       props: { hideSlider: true },
       slots: {
-        default: () => [h('div', { class: 'test-element' }, ['foobar'])],
-      },
+        default: () => [h('div', { class: 'test-element' }, ['foobar'])]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -119,7 +119,7 @@ describe('VTabs.ts', () => {
 
   it('should update input value when changed externally', async () => {
     const wrapper = mountFunction({
-      props: { modelValue: 'foo' },
+      props: { modelValue: 'foo' }
     })
 
     await wrapper.setProps({ modelValue: 'bar' })
@@ -130,17 +130,17 @@ describe('VTabs.ts', () => {
   it('should reset the tabs slider', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: 0,
+        modelValue: 0
       },
       data: () => ({
         slider: {
           left: 100,
-          width: 100,
-        },
+          width: 100
+        }
       }),
       slots: {
-        default: () => [h(VTab)],
-      },
+        default: () => [h(VTab)]
+      }
     })
 
     wrapper.vm.callSlider()
@@ -156,11 +156,11 @@ describe('VTabs.ts', () => {
     // Пропускаем пока, так как он тестирует сложную внутреннюю логику компонента
     const wrapper = mountFunction({
       props: {
-        modelValue: 0,
+        modelValue: 0
       },
       slots: {
-        default: () => [h(VTab)],
-      },
+        default: () => [h(VTab)]
+      }
     })
 
     expect(wrapper.vm.sliderSize).toBe(2)
@@ -175,14 +175,14 @@ describe('VTabs.ts', () => {
   it('should use tabValue if it exists', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: 'first',
+        modelValue: 'first'
       },
       slots: {
         default: () => [h('div', [
           h(VTab, { tabValue: 'first' }),
-          h(VTab, { tabValue: 'second' }),
-        ])],
-      },
+          h(VTab, { tabValue: 'second' })
+        ])]
+      }
     })
 
     const tabs = wrapper.findAll('.v-tab')
@@ -198,15 +198,15 @@ describe('VTabs.ts', () => {
     // активным остается указанный в modelValue таб, а не первый
     const wrapper = mountFunction({
       props: {
-        modelValue: 'second', // Устанавливаем второй таб как активный
+        modelValue: 'second' // Устанавливаем второй таб как активный
       },
       slots: {
         default: () => [h('div', [
           h(VTab, { tabValue: 'first' }),
           h(VTab, { tabValue: 'second' }),
-          h(VTab, { tabValue: 'third' }),
-        ])],
-      },
+          h(VTab, { tabValue: 'third' })
+        ])]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -230,15 +230,15 @@ describe('VTabs.ts', () => {
     // Тест для проверки с числовыми индексами
     const wrapper = mountFunction({
       props: {
-        modelValue: 2, // Устанавливаем третий таб (индекс 2) как активный
+        modelValue: 2 // Устанавливаем третий таб (индекс 2) как активный
       },
       slots: {
         default: () => [h('div', [
           h(VTab), // индекс 0
           h(VTab), // индекс 1
-          h(VTab), // индекс 2
-        ])],
-      },
+          h(VTab) // индекс 2
+        ])]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -255,14 +255,14 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       props: {
         modelValue: 'first',
-        allowDeselect: false, // Запрещаем deselect
+        allowDeselect: false // Запрещаем deselect
       },
       slots: {
         default: () => [h('div', [
           h(VTab, { tabValue: 'first' }, () => 'First Tab'),
-          h(VTab, { tabValue: 'second' }, () => 'Second Tab'),
-        ])],
-      },
+          h(VTab, { tabValue: 'second' }, () => 'Second Tab')
+        ])]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -288,14 +288,14 @@ describe('VTabs.ts', () => {
     const wrapper = mountFunction({
       props: {
         modelValue: 'first',
-        optional: false, // mandatory=true
+        optional: false // mandatory=true
       },
       slots: {
         default: () => [h('div', [
           h(VTab, { tabValue: 'first' }, () => 'First Tab'),
-          h(VTab, { tabValue: 'second' }, () => 'Second Tab'),
-        ])],
-      },
+          h(VTab, { tabValue: 'second' }, () => 'Second Tab')
+        ])]
+      }
     })
 
     await wrapper.vm.$nextTick()