@dimailn/vuetify 2.7.2-alpha20 → 2.7.2-alpha22

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -12,7 +12,7 @@ import Colorable from '../../mixins/colorable'
 import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, VNodeChildren, defineComponent } from 'vue'
+import { VNode, VNodeChild, defineComponent } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
@@ -66,15 +66,16 @@ export default defineComponent({
     },
 
     normalizedValue (): number {
-      if (this.value < 0) {
+      const numValue = parseFloat(this.value)
+      if (numValue < 0) {
         return 0
       }
 
-      if (this.value > 100) {
+      if (numValue > 100) {
         return 100
       }
 
-      return parseFloat(this.value)
+      return numValue
     },
 
     strokeDashArray (): number {
@@ -124,7 +125,7 @@ export default defineComponent({
       const children = [
         this.indeterminate || this.genCircle('underlay', 0),
         this.genCircle('overlay', this.strokeDashOffset),
-      ] as VNodeChildren
+      ] as VNodeChild[]
 
       return h('svg', {
         style: this.svgStyles,

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

@@ -4,12 +4,15 @@ import VProgressCircular from '../VProgressCircular'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VProgressCircular.ts', () => {
   type Instance = InstanceType<typeof VProgressCircular>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: Record<string, any>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -17,12 +20,12 @@ describe('VProgressCircular.ts', () => {
     }
   })
 
-  it('should render component and match snapshot', () => {
+  it('should render component and match snapshot', async () => {
     const wrapper = mountFunction({
       data: () => ({
         isVisible: false,
       }),
-      propsData: {
+      props: {
         value: 33,
       },
       slots: {
@@ -32,32 +35,32 @@ describe('VProgressCircular.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ value: -1 })
+    await wrapper.setProps({ value: -1 })
     const htmlMinus1 = wrapper.html()
 
-    wrapper.setProps({ value: 0 })
+    await wrapper.setProps({ value: 0 })
     const html0 = wrapper.html()
 
-    wrapper.setProps({ value: 100 })
+    await wrapper.setProps({ value: 100 })
     const html100 = wrapper.html()
 
-    wrapper.setProps({ value: 101 })
+    await wrapper.setProps({ value: 101 })
     const html101 = wrapper.html()
 
     expect(htmlMinus1).toBe(html0)
     expect(html100).toBe(html101)
     expect(html0).not.toBe(html100)
 
-    wrapper.setProps({ value: '-1' })
+    await wrapper.setProps({ value: '-1' })
     const htmlMinus1String = wrapper.html()
 
-    wrapper.setProps({ value: '0' })
+    await wrapper.setProps({ value: '0' })
     const html0String = wrapper.html()
 
-    wrapper.setProps({ value: '100' })
+    await wrapper.setProps({ value: '100' })
     const html100String = wrapper.html()
 
-    wrapper.setProps({ value: '101' })
+    await wrapper.setProps({ value: '101' })
     const html101String = wrapper.html()
 
     expect(htmlMinus1String).toBe(html0String)
@@ -67,7 +70,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with color prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         color: 'orange lighten-1',
       },
@@ -78,7 +81,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with button prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         button: true,
       },
@@ -89,7 +92,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with rotate prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         rotate: 29,
       },
@@ -100,7 +103,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with size prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         size: 17,
       },
@@ -111,7 +114,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with indeterminate prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         indeterminate: true,
       },
     })
@@ -121,7 +124,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with width prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         width: 13,
       },
@@ -132,7 +135,7 @@ describe('VProgressCircular.ts', () => {
 
   it('should render component with fill prop and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: 33,
         fill: 'green lighten-1',
       },
@@ -142,10 +145,14 @@ describe('VProgressCircular.ts', () => {
   })
 
   it('should set isVisible with onObserve', () => {
-    expect((new VProgressCircular()).isVisible).toEqual(true)
     const wrapper = mountFunction()
     expect(wrapper.vm.isVisible).toEqual(false)
-    wrapper.vm.onObserve(null, null, true)
+    
+    // Создаем мок-объекты для IntersectionObserverEntry
+    const mockEntries = [] as IntersectionObserverEntry[]
+    const mockObserver = {} as IntersectionObserver
+    
+    wrapper.vm.onObserve(mockEntries, mockObserver, true)
     expect(wrapper.vm.isVisible).toEqual(true)
   })
 })

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

@@ -1,35 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VProgressCircular.ts should render component and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular"
      style="height: 32px; width: 32px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -42,35 +42,35 @@ exports[`VProgressCircular.ts should render component and match snapshot 1`] = `
 `;
 
 exports[`VProgressCircular.ts should render component with button prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible v-progress-circular--button"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular v-progress-circular--button"
      style="height: 40px; width: 40px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -80,35 +80,35 @@ exports[`VProgressCircular.ts should render component with button prop and match
 `;
 
 exports[`VProgressCircular.ts should render component with color prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible orange--text text--lighten-1"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular orange--text text--lighten-1"
      style="height: 32px; width: 32px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -118,36 +118,36 @@ exports[`VProgressCircular.ts should render component with color prop and match
 `;
 
 exports[`VProgressCircular.ts should render component with fill prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular"
      style="height: 32px; width: 32px;"
      fill="green lighten-1"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -157,24 +157,24 @@ exports[`VProgressCircular.ts should render component with fill prop and match s
 `;
 
 exports[`VProgressCircular.ts should render component with indeterminate prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible v-progress-circular--indeterminate"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-circular v-progress-circular--indeterminate"
      style="height: 32px; width: 32px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="125.66370614359172px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -184,35 +184,35 @@ exports[`VProgressCircular.ts should render component with indeterminate prop an
 `;
 
 exports[`VProgressCircular.ts should render component with rotate prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular"
      style="height: 32px; width: 32px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(29deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-       style="transform: rotate(29deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="45.714285714285715"
             cy="45.714285714285715"
             r="20"
             stroke-width="5.714285714285714"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -222,35 +222,35 @@ exports[`VProgressCircular.ts should render component with rotate prop and match
 `;
 
 exports[`VProgressCircular.ts should render component with size prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular"
      style="height: 17px; width: 17px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="26.153846153846157 26.153846153846157 52.307692307692314 52.307692307692314"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="52.307692307692314"
             cy="52.307692307692314"
             r="20"
             stroke-width="12.307692307692308"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="52.307692307692314"
             cy="52.307692307692314"
             r="20"
             stroke-width="12.307692307692308"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>
@@ -260,35 +260,35 @@ exports[`VProgressCircular.ts should render component with size prop and match s
 `;
 
 exports[`VProgressCircular.ts should render component with width prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-circular v-progress-circular--visible"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-circular"
      style="height: 32px; width: 32px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg style="transform: rotate(0deg);"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="33.68421052631579 33.68421052631579 67.36842105263158 67.36842105263158"
-       style="transform: rotate(0deg);"
   >
-    <circle fill="transparent"
+    <circle class="v-progress-circular__underlay"
+            fill="transparent"
             cx="67.36842105263158"
             cy="67.36842105263158"
             r="20"
             stroke-width="27.36842105263158"
             stroke-dasharray="125.664"
             stroke-dashoffset="0"
-            class="v-progress-circular__underlay"
     >
     </circle>
-    <circle fill="transparent"
+    <circle class="v-progress-circular__overlay"
+            fill="transparent"
             cx="67.36842105263158"
             cy="67.36842105263158"
             r="20"
             stroke-width="27.36842105263158"
             stroke-dasharray="125.664"
             stroke-dashoffset="84.19468311620646px"
-            class="v-progress-circular__overlay"
     >
     </circle>
   </svg>

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -13,7 +13,7 @@ import intersect, { Intersect } from '../../directives/intersect'
 // Mixins
 import Colorable from '../../mixins/colorable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
-import Proxyable from '../../mixins/proxyable'
+import { factory as ProxyableFactory } from '../../mixins/proxyable'
 import Themeable from '../../mixins/themeable'
 
 // Utilities
@@ -21,13 +21,12 @@ import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins from '../../util/mixins'
 
 // Types
-import { FunctionalComponentOptions } from 'vue/types'
 import { VNode } from 'vue'
 
 const baseMixins = mixins(
   Colorable,
   PositionableFactory(['absolute', 'fixed', 'top', 'bottom']),
-  Proxyable,
+  ProxyableFactory('modelValue', 'update:modelValue'),
   Themeable
 )
 
@@ -63,11 +62,16 @@ export default baseMixins.extend({
       default: 4,
     },
     indeterminate: Boolean,
+    modelValue: {
+      type: [Number, String],
+      default: 0,
+    },
     query: Boolean,
     reverse: Boolean,
     rounded: Boolean,
     stream: Boolean,
     striped: Boolean,
+    // Оставляем value для обратной совместимости
     value: {
       type: [Number, String],
       default: 0,
@@ -76,7 +80,7 @@ export default baseMixins.extend({
 
   data () {
     return {
-      internalLazyValue: this.value || 0,
+      internalLazyValue: this.modelValue || this.value || 0,
       isVisible: true,
     }
   },
@@ -89,7 +93,9 @@ export default baseMixins.extend({
       }))
     },
     __cachedBar (): VNode {
-      return h(this.computedTransition, [this.__cachedBarType])
+      return h(this.computedTransition, {}, {
+        default: () => [this.__cachedBarType]
+      })
     },
     __cachedBarType (): VNode {
       return this.indeterminate ? this.__cachedIndeterminate : this.__cachedDeterminate
@@ -154,7 +160,7 @@ export default baseMixins.extend({
         ...this.themeClasses,
       }
     },
-    computedTransition (): FunctionalComponentOptions {
+    computedTransition (): any {
       return this.indeterminate ? VFadeTransition : VSlideXTransition
     },
     isReversed (): boolean {
@@ -167,7 +173,7 @@ export default baseMixins.extend({
       return this.normalize(this.internalLazyValue)
     },
     reactive (): boolean {
-      return Boolean(this.$listeners.change)
+      return Boolean(this.$listeners.onChange) || Boolean(this.$listeners['onUpdate:modelValue'])
     },
     styles (): object {
       const styles: Record<string, any> = {}
@@ -184,17 +190,32 @@ export default baseMixins.extend({
     },
   },
 
+  watch: {
+    modelValue (val) {
+      this.internalLazyValue = val
+    },
+    value (val) {
+      this.internalLazyValue = val
+    },
+  },
+
   methods: {
     genContent () {
       const slot = getSlot(this, 'default', { value: this.internalLazyValue })
 
       if (!slot) return null
 
-      return h('div', {
-        class: 'v-progress-linear__content',
-      }, slot)
+      return h(
+        "div",
+        {
+          class: "v-progress-linear__content"
+        },
+        {
+          default: () => slot
+        }
+      );
     },
-    genListeners () {
+    genListeners (): any {
       const listeners = this.$listeners
 
       if (this.reactive) {
@@ -203,7 +224,7 @@ export default baseMixins.extend({
 
       return listeners
     },
-    genProgressBar (name: 'long' | 'short') {
+    genProgressBar (name: 'long' | 'short'): VNode {
       return h('div', this.setBackgroundColor(this.color, {
         class: ['v-progress-linear__indeterminate',
           {
@@ -222,22 +243,21 @@ export default baseMixins.extend({
     onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
       this.isVisible = isIntersecting
     },
-    normalize (value: string | number) {
-      if (value < 0) return 0
-      if (value > 100) return 100
-      return parseFloat(value)
+    normalize (value: string | number): number {
+      const numValue = typeof value === 'string' ? parseFloat(value) : value
+      if (numValue < 0) return 0
+      if (numValue > 100) return 100
+      return numValue
     },
   },
 
   render (): VNode {
     const data = {
       class: ['v-progress-linear', this.classes],
-      attrs: {
-        role: 'progressbar',
-        'aria-valuemin': 0,
-        'aria-valuemax': this.normalizedBuffer,
-        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
-      },
+      role: 'progressbar',
+      'aria-valuemin': 0,
+      'aria-valuemax': this.normalizedBuffer,
+      'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
       style: {
         bottom: this.bottom ? 0 : undefined,
         height: this.active ? convertToUnit(this.height) : 0,