@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VProgressLinear.sass'
 
 // Components
@@ -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
 )
 
@@ -35,8 +34,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-progress-linear',
 
-  directives: { intersect },
-
   props: {
     active: {
       type: Boolean,
@@ -63,20 +60,30 @@ 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,
     },
+    // События как пропсы для определения реактивности
+    onChange: Function,
+    onUpdateModelValue: Function,
   },
 
+  emits: ['update:modelValue', 'change', 'click'],
+
   data () {
     return {
-      internalLazyValue: this.value || 0,
+      internalLazyValue: this.modelValue || this.value || 0,
       isVisible: true,
     }
   },
@@ -89,7 +96,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
@@ -113,8 +122,8 @@ export default baseMixins.extend({
         class: ['v-progress-linear__indeterminate',
           {
             'v-progress-linear__indeterminate--active': this.active,
-          }
-        ]
+          },
+        ],
       }, [
         this.genProgressBar('long'),
         this.genProgressBar('short'),
@@ -154,7 +163,7 @@ export default baseMixins.extend({
         ...this.themeClasses,
       }
     },
-    computedTransition (): FunctionalComponentOptions {
+    computedTransition (): any {
       return this.indeterminate ? VFadeTransition : VSlideXTransition
     },
     isReversed (): boolean {
@@ -167,7 +176,8 @@ export default baseMixins.extend({
       return this.normalize(this.internalLazyValue)
     },
     reactive (): boolean {
-      return Boolean(this.$listeners.change)
+      return Boolean(this.onChange) || Boolean(this.onUpdateModelValue) ||
+             Boolean(this.$attrs.onChange) || Boolean(this.$attrs['onUpdate:modelValue'])
     },
     styles (): object {
       const styles: Record<string, any> = {}
@@ -184,18 +194,33 @@ 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 () {
-      const listeners = this.$listeners
+    genListeners (): any {
+      const listeners = this.$listeners || {}
 
       if (this.reactive) {
         listeners.onClick = this.onClick
@@ -203,13 +228,13 @@ 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',
           {
             [name]: true,
-          }
-        ]
+          },
+        ],
       }))
     },
     onClick (e: MouseEvent) {
@@ -217,27 +242,31 @@ export default baseMixins.extend({
 
       const { width } = this.$el.getBoundingClientRect()
 
-      this.internalValue = e.offsetX / width * 100
+      const newValue = e.offsetX / width * 100
+      this.internalLazyValue = newValue
+
+      this.$emit('update:modelValue', newValue)
+      this.$emit('change', newValue)
+      this.$emit('click', e)
     },
     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,
@@ -255,8 +284,8 @@ export default baseMixins.extend({
     ]), [
       [
         Intersect,
-        this.onObserve
-      ]
+        this.onObserve,
+      ],
     ])
   },
 })