@dimailn/vuetify 2.7.2-alpha22 → 2.7.2-alpha24

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/VForm/VForm.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 // Components
 import VInput from '../VInput/VInput'
 
@@ -8,7 +8,6 @@ import BindsAttrs from '../../mixins/binds-attrs'
 import { provide as RegistrableProvide } from '../../mixins/registrable'
 
 // Helpers
-import { VNode } from 'vue'
 import { getSlot } from '../../util/helpers'
 
 type ErrorBag = Record<number, boolean>
@@ -19,6 +18,17 @@ type Watchers = {
   shouldValidate: () => void
 }
 
+interface VFormContext {
+  inputs: VInputInstance[]
+  watchers: Watchers[]
+  errorBag: ErrorBag
+  lazyValidation: boolean
+  $emit: (event: string, ...args: any[]) => void
+  getInputUid: (input: VInputInstance) => number
+  watchInput: (input: VInputInstance) => Watchers
+  resetErrorBag: () => void
+}
+
 /* @vue/component */
 export default mixins(
   BindsAttrs,
@@ -48,10 +58,11 @@ export default mixins(
 
   watch: {
     errorBag: {
-      handler (val) {
+      handler (this: VFormContext, val: ErrorBag) {
         const errors = Object.values(val).includes(true)
 
         this.$emit('input', !errors)
+        this.$emit('update:modelValue', !errors)
       },
       deep: true,
       immediate: true,
@@ -59,45 +70,56 @@ export default mixins(
   },
 
   methods: {
-    watchInput (input: any): Watchers {
-      const watcher = (input: any): (() => void) => {
-        return input.$watch('hasError', (val: boolean) => {
-          this.errorBag[input.$.uid] = val
-        }, { immediate: true })
+    getInputUid (input: VInputInstance): number {
+      return input.$.uid
+    },
+
+    watchInput (this: VFormContext, input: VInputInstance): Watchers {
+      const inputId = this.getInputUid(input)
+
+      const createErrorWatcher = (inputComponent: VInputInstance): (() => void) => {
+        if (typeof inputComponent.$watch === 'function') {
+          return inputComponent.$watch('hasError', (hasError: boolean) => {
+            this.errorBag[inputId] = hasError
+          }, { immediate: true })
+        } else {
+          // Fallback для Vue 3
+          return () => {}
+        }
       }
 
       const watchers: Watchers = {
-        _uid: input.$.uid,
+        _uid: inputId,
         valid: () => {},
         shouldValidate: () => {},
       }
 
       if (this.lazyValidation) {
-        // Only start watching inputs if we need to
-        watchers.shouldValidate = input.$watch('shouldValidate', (val: boolean) => {
-          if (!val) return
+        if (typeof input.$watch === 'function') {
+          watchers.shouldValidate = input.$watch('shouldValidate', (shouldValidate: boolean) => {
+            if (!shouldValidate) return
 
-          // Only watch if we're not already doing it
-          if (this.errorBag.hasOwnProperty(input.$.uid)) return
+            if (this.errorBag.hasOwnProperty(inputId)) return
 
-          watchers.valid = watcher(input)
-        })
+            watchers.valid = createErrorWatcher(input)
+          })
+        }
       } else {
-        watchers.valid = watcher(input)
+        watchers.valid = createErrorWatcher(input)
       }
 
       return watchers
     },
     /** @public */
-    validate (): boolean {
-      return this.inputs.filter(input => !input.validate(true)).length === 0
+    validate (this: VFormContext): boolean {
+      return this.inputs.filter((input: VInputInstance) => !input.validate(true)).length === 0
     },
     /** @public */
-    reset (): void {
-      this.inputs.forEach(input => input.reset())
+    reset (this: VFormContext): void {
+      this.inputs.forEach((input: VInputInstance) => input.reset())
       this.resetErrorBag()
     },
-    resetErrorBag () {
+    resetErrorBag (this: VFormContext) {
       if (this.lazyValidation) {
         // Account for timeout in validatable
         setTimeout(() => {
@@ -106,28 +128,32 @@ export default mixins(
       }
     },
     /** @public */
-    resetValidation () {
-      this.inputs.forEach(input => input.resetValidation())
+    resetValidation (this: VFormContext) {
+      this.inputs.forEach((input: VInputInstance) => input.resetValidation())
       this.resetErrorBag()
     },
-    register (input: VInputInstance) {
+
+    register (this: VFormContext, input: VInputInstance) {
       this.inputs.push(input)
       this.watchers.push(this.watchInput(input))
     },
-    unregister (input: VInputInstance) {
-      const found = this.inputs.find(i => i.$.uid === input.$.uid)
 
-      if (!found) return
+    unregister (this: VFormContext, input: VInputInstance) {
+      const inputId = this.getInputUid(input)
+      const foundInput = this.inputs.find((inputComponent: VInputInstance) => this.getInputUid(inputComponent) === inputId)
+
+      if (!foundInput) return
 
-      const unwatch = this.watchers.find(i => i._uid === found.$.uid)
-      if (unwatch) {
-        unwatch.valid()
-        unwatch.shouldValidate()
+      const inputWatcher = this.watchers.find((watcher: Watchers) => watcher._uid === inputId)
+      if (inputWatcher) {
+        inputWatcher.valid()
+        inputWatcher.shouldValidate()
       }
 
-      this.watchers = this.watchers.filter(i => i._uid !== found.$.uid)
-      this.inputs = this.inputs.filter(i => i.$.uid !== found.$.uid)
-      delete this.errorBag[found.$.uid]
+      this.watchers = this.watchers.filter((watcher: Watchers) => watcher._uid !== inputId)
+      this.inputs = this.inputs.filter((inputComponent: VInputInstance) => this.getInputUid(inputComponent) !== inputId)
+
+      delete this.errorBag[inputId]
     },
   },