@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render a stream component 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
+  <div class="v-progress-linear__stream primary--text"
+       style="width: 0%;"
+  >
+  </div>
   <div class="v-progress-linear__background primary"
        style="opacity: 0.3; left: 33%; width: 67%;"
   >
@@ -21,16 +25,16 @@ exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear v-progress-linear--reverse theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; right: 33%; width: 67%;"
+       style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -42,21 +46,19 @@ exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component with buffer value and match snapshot 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
+<div class="v-progress-linear v-progress-linear--reverse theme--light"
+     role="progressbar"
      aria-valuemin="0"
-     aria-valuemax="80"
+     aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 33%; width: 47%;"
+       style="opacity: 0.3; right: 33%; width: 67%;"
   >
   </div>
-  <div class="v-progress-linear__buffer"
-       style="width: 80%;"
-  >
+  <div class="v-progress-linear__buffer">
   </div>
   <div class="v-progress-linear__determinate primary"
        style="width: 33%;"
@@ -65,20 +67,20 @@ exports[`VProgressLinear.ts should render component with buffer value and match
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component with buffer value and match snapshot 2`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component with buffer value and match snapshot 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
-     aria-valuemax="0"
+     aria-valuemax="80"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 33%; width: 0%;"
+       style="opacity: 0.3; left: 33%; width: 47%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
-       style="width: 0%;"
+       style="width: 80%;"
   >
   </div>
   <div class="v-progress-linear__determinate primary"
@@ -89,11 +91,11 @@ exports[`VProgressLinear.ts should render component with buffer value and match
 `;
 
 exports[`VProgressLinear.ts should render component with buffer value and value > buffer value and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="80"
      aria-valuenow="90"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -112,11 +114,11 @@ exports[`VProgressLinear.ts should render component with buffer value and value
 `;
 
 exports[`VProgressLinear.ts should render component with color and background color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
@@ -125,7 +127,7 @@ exports[`VProgressLinear.ts should render component with color and background co
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -133,11 +135,11 @@ exports[`VProgressLinear.ts should render component with color and background co
 `;
 
 exports[`VProgressLinear.ts should render component with color and background color and opacity and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
@@ -146,7 +148,7 @@ exports[`VProgressLinear.ts should render component with color and background co
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -154,20 +156,20 @@ exports[`VProgressLinear.ts should render component with color and background co
 `;
 
 exports[`VProgressLinear.ts should render component with color and background opacity and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
-  <div class="v-progress-linear__background orange"
+  <div class="v-progress-linear__background red"
        style="opacity: 0.5; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -175,20 +177,20 @@ exports[`VProgressLinear.ts should render component with color and background op
 `;
 
 exports[`VProgressLinear.ts should render component with color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
-  <div class="v-progress-linear__background orange"
+  <div class="v-progress-linear__background red"
        style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -196,60 +198,32 @@ exports[`VProgressLinear.ts should render component with color and match snapsho
 `;
 
 exports[`VProgressLinear.ts should render component with css color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background"
-       style="opacity: 0.3; left: 33%; width: 67%; background-color: rgb(51, 102, 153); border-color: #336699;"
+       style="opacity: 0.3; left: 33%; width: 67%; background-color: rgb(255, 0, 0); border-color: #ff0000;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
   <div class="v-progress-linear__determinate"
-       style="width: 33%; background-color: rgb(51, 102, 153); border-color: #336699;"
+       style="width: 33%; background-color: rgb(255, 0, 0); border-color: #ff0000;"
   >
   </div>
 </div>
 `;
 
-exports[`VProgressLinear.ts should render default slot content 1`] = `
-<div role="progressbar"
-     aria-valuemin="0"
-     aria-valuemax="80"
-     aria-valuenow="90"
-     class="v-progress-linear theme--light"
-     style="height: 4px;"
->
-  <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 90%; width: 0%;"
-  >
-  </div>
-  <div class="v-progress-linear__buffer"
-       style="width: 80%;"
-  >
-  </div>
-  <div class="v-progress-linear__determinate primary"
-       style="width: 90%;"
-  >
-  </div>
-  <div class="v-progress-linear__content">
-    <div class="foobar">
-      content
-    </div>
-  </div>
-</div>
-`;
-
 exports[`VProgressLinear.ts should render inactive component and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 0px;"
 >
   <div class="v-progress-linear__background primary"
@@ -268,10 +242,10 @@ exports[`VProgressLinear.ts should render inactive component and match snapshot
 `;
 
 exports[`VProgressLinear.ts should render indeterminate progress and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -290,10 +264,10 @@ exports[`VProgressLinear.ts should render indeterminate progress and match snaps
 `;
 
 exports[`VProgressLinear.ts should render indeterminate progress with query prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear v-progress-linear--query theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-linear v-progress-linear--query theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -312,11 +286,11 @@ exports[`VProgressLinear.ts should render indeterminate progress with query prop
 `;
 
 exports[`VProgressLinear.ts should render reverse component in RTL mode 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -333,11 +307,11 @@ exports[`VProgressLinear.ts should render reverse component in RTL mode 1`] = `
 `;
 
 exports[`VProgressLinear.ts should render reversed component 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear v-progress-linear--reverse theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear v-progress-linear--reverse theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"

package/src/components/VRadioGroup/VRadio.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VRadio.sass'
 
@@ -20,7 +20,7 @@ import Selectable, { prevent } from '../../mixins/selectable'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, VNodeData } from 'vue'
+import type { VNode, VNodeData } from '../../types/vue-internal'
 import mixins from '../../util/mixins'
 import { mergeListeners } from '../../util/mergeData'
 
@@ -32,7 +32,7 @@ const baseMixins = mixins(
   Themeable
 )
 
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   radioGroup: InstanceType<typeof VRadioGroup>
 }
 
@@ -45,30 +45,32 @@ export default baseMixins.extend({
   props: {
     disabled: {
       type: Boolean,
-      default: null,
+      default: null
     },
     id: String,
     label: String,
     name: String,
     offIcon: {
       type: String,
-      default: '$radioOff',
+      default: '$radioOff'
     },
     onIcon: {
       type: String,
-      default: '$radioOn',
+      default: '$radioOn'
     },
     readonly: {
       type: Boolean,
-      default: null,
+      default: null
     },
     value: {
-      default: null,
-    },
+      default: null
+    }
   },
 
+  emits: ['change', 'focus', 'blur'],
+
   data: () => ({
-    isFocused: false,
+    isFocused: false
   }),
 
   computed: {
@@ -77,7 +79,7 @@ export default baseMixins.extend({
         'v-radio--is-disabled': this.isDisabled,
         'v-radio--is-focused': this.isFocused,
         ...this.themeClasses,
-        ...this.groupClasses,
+        ...this.groupClasses
       }
     },
     computedColor (): string | undefined {
@@ -120,7 +122,7 @@ export default baseMixins.extend({
     },
     validationState (): string | undefined {
       return (this.radioGroup || {}).validationState || this.computedColor
-    },
+    }
   },
 
   methods: {
@@ -138,24 +140,24 @@ export default baseMixins.extend({
         onClick: prevent,
         for: this.computedId,
         color: this.validationState,
-        focused: this.hasState,
-      }, getSlot(this, 'label') || this.label)
+        focused: this.hasState
+      }, () => getSlot(this, 'label') || this.label)
     },
     genRadio () {
       const { title, ...radioAttrs } = this.attrs$
 
       return h('div', {
-        class: 'v-input--selection-controls__input',
+        class: 'v-input--selection-controls__input'
       }, [
         h(VIcon, this.setTextColor(this.validationState, {
-          dense: this.radioGroup && this.radioGroup.dense,
-        }), this.computedIcon),
+          dense: this.radioGroup && this.radioGroup.dense
+        }), () => this.computedIcon),
         this.genInput({
           name: this.computedName,
           value: this.value,
-          ...radioAttrs,
+          ...radioAttrs
         }),
-        this.genRipple(this.setTextColor(this.rippleState)),
+        this.genRipple(this.setTextColor(this.rippleState))
       ])
     },
     onFocus (e: Event) {
@@ -171,21 +173,21 @@ export default baseMixins.extend({
 
       this.toggle()
     },
-    onKeydown: () => {}, // Override default with noop
+    onKeydown: () => {} // Override default with noop
   },
 
   render (): VNode {
     const data: VNodeData = {
       class: ['v-radio', this.classes],
       ...mergeListeners({
-        onClick: this.onChange,
+        onClick: this.onChange
       }, this.listeners$),
       title: this.attrs$.title
     }
 
     return h('div', data, [
       this.genRadio(),
-      this.genLabel(),
+      this.genLabel()
     ])
-  },
+  }
 })

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -6,14 +6,17 @@ import './VRadioGroup.sass'
 import VInput from '../VInput'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 
-// Types
+// Utilities
+import { mergeProps, h } from 'vue'
 import mixins from '../../util/mixins'
-import { PropType } from 'vue'
-import {h} from 'vue'
+import { breaking } from '../../util/console'
+
+// Types
+import type { PropType } from 'vue'
 
 const baseMixins = mixins(
   VInput,
-  BaseItemGroup,
+  BaseItemGroup
 )
 
 /* @vue/component */
@@ -22,25 +25,25 @@ export default baseMixins.extend({
 
   provide () {
     return {
-      radioGroup: this,
+      radioGroup: this
     }
   },
 
   props: {
     column: {
       type: Boolean,
-      default: true,
+      default: true
     },
     height: {
       type: [Number, String],
-      default: 'auto',
+      default: 'auto'
     },
     name: String,
     row: Boolean,
     // If no value set on VRadio
     // will match valueComparator
     // force default to null
-    modelValue: null as unknown as PropType<any>,
+    modelValue: null as unknown as PropType<any>
   },
 
   computed: {
@@ -49,9 +52,22 @@ export default baseMixins.extend({
         ...VInput.computed.classes.call(this),
         'v-input--selection-controls v-input--radio-group': true,
         'v-input--radio-group--column': this.column && !this.row,
-        'v-input--radio-group--row': this.row,
+        'v-input--radio-group--row': this.row
       }
-    },
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   methods: {
@@ -60,7 +76,7 @@ export default baseMixins.extend({
         class: 'v-input--radio-group__input',
         id: this.id,
         role: 'radiogroup',
-        'aria-labelledby': this.computedId,
+        'aria-labelledby': this.computedId
       }, VInput.methods.genDefaultSlot.call(this))
     },
     genInputSlot () {
@@ -82,17 +98,14 @@ export default baseMixins.extend({
 
       return label
     },
-    onClick: BaseItemGroup.methods.onClick,
+    onClick: BaseItemGroup.methods.onClick
   },
 
   render () {
     const vnode = VInput.render.call(this)
 
-    vnode.props = {
-      ...vnode.props,
-      ...this.attrs$
-    }
+    vnode.props = mergeProps(vnode.props, this.attrs$)
 
     return vnode
-  },
+  }
 })