@dimailn/vuetify 2.7.2-alpha23 → 2.7.2-alpha25

package/src/components/VBadge/VBadge.ts

@@ -1,4 +1,4 @@
-import {Transition, h} from 'vue'
+import { Transition, h, defineComponent, VNode, withDirectives, vShow } from 'vue'
 // Styles
 import './VBadge.sass'
 
@@ -8,30 +8,29 @@ import VIcon from '../VIcon/VIcon'
 // Mixins
 import Colorable from '../../mixins/colorable'
 import Themeable from '../../mixins/themeable'
-import Toggleable from '../../mixins/toggleable'
+import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
 import mergeData from '../../util/mergeData'
 // Utilities
-import mixins from '../../util/mixins'
 import {
   convertToUnit,
   getSlot,
 } from '../../util/helpers'
 
-// Types
-import { VNode } from 'vue'
-
-export default mixins(
-  Colorable,
-  PositionableFactory(['left', 'bottom']),
-  Themeable,
-  Toggleable,
-  Transitionable,
-/* @vue/component */
-).extend({
+const Toggleable = ToggleableFactory('modelValue', 'update:modelValue')
+
+export default defineComponent({
   name: 'v-badge',
 
+  mixins: [
+    Colorable,
+    PositionableFactory(['left', 'bottom']),
+    Themeable,
+    Toggleable,
+    Transitionable,
+  ],
+
   props: {
     avatar: Boolean,
     bordered: Boolean,
@@ -55,7 +54,7 @@ export default mixins(
       type: String,
       default: 'scale-rotate-transition',
     },
-    value: { default: true },
+    modelValue: { default: true },
   },
 
   computed: {
@@ -136,13 +135,12 @@ export default mixins(
         'aria-live': this.$attrs['aria-live'] || 'polite',
         title: this.$attrs.title,
         role: this.$attrs.role || 'status',
-        directives: [{
-          name: 'show',
-          value: this.isActive,
-        }],
       })
 
-      const badge = h('span', data, [this.genBadgeContent()])
+      const badge = withDirectives(
+        h('span', data, [this.genBadgeContent()]),
+        [[vShow, this.isActive]]
+      )
 
       if (!this.transition) return badge
 
@@ -150,7 +148,9 @@ export default mixins(
         name: this.transition,
         origin: this.origin,
         mode: this.mode,
-      }, [badge])
+      }, {
+        default: () => [badge],
+      })
     },
     genBadgeContent () {
       // Dot prop shows no content
@@ -160,7 +160,7 @@ export default mixins(
 
       if (slot) return slot
       if (this.content) return String(this.content)
-      if (this.icon) return h(VIcon, this.icon)
+      if (this.icon) return h(VIcon, { icon: this.icon })
 
       return undefined
     },
@@ -187,8 +187,7 @@ export default mixins(
     else children.push(badge)
 
     return h('span', mergeData({
-      class: ['v-badge', this.classes]
-    }, attrs)
-    , children)
+      class: ['v-badge', this.classes],
+    }, attrs), children)
   },
 })

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

@@ -2,25 +2,26 @@
 import VBadge from '../VBadge'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { mount, enableAutoUnmount, VueWrapper } from '@vue/test-utils'
 
 // Types
-import { ExtractVue } from '../../../util/mixins'
+import { ComponentPublicInstance } from 'vue'
 
 describe('VBadge.ts', () => {
-  type Instance = ExtractVue<typeof VBadge>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = ComponentPublicInstance
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VBadge, {
-        mocks: {
-          $vuetify: {
-            lang: { t: (text = '') => text },
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: { t: (text = '') => text },
+              rtl: false,
+            },
           },
         },
         ...options,
@@ -31,22 +32,22 @@ describe('VBadge.ts', () => {
   it('should render component and match snapshot', async () => {
     const wrapper = mountFunction({
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
-        default: [compileToFunctions('<span>element</span>')],
+        badge: '<span>content</span>',
+        default: '<span>element</span>',
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with with value=false and match snapshot', async () => {
+  it('should render component with with modelValue=false and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: false,
+      props: {
+        modelValue: false,
       },
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
-        default: [compileToFunctions('<span>element</span>')],
+        badge: '<span>content</span>',
+        default: '<span>element</span>',
       },
     })
 
@@ -55,7 +56,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with bottom prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         bottom: true,
       },
     })
@@ -65,7 +66,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with left prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         left: true,
       },
     })
@@ -75,7 +76,7 @@ describe('VBadge.ts', () => {
 
   it('should render component with overlap prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         overlap: true,
       },
     })
@@ -85,11 +86,11 @@ describe('VBadge.ts', () => {
 
   it('should render component with color prop', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'green lighten-1',
       },
       slots: {
-        badge: [compileToFunctions('<span>content</span>')],
+        badge: '<span>content</span>',
       },
     })
 
@@ -104,9 +105,17 @@ describe('VBadge.ts', () => {
       render: jest.fn(),
     }
 
-    mountFunction({
-      stubs: {
-        transition: transitionStub,
+    const wrapper = mount(VBadge, {
+      global: {
+        mocks: {
+          $vuetify: {
+            lang: { t: (text = '') => text },
+            rtl: false,
+          },
+        },
+        stubs: {
+          transition: transitionStub,
+        },
       },
     })
 
@@ -119,12 +128,20 @@ describe('VBadge.ts', () => {
       render: jest.fn(),
     }
 
-    mountFunction({
-      propsData: {
+    const wrapper = mount(VBadge, {
+      props: {
         transition: '',
       },
-      stubs: {
-        transition: transitionStub,
+      global: {
+        mocks: {
+          $vuetify: {
+            lang: { t: (text = '') => text },
+            rtl: false,
+          },
+        },
+        stubs: {
+          transition: transitionStub,
+        },
       },
     })
 

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

@@ -6,11 +6,11 @@ exports[`VBadge.ts should render component and match snapshot 1`] = `
     element
   </span>
   <span class="v-badge__wrapper">
-    <span aria-atomic="true"
+    <span class="v-badge__badge primary"
+          aria-atomic="true"
           aria-label="$vuetify.badge"
           aria-live="polite"
           role="status"
-          class="v-badge__badge primary"
     >
       <span>
         content
@@ -20,17 +20,17 @@ exports[`VBadge.ts should render component and match snapshot 1`] = `
 </span>
 `;
 
-exports[`VBadge.ts should render component with with value=false and match snapshot 1`] = `
+exports[`VBadge.ts should render component with with modelValue=false and match snapshot 1`] = `
 <span class="v-badge theme--light">
   <span>
     element
   </span>
   <span class="v-badge__wrapper">
-    <span aria-atomic="true"
+    <span class="v-badge__badge primary"
+          aria-atomic="true"
           aria-label="$vuetify.badge"
           aria-live="polite"
           role="status"
-          class="v-badge__badge primary"
           style="display: none;"
     >
       <span>

package/src/components/VBtn/VBtn.ts

@@ -19,13 +19,11 @@ import Sizeable from '../../mixins/sizeable'
 import mixins, { ExtractVue } from '../../util/mixins'
 import { breaking } from '../../util/console'
 import { getSlot } from '../../util/helpers'
-import mergeData from '../../util/mergeData'
 
 // Types
-import { VNode, withDirectives } from 'vue'
+import { VNode, withDirectives, h } from 'vue'
 import { PropValidator, PropType } from 'vue/types/options'
 import { RippleOptions } from '../../directives/ripple'
-import {h} from 'vue'
 
 const baseMixins = mixins(
   VSheet,
@@ -42,7 +40,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 
 export default baseMixins.extend({
   name: 'v-btn',
-  inheritAttrs: false,
   props: {
     activeClass: {
       type: String,
@@ -107,7 +104,7 @@ export default baseMixins.extend({
     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
@@ -161,7 +158,6 @@ export default baseMixins.extend({
       this.$emit('click', e)
       this.$emitLegacy('click', e)
 
-
       this.btnToggle && this.toggle()
     },
     genContent (): VNode {
@@ -175,7 +171,7 @@ export default baseMixins.extend({
       }, getSlot(this, 'loader') || [h(VProgressCircular, {
         indeterminate: true,
         size: 23,
-        width: 2
+        width: 2,
       })])
     },
   },
@@ -190,25 +186,31 @@ export default baseMixins.extend({
       ? 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)
 
     return withDirectives(
-      h(tag, this.disabled ? data : setColor(this.color, data), children),
+      h(tag, finalData, children),
       directives
     )
   },