@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -3,20 +3,24 @@ import VBreadcrumbs from '../VBreadcrumbs'
 import VBreadcrumbsItem from '../VBreadcrumbsItem'
 
 // Utilities
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VBreadcrumbs.ts', () => {
   type Instance = InstanceType<typeof VBreadcrumbs>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options = {}) => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
       return mount(VBreadcrumbs, {
-        ...options,
+        ...options
       })
     }
   })
@@ -30,14 +34,14 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should render items without slot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
           { text: 'c' },
-          { text: 'd' },
-        ],
-      },
+          { text: 'd' }
+        ]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -45,12 +49,12 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should not complain about identical keys', () => {
     mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
-          { text: 'a' },
-        ],
-      },
+          { text: 'a' }
+        ]
+      }
     })
 
     expect(`Duplicate keys detected: 'a'`).not.toHaveBeenWarned()
@@ -58,21 +62,21 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should use slot to render items if present', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
           { text: 'c' },
-          { text: 'd' },
-        ],
+          { text: 'd' }
+        ]
       },
-      scopedSlots: {
+      slots: {
         item (props) {
           return h(VBreadcrumbsItem, {
-            key: props.item.text,
-          }, props.item.text.toUpperCase())
-        },
-      },
+            key: props.item.text
+          }, () => props.item.text.toUpperCase())
+        }
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -80,19 +84,130 @@ describe('VBreadcrumbs.ts', () => {
 
   it('should use a custom divider slot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { text: 'a' },
           { text: 'b' },
           { text: 'c' },
-          { text: 'd' },
-        ],
+          { text: 'd' }
+        ]
       },
       slots: {
-        divider: '/divider/',
-      },
+        divider: () => '/divider/'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should pass HTML attributes from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', 'data-testid': 'home-link', 'aria-label': 'Go to home' },
+          { text: 'About', 'data-testid': 'about-link', 'aria-label': 'Go to about' }
+        ]
+      }
+    })
+
+    const homeItem = wrapper.find('[data-testid="home-link"]')
+    const aboutItem = wrapper.find('[data-testid="about-link"]')
+
+    expect(homeItem.exists()).toBe(true)
+    expect(homeItem.attributes('aria-label')).toBe('Go to home')
+    expect(aboutItem.exists()).toBe(true)
+    expect(aboutItem.attributes('aria-label')).toBe('Go to about')
+  })
+
+  it('should pass routable props from item to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          { text: 'Home', to: '/home', disabled: true, ripple: false },
+          { text: 'About', href: '/about', activeClass: 'custom-active' }
+        ]
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' }
+        },
+        stubs: {
+          'router-link': true
+        }
+      }
+    })
+
+    const homeItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    const aboutItem = wrapper.findAllComponents({ name: 'v-breadcrumbs-item' })[1]
+
+    expect(homeItem.props('to')).toBe('/home')
+    expect(homeItem.props('disabled')).toBe(true)
+    expect(homeItem.props('ripple')).toBe(false)
+    expect(aboutItem.props('href')).toBe('/about')
+    expect(aboutItem.props('activeClass')).toBe('custom-active')
+  })
+
+  it('should handle mixed props and attributes correctly', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Dashboard',
+            to: '/dashboard',
+            'data-testid': 'dashboard-link',
+            'aria-current': 'page',
+            class: 'custom-class',
+            style: 'color: red;'
+          }
+        ]
+      },
+      global: {
+        mocks: {
+          $route: { path: '/' }
+        },
+        stubs: {
+          'router-link': true
+        }
+      }
+    })
+
+    const dashboardItem = wrapper.find('[data-testid="dashboard-link"]')
+
+    expect(dashboardItem.exists()).toBe(true)
+    expect(dashboardItem.attributes('aria-current')).toBe('page')
+    expect(dashboardItem.classes()).toContain('custom-class')
+    expect(dashboardItem.attributes('style')).toBe('color: red;')
+
+    // Проверяем, что routable пропс тоже передался
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+    expect(breadcrumbItem.props('to')).toBe('/dashboard')
+  })
+
+  it('should not pass invalid props to VBreadcrumbsItem', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: [
+          {
+            text: 'Home',
+            invalidProp: 'should-not-be-passed',
+            someRandomValue: 123,
+            'data-valid': 'this-should-be-passed'
+          }
+        ]
+      }
+    })
+
+    const breadcrumbItem = wrapper.findComponent({ name: 'v-breadcrumbs-item' })
+
+    // Проверяем, что валидные пропсы передались
+    expect(breadcrumbItem.props('text')).toBe('Home')
+
+    // Проверяем, что HTML атрибуты передались
+    const homeItem = wrapper.find('[data-valid="this-should-be-passed"]')
+    expect(homeItem.exists()).toBe(true)
+
+    // Проверяем, что невалидные пропсы не передались
+    expect(breadcrumbItem.props('invalidProp')).toBeUndefined()
+    expect(breadcrumbItem.props('someRandomValue')).toBeUndefined()
+  })
 })

package/src/components/VBreadcrumbs/__tests__/VBreadcrumbsItem.spec.ts

@@ -4,17 +4,21 @@ import VBreadcrumbsItem from '../VBreadcrumbsItem'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VBreadcrumbsItem.ts', () => {
   type Instance = InstanceType<typeof VBreadcrumbsItem>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options = {}) => {
+    mountFunction = (options: MountingOptions<Instance> = {}) => {
       return mount(VBreadcrumbsItem, {
-        ...options,
+        ...options
       })
     }
   })
@@ -25,14 +29,14 @@ describe('VBreadcrumbsItem.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with active & link state and match snapshot', () => {
+  it('should render component with active & link state and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        link: true,
-      },
+      props: {
+        link: true
+      }
     })
-    wrapper.setData({
-      isActive: true,
+    await wrapper.setData({
+      isActive: true
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VBreadcrumbs/index.ts

@@ -8,6 +8,6 @@ export default {
   $_vuetify_subcomponents: {
     VBreadcrumbs,
     VBreadcrumbsItem,
-    VBreadcrumbsDivider,
-  },
+    VBreadcrumbsDivider
+  }
 }

package/src/components/VBtn/VBtn.ts

@@ -18,14 +18,12 @@ import Sizeable from '../../mixins/sizeable'
 // Utilities
 import mixins, { ExtractVue } from '../../util/mixins'
 import { breaking } from '../../util/console'
-import { getSlot } from '../../util/helpers'
-import mergeData from '../../util/mergeData'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
-import { VNode, withDirectives } from 'vue'
-import { PropValidator, PropType } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { withDirectives, h } from 'vue'
 import { RippleOptions } from '../../directives/ripple'
-import {h} from 'vue'
 
 const baseMixins = mixins(
   VSheet,
@@ -33,20 +31,19 @@ const baseMixins = mixins(
   Positionable,
   Sizeable,
   GroupableFactory('btnToggle'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory()
   /* @vue/component */
 )
-interface options extends ExtractVue<typeof baseMixins> {
+type options = ExtractVue<typeof baseMixins> & {
   $el: HTMLElement
 }
 
 export default baseMixins.extend({
   name: 'v-btn',
-  inheritAttrs: false,
   props: {
     activeClass: {
-      type: String,
-    } as any as PropValidator<string>,
+      type: String
+    } as any as PropType<string>,
     block: Boolean,
     depressed: Boolean,
     fab: Boolean,
@@ -58,19 +55,21 @@ export default baseMixins.extend({
     rounded: Boolean,
     tag: {
       type: String,
-      default: 'button',
+      default: 'button'
     },
     text: Boolean,
     tile: Boolean,
     type: {
       type: String,
-      default: 'button',
+      default: 'button'
     },
-    value: null as any as PropType<any>,
+    value: null as any as PropType<any>
   },
 
+  emits: ['click', 'change', 'update:modelValue'],
+
   data: () => ({
-    proxyClass: 'v-btn--active',
+    proxyClass: 'v-btn--active'
   }),
 
   computed: {
@@ -101,13 +100,13 @@ export default baseMixins.extend({
         ...this.themeClasses,
         ...this.groupClasses,
         ...this.elevationClasses,
-        ...this.sizeableClasses,
+        ...this.sizeableClasses
       }
     },
     computedElevation (): string | number | undefined {
       if (this.disabled) return undefined
 
-      return Elevatable.computed.computedElevation.call(this)
+      return this.elevation
     },
     computedRipple (): RippleOptions | boolean {
       const defaultRipple = this.icon || this.fab ? { circle: true } : true
@@ -136,16 +135,16 @@ export default baseMixins.extend({
     },
     styles (): object {
       return {
-        ...this.measurableStyles,
+        ...this.measurableStyles
       }
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['flat', 'text'],
       ['outline', 'outlined'],
-      ['round', 'rounded'],
+      ['round', 'rounded']
     ]
 
     /* istanbul ignore next */
@@ -161,55 +160,64 @@ export default baseMixins.extend({
       this.$emit('click', e)
       this.$emitLegacy('click', e)
 
-
       this.btnToggle && this.toggle()
     },
     genContent (): VNode {
       return h('span', {
-        class: 'v-btn__content',
+        class: 'v-btn__content'
       }, getSlot(this))
     },
     genLoader (): VNode {
       return h('span', {
-        class: 'v-btn__loader',
+        class: 'v-btn__loader'
       }, getSlot(this, 'loader') || [h(VProgressCircular, {
         indeterminate: true,
         size: 23,
         width: 2
       })])
-    },
+    }
   },
 
   render (): VNode {
     const children = [
       this.genContent(),
-      this.loading && this.genLoader(),
+      this.loading && this.genLoader()
     ]
     const { tag, data: linkData, directives } = this.generateRouteLink()
     const setColor = this.hasBg
       ? this.setBackgroundColor
       : this.setTextColor
 
-    let data = {}
+    // Merge component classes with routable classes
+    const mergedClasses = {
+      ...this.classes,
+      ...linkData.class
+    }
 
     if (tag === 'button') {
-      data.type = this.type
-      data.disabled = this.disabled
+      linkData.type = this.type
+      linkData.disabled = this.disabled
     }
-    data.value = ['string', 'number'].includes(typeof this.value)
+    linkData.value = ['string', 'number'].includes(typeof this.value)
       ? this.value
       : JSON.stringify(this.value)
 
-    data = {
-      ...data,
-      ...linkData
+    const data = {
+      ...linkData,
+      class: mergedClasses,
+      style: this.styles
     }
 
-    data = mergeData(data, { class: this.$attrs.class })
+    // Apply color styling but preserve Vue's automatic attribute inheritance
+    const finalData = this.disabled ? data : setColor(this.color, data)
+
+    const vnode = typeof tag === 'string'
+      ? h(getTagValue(tag), finalData, children)
+      : h(tag, finalData, () => children)
 
     return withDirectives(
-      h(tag, this.disabled ? data : setColor(this.color, data), children),
+      vnode,
       directives
     )
-  },
+  }
 })