@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -8,7 +8,7 @@ import { preset } from '../../../presets/default'
 // Utilities
 import {
   mount,
-  Wrapper,
+  Wrapper
 } from '@vue/test-utils'
 import { h } from 'vue'
 
@@ -28,19 +28,19 @@ describe('VBanner.ts', () => {
             $vuetify: {
               application: {
                 top: 0,
-                bar: 0,
+                bar: 0
               },
               breakpoint: {
                 mobile: true,
                 mobileBreakpoint: 1264,
-                width: 1000,
+                width: 1000
               },
               icons: {
-                component: null,
-              },
-            },
-          },
-        },
+                component: null
+              }
+            }
+          }
+        }
       })
     }
   })
@@ -48,8 +48,8 @@ describe('VBanner.ts', () => {
   it('should render component with content', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
-      },
+        default: 'Hello, World!'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -58,11 +58,11 @@ describe('VBanner.ts', () => {
   it('should render sinle-line component with content', () => {
     const wrapper = mountFunction({
       props: {
-        singleLine: true,
+        singleLine: true
       },
       slots: {
-        default: 'Hello, World!',
-      },
+        default: 'Hello, World!'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -71,11 +71,11 @@ describe('VBanner.ts', () => {
   it('should render component with icon', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
+        default: 'Hello, World!'
       },
       props: {
-        icon: 'mdi-plus',
-      },
+        icon: 'mdi-plus'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -85,8 +85,8 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        icon: () => h('span', ['icon']),
-      },
+        icon: () => h('span', ['icon'])
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -96,8 +96,8 @@ describe('VBanner.ts', () => {
     const wrapper = mountFunction({
       slots: {
         default: 'Hello, World!',
-        actions: () => h('div', [h('button', ['OK']), h('button', ['Cancel'])]),
-      },
+        actions: () => h('div', [h('button', ['OK']), h('button', ['Cancel'])])
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -106,11 +106,11 @@ describe('VBanner.ts', () => {
   it('should emit click:icon event', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
+        default: 'Hello, World!'
       },
       props: {
-        icon: 'mdi-plus',
-      },
+        icon: 'mdi-plus'
+      }
     })
 
     const icon = wrapper.find('.v-banner__icon')
@@ -123,8 +123,8 @@ describe('VBanner.ts', () => {
   it(`should not render icon container if icon property and slot aren't passed`, () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
-      },
+        default: 'Hello, World!'
+      }
     })
 
     expect(wrapper.findAll('.v-banner__icon')).toHaveLength(0)
@@ -133,8 +133,8 @@ describe('VBanner.ts', () => {
   it(`should not render actions container if slot isn't passed`, () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
-      },
+        default: 'Hello, World!'
+      }
     })
 
     expect(wrapper.findAll('.v-banner__actions')).toHaveLength(0)
@@ -145,8 +145,8 @@ describe('VBanner.ts', () => {
       slots: {
         default: 'Hello, World!',
         icon: 'Hello, World!',
-        actions: 'Hello, World!',
-      },
+        actions: 'Hello, World!'
+      }
     })
 
     expect(wrapper.findAll('.v-banner__content')).toHaveLength(1)
@@ -157,8 +157,8 @@ describe('VBanner.ts', () => {
   it('should toggle', () => {
     const wrapper = mountFunction({
       slots: {
-        default: 'Hello, World!',
-      },
+        default: 'Hello, World!'
+      }
     })
 
     expect(wrapper.vm.isActive).toBeTruthy()
@@ -172,9 +172,9 @@ describe('VBanner.ts', () => {
         default: 'Hello, World!',
         actions: ({ dismiss }) => h('div', {
           onClick: dismiss,
-          class: 'test',
-        }),
-      },
+          class: 'test'
+        })
+      }
     })
 
     const test = wrapper.find('.test')
@@ -186,15 +186,15 @@ describe('VBanner.ts', () => {
   it('should be responsive', () => {
     const wrapper = mount(VBanner, {
       slots: {
-        default: 'Hello, World!',
+        default: 'Hello, World!'
       },
       global: {
         mocks: {
           $vuetify: {
-            breakpoint: new Breakpoint(preset),
-          },
-        },
-      },
+            breakpoint: new Breakpoint(preset)
+          }
+        }
+      }
     })
 
     expect(wrapper.classes('v-banner--is-mobile')).toBeTruthy()
@@ -202,7 +202,7 @@ describe('VBanner.ts', () => {
 
   it('should apply sticky when using the app prop', async () => {
     const wrapper = mountFunction({
-      props: { app: true },
+      props: { app: true }
     })
 
     expect(wrapper.vm.isSticky).toBe(true)
@@ -211,7 +211,7 @@ describe('VBanner.ts', () => {
 
     await wrapper.setProps({
       app: false,
-      sticky: true,
+      sticky: true
     })
 
     expect(wrapper.vm.isSticky).toBe(true)

package/src/components/VBottomNavigation/VBottomNavigation.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VBottomNavigation.sass'
 
@@ -16,6 +16,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
 import { getSlot } from '../../util/helpers'
+import Scroll from '../../directives/scroll'
 
 // Types
 import { VNode } from 'vue'
@@ -23,7 +24,7 @@ import { VNode } from 'vue'
 export default mixins(
   Applicationable('bottom', [
     'height',
-    'modelValue',
+    'modelValue'
   ]),
   Colorable,
   Measurable,
@@ -38,33 +39,33 @@ export default mixins(
   props: {
     activeClass: {
       type: String,
-      default: 'v-btn--active',
+      default: 'v-btn--active'
     },
     backgroundColor: String,
     grow: Boolean,
     height: {
       type: [Number, String],
-      default: 56,
+      default: 56
     },
     hideOnScroll: Boolean,
     horizontal: Boolean,
     modelValue: {
       type: Boolean,
-      default: true,
+      default: true
     },
     mandatory: Boolean,
     shift: Boolean,
     tag: {
       type: String,
-      default: 'div',
-    },
+      default: 'div'
+    }
   },
 
   emits: ['update:modelValue', 'change'],
 
   data () {
     return {
-      isActive: this.modelValue,
+      isActive: this.modelValue
     }
   },
 
@@ -84,25 +85,25 @@ export default mixins(
         'v-bottom-navigation--grow': this.grow,
         'v-bottom-navigation--fixed': !this.absolute && (this.app || this.fixed),
         'v-bottom-navigation--horizontal': this.horizontal,
-        'v-bottom-navigation--shift': this.shift,
+        'v-bottom-navigation--shift': this.shift
       }
     },
     styles (): object {
       return {
         ...this.measurableStyles,
-        transform: this.isActive ? 'none' : 'translateY(100%)',
+        transform: this.isActive ? 'none' : 'translateY(100%)'
       }
-    },
+    }
   },
 
   watch: {
-    canScroll: 'onScroll',
+    canScroll: 'onScroll'
   },
 
   created () {
     const breakingProps = [
       ['inputValue', 'modelValue'],
-      ['onUpdate:input-value', 'onUpdate:modelValue'],
+      ['onUpdate:input-value', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -136,7 +137,7 @@ export default mixins(
     },
     updateValue (val: any) {
       this.$emit('change', val)
-    },
+    }
   },
 
   render (): VNode {
@@ -153,16 +154,19 @@ export default mixins(
       onChange: this.updateValue
     })
 
-    const vnode = h(ButtonGroup, this.setTextColor(this.color, data), getSlot(this))
+    const content = getSlot(this)
+    const vnode = content == null
+      ? h(ButtonGroup, this.setTextColor(this.color, data))
+      : h(ButtonGroup, this.setTextColor(this.color, data), () => content)
 
     if (this.canScroll) {
       return withDirectives(vnode, [[
-        'scroll',
+        Scroll,
         this.onScroll,
         this.scrollTarget
       ]])
     }
 
     return vnode
-  },
+  }
 })

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

@@ -10,13 +10,13 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 function createBtn (val = null) {
   const options = {
     attrs: {},
-    props: { text: true },
+    props: { text: true }
   }
   if (val) options.attrs = { value: val }
 
@@ -24,7 +24,7 @@ function createBtn (val = null) {
     name: 'test',
     render () {
       return h(VBtn, options)
-    },
+    }
   }
 }
 
@@ -43,12 +43,12 @@ describe('VBottomNavigation.ts', () => {
               application: {
                 bottom: 0,
                 register: () => {},
-                unregister: () => {},
-              },
-            },
-          },
+                unregister: () => {}
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -57,8 +57,8 @@ describe('VBottomNavigation.ts', () => {
     const wrapper = mountFunction({
       props: { modelValue: true },
       slots: {
-        default: [VBtn, VBtn],
-      },
+        default: [VBtn, VBtn]
+      }
     })
 
     await wrapper.vm.$nextTick()
@@ -75,11 +75,11 @@ describe('VBottomNavigation.ts', () => {
   it('should update application when height or modelValue changes', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
+        app: true
       },
       slots: {
-        default: [VBtn, VBtn],
-      },
+        default: [VBtn, VBtn]
+      }
     })
 
     const updateApplication = wrapper.vm.updateApplication
@@ -97,7 +97,7 @@ describe('VBottomNavigation.ts', () => {
 
   it('should fire an event and activate/deactivate when reached threshold and using hideOnScroll', async () => {
     const wrapper = mountFunction({
-      props: { hideOnScroll: true },
+      props: { hideOnScroll: true }
     })
 
     expect(wrapper.emitted('update:modelValue')).toBeFalsy()
@@ -126,11 +126,11 @@ describe('VBottomNavigation.ts', () => {
   it('should fire change event when updated', async () => {
     const wrapper = mountFunction({
       props: {
-        app: true,
+        app: true
       },
       slots: {
-        default: () => [h(VBtn, { value: 1 }), h(VBtn, { value: 2 })],
-      },
+        default: () => [h(VBtn, { value: 1 }), h(VBtn, { value: 2 })]
+      }
     })
 
     expect(wrapper.emitted('change')).toBeFalsy()

package/src/components/VBottomSheet/VBottomSheet.ts

@@ -14,8 +14,8 @@ export default defineComponent({
     maxWidth: [String, Number],
     transition: {
       type: String,
-      default: 'bottom-sheet-transition',
-    },
+      default: 'bottom-sheet-transition'
+    }
   },
 
   computed: {
@@ -23,8 +23,8 @@ export default defineComponent({
       return {
         ...VDialog.computed.classes.call(this),
         'v-bottom-sheet': true,
-        'v-bottom-sheet--inset': this.inset,
+        'v-bottom-sheet--inset': this.inset
       }
-    },
-  },
+    }
+  }
 })

package/src/components/VBreadcrumbs/VBreadcrumbs.ts

@@ -3,7 +3,7 @@ import { h, VNode } from 'vue'
 import './VBreadcrumbs.sass'
 
 // Types
-import { PropValidator } from 'vue/types/options'
+import { PropType } from 'vue'
 
 // Components
 import VBreadcrumbsItem from './VBreadcrumbsItem'
@@ -25,22 +25,22 @@ export default mixins(
   props: {
     divider: {
       type: String,
-      default: '/',
+      default: '/'
     },
     items: {
       type: Array,
-      default: () => ([]),
-    } as PropValidator<any[]>,
-    large: Boolean,
+      default: () => ([])
+    } as unknown as PropType<any[]>,
+    large: Boolean
   },
 
   computed: {
     classes (): object {
       return {
         'v-breadcrumbs--large': this.large,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
-    },
+    }
   },
 
   methods: {
@@ -69,14 +69,14 @@ export default mixins(
       }
 
       return items
-    },
+    }
   },
 
   render (): VNode {
     const children = getSlot(this) || this.genItems()
 
     return h('ul', {
-      class: ['v-breadcrumbs', this.classes],
+      class: ['v-breadcrumbs', this.classes]
     }, children)
-  },
+  }
 })

package/src/components/VBreadcrumbs/VBreadcrumbsItem.ts

@@ -1,9 +1,8 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives, VNode } from 'vue'
 import Routable from '../../mixins/routable'
 
 import mixins from '../../util/mixins'
-import { getSlot } from '../../util/helpers'
-import { VNode } from 'vue'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 /* @vue/component */
 export default mixins(Routable).extend({
@@ -14,35 +13,56 @@ export default mixins(Routable).extend({
     // active item should be dimmed
     activeClass: {
       type: String,
-      default: 'v-breadcrumbs__item--disabled',
+      default: 'v-breadcrumbs__item--disabled'
     },
     ripple: {
       type: [Boolean, Object],
-      default: false,
+      default: false
     },
     text: {
       type: String,
-      default: '',
-    },
+      default: ''
+    }
   },
 
   computed: {
     classes (): object {
       return {
         'v-breadcrumbs__item': true,
-        [this.activeClass]: this.disabled,
+        [this.activeClass]: this.disabled
       }
-    },
+    }
   },
 
   render (): VNode {
     const { tag, data, directives } = this.generateRouteLink()
+    const slotContent = getSlot(this)
 
-    return withDirectives(h('li', [
-      h(tag, {
-        ...data,
-        'aria-current': this.isActive && this.isLink ? 'page' : undefined,
-      }, getSlot(this)),
-    ]), directives)
-  },
+    const linkData = {
+      ...data,
+      'aria-current': this.isActive && this.isLink ? 'page' : undefined
+    }
+
+    // Строка из Routable (div / a / кастомный tag) — через getTagValue для имён компонентов;
+    // при наличии `to` сюда уже попадает resolveComponent(router-link), не строка.
+    const resolvedTag = typeof tag === 'string' ? getTagValue(tag) : tag
+    const isNativeTag = typeof resolvedTag === 'string'
+
+    const normalizedChildren =
+      slotContent == null
+        ? null
+        : (Array.isArray(slotContent) ? slotContent : [slotContent])
+
+    let link: VNode
+    if (normalizedChildren == null) {
+      link = h(resolvedTag as any, linkData)
+    } else if (isNativeTag) {
+      link = h(resolvedTag, linkData, normalizedChildren)
+    } else {
+      // Vue 3: у компонента дети через слот-функцию; у нативного тега — массивом.
+      link = h(resolvedTag, linkData, () => normalizedChildren)
+    }
+
+    return withDirectives(h('li', [link]), directives)
+  }
 })