@dimailn/vuetify 2.7.2-alpha58 → 2.7.2-alpha59

package/src/components/VColorPicker/VColorPickerEdit.ts

@@ -45,6 +45,10 @@ export const modes = {
   }
 } as { [key: string]: Mode }
 
+export function getValidMode (mode?: string | null): string {
+  return mode && Object.keys(modes).includes(mode) ? mode : 'rgba'
+}
+
 export default defineComponent({
   name: 'v-color-picker-edit',
 
@@ -67,19 +71,19 @@ export default defineComponent({
 
   data () {
     return {
-      internalMode: this.mode
+      internalMode: getValidMode(this.mode)
     }
   },
 
   computed: {
     currentMode (): Mode {
-      return modes[this.internalMode]
+      return modes[this.internalMode] || modes.rgba
     }
   },
 
   watch: {
     mode (mode: string) {
-      this.internalMode = mode
+      this.internalMode = getValidMode(mode)
     }
   },
 

package/src/components/VColorPicker/__tests__/VColorPickerEdit.spec.ts

@@ -132,6 +132,17 @@ describe('VColorPickerEdit.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should fallback to rgba mode when mode is null', () => {
+    const wrapper = mountFunction({
+      props: {
+        color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
+        mode: null as any
+      }
+    })
+
+    expect(wrapper.findAll('input')).toHaveLength(4)
+  })
+
   it('should hide mode switch button', () => {
     const wrapper = mountFunction({
       props: {

package/src/components/VContent/VContent.ts

@@ -21,16 +21,18 @@ export default defineComponent({
     // Add the legacy class names
     const node = VMain.render.call(this, h)
 
-    const existingClasses = node.data?.class || ''
+    const existingClasses = node.props?.class || ''
     const contentClasses = normalizeClasses(`${existingClasses} v-content`)
-    node.data = { ...node.data, class: contentClasses }
 
-    if (node.children && node.children[0] && node.children[0].data) {
-      const childExistingClasses = node.children[0].data.class || ''
+    const children = (node.children as VNode[] | undefined)?.map((child, i) => {
+      if (i !== 0) return child
+
+      const childExistingClasses = child.props?.class || ''
       const wrapClasses = normalizeClasses(`${childExistingClasses} v-content__wrap`)
-      node.children[0].data = { ...node.children[0].data, class: wrapClasses }
-    }
 
-    return h(getTagValue(this.tag), node.data, node.children)
+      return h('div', { ...child.props, class: wrapClasses }, child.children as any)
+    })
+
+    return h(getTagValue(this.tag), { ...node.props, class: contentClasses }, children ?? node.children)
   }
 })

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

@@ -0,0 +1,40 @@
+// Components
+import VContent from '../VContent'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+
+describe('VContent.ts', () => {
+  let mountFunction: (options?: any) => any
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VContent, {
+        ...options,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                bar: 24,
+                top: 64,
+                left: 256,
+                right: 256,
+                footer: 48,
+                insetFooter: 32,
+                bottom: 56
+              }
+            }
+          }
+        }
+      })
+    }
+  })
+
+  it('should apply legacy v-content classes', () => {
+    const wrapper = mountFunction()
+
+    expect('[Vuetify] [UPGRADE] \'v-content\' is deprecated, use \'v-main\' instead.').toHaveBeenTipped()
+    expect(wrapper.classes()).toContain('v-content')
+    expect(wrapper.find('.v-content__wrap').exists()).toBe(true)
+  })
+})

package/src/components/VInput/VInput.ts

@@ -58,14 +58,15 @@ export default baseMixins.extend({
     loading: Boolean,
     persistentHint: Boolean,
     prependIcon: String,
-    modelValue: null as any as PropType<any>
+    modelValue: null as any as PropType<any>,
+    value: null as any as PropType<any>
   },
 
   emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error', 'change', 'update:modelValue'],
 
   data () {
     return {
-      lazyValue: this.modelValue,
+      lazyValue: this.modelValue ?? this.value,
       hasMouseDown: false
     }
   },
@@ -145,12 +146,20 @@ export default baseMixins.extend({
   watch: {
     modelValue (val) {
       this.lazyValue = val
+    },
+    value (val) {
+      if (this.modelValue == null) {
+        this.lazyValue = val
+      }
     }
   },
 
   created () {
+    if (this.modelValue == null && this.value == null && this.$attrs.hasOwnProperty('value')) {
+      this.lazyValue = this.$attrs.value
+    }
+
     const breakingProps = [
-      ['value', 'modelValue'],
       ['onInput', 'onUpdate:modelValue']
     ]
 
@@ -339,7 +348,7 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    const { class: additionalClasses, ...restAttrs } = this.$attrs as Record<string, any>
+    const { class: additionalClasses, value: _value, ...restAttrs } = this.$attrs as Record<string, any>
 
     return h('div', this.setTextColor(this.validationState, {
       class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },

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

@@ -68,6 +68,32 @@ describe('VInput.ts', () => {
     expect(wrapper.vm.lazyValue).toBe('bar')
   })
 
+  it('should initialize lazyValue from legacy value prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        value: 'foo'
+      }
+    })
+
+    expect(wrapper.vm.lazyValue).toBe('foo')
+    expect(wrapper.element.classList).toContain('v-input--is-dirty')
+
+    await wrapper.setProps({ value: 'bar' })
+
+    expect(wrapper.vm.lazyValue).toBe('bar')
+  })
+
+  it('should prefer modelValue over legacy value prop', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 'model',
+        value: 'legacy'
+      }
+    })
+
+    expect(wrapper.vm.lazyValue).toBe('model')
+  })
+
   it('should generate append and prepend slots', () => {
     const el = (slot: string) => h('div', slot)
     const wrapper = mountFunction({
@@ -180,7 +206,7 @@ describe('VInput.ts', () => {
 
   it('should render a label', () => {
     const wrapper = mountFunction({
-      props: { label: 'foo' }
+      props: { label: 'foo', id: 'test' }
     })
 
     expect(wrapper.vm.hasLabel).toBe(true)
@@ -190,6 +216,7 @@ describe('VInput.ts', () => {
   it('should apply theme to label, counter, messages and icons', () => {
     const wrapper = mountFunction({
       props: {
+        id: 'test',
         label: 'foo',
         hint: 'bar',
         persistentHint: true,

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

@@ -32,9 +32,9 @@ exports[`VInput.ts should apply theme to label, counter, messages and icons 1`]
   <div class="v-input__control">
     <div class="v-input__slot">
       <label class="v-label theme--light"
-             for="input-48"
+             for="test"
              aria-hidden="false"
-             style="left: 0px; position: relative;"
+             style="left: 0px;"
       >
         foo
       </label>
@@ -193,9 +193,9 @@ exports[`VInput.ts should render a label 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <label class="v-label theme--light"
-             for="input-43"
+             for="test"
              aria-hidden="false"
-             style="left: 0px; position: relative;"
+             style="left: 0px;"
       >
         foo
       </label>

package/src/components/VLabel/VLabel.ts

@@ -36,6 +36,10 @@ export default mixins(Themeable).extend({
       type: [Number, String],
       default: 'auto'
     },
+    tag: {
+      type: String,
+      default: 'label'
+    },
     value: Boolean
   },
 
@@ -50,16 +54,16 @@ export default mixins(Themeable).extend({
         'v-label--is-disabled': this.disabled,
         ...functionalThemeClasses(this)
       },
-      for: props.for,
+      ...(props.tag === 'label' ? { for: props.for } : {}),
       'aria-hidden': !props.for,
       style: {
         left: convertToUnit(props.left),
         right: convertToUnit(props.right),
-        position: props.absolute ? 'absolute' : 'relative'
+        ...(props.absolute ? { position: 'absolute' } : {})
       },
       ref: 'label'
     }, data)
 
-    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default?.())
+    return h(props.tag, Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default?.())
   }
 })

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

@@ -40,6 +40,16 @@ describe('VLabel', () => {
     expect(wrapper.element.style.position).toBe('absolute')
   })
 
+  it('should not set position when absolute is false', () => {
+    const wrapper = mountFunction({
+      props: {
+        absolute: false
+      }
+    })
+
+    expect(wrapper.element.style.position).toBe('')
+  })
+
   it('should render default slot content', () => {
     const wrapper = mountFunction({
       slots: {

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -82,10 +82,15 @@ export default defineComponent({
 
       if (!label) return label
 
-      label.data = label.data || {}
-
-      // Reset previously set styles from parent
-      label.data.style = {}
+      label.props ||= {}
+
+      // Label must stay in document flow to size the control
+      // (.v-select__selections has width: 0).
+      // Do not use position:relative — it activates CSS `top` and breaks alignment.
+      label.props.absolute = false
+      label.props.left = ''
+      label.props.right = ''
+      label.props.style = {}
 
       return label
     },

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

@@ -109,6 +109,21 @@ describe('VOverflowBtn.js', () => {
     expect(callback).toHaveBeenCalled()
   })
 
+  it('should keep label in document flow without relative positioning', () => {
+    const wrapper = mountFunction({
+      props: {
+        items: ['foo'],
+        label: 'Select font'
+      }
+    })
+
+    const label = wrapper.find('label')
+
+    expect(label.exists()).toBe(true)
+    expect(label.element.style.position).toBe('')
+    expect(label.element.style.left).toBe('')
+  })
+
   it('should show label with persistentPlaceholder property set to true', async () => {
     const wrapper = mountFunction({
       props: {

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

@@ -6,19 +6,18 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-15"
+         aria-owns="list-22"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <label class="v-label theme--light"
-               for="input-15"
+               for="input-22"
                aria-hidden="false"
-               style="left: 0px; position: absolute;"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-15"
+          <input id="input-22"
                  readonly
                  type="text"
                  value
@@ -53,19 +52,18 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="true"
-         aria-owns="list-15"
+         aria-owns="list-22"
          class="v-input__slot"
     >
       <div class="v-select__slot">
         <label class="v-label theme--light"
-               for="input-15"
+               for="input-22"
                aria-hidden="false"
-               style="left: 0px; position: absolute;"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-15"
+          <input id="input-22"
                  readonly
                  type="text"
                  value

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -4,12 +4,14 @@ import './VRadioGroup.sass'
 
 // Extensions
 import VInput from '../VInput'
+import VLabel from '../VLabel'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 
 // Utilities
 import { mergeProps, h } from 'vue'
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import type { PropType } from 'vue'
@@ -87,16 +89,18 @@ export default baseMixins.extend({
       return render
     },
     genLabel () {
-      const label = VInput.methods.genLabel.call(this)
-
-      if (!label) return null
-
-      label.data!.attrs!.id = this.computedId
-      // WAI considers this an orphaned label
-      delete label.data!.attrs!.for
-      label.tag = 'legend'
-
-      return label
+      if (!this.hasLabel) return null
+
+      return h(VLabel, {
+        id: this.computedId,
+        color: this.validationState,
+        dark: this.dark,
+        disabled: this.isDisabled,
+        focused: this.hasState,
+        for: this.computedId,
+        light: this.light,
+        tag: 'legend'
+      }, () => getSlot(this, 'label') || this.label)
     },
     onClick: BaseItemGroup.methods.onClick
   },

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

@@ -37,4 +37,23 @@ describe('VRadioGroup.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should render group label as legend without for attribute', () => {
+    const wrapper = mountFunction({
+      props: {
+        label: 'Radio group label'
+      },
+      slots: {
+        default: [VRadio]
+      }
+    })
+
+    const legend = wrapper.find('legend')
+
+    expect(legend.exists()).toBe(true)
+    expect(legend.text()).toBe('Radio group label')
+    expect(legend.attributes('id')).toBeTruthy()
+    expect(legend.attributes('for')).toBeUndefined()
+    expect(legend.attributes('aria-hidden')).toBe('false')
+  })
 })

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -112,10 +112,11 @@ export default defineComponent({
       return createRange(2).map(i => {
         const input = VSlider.methods.genInput.call(this)
 
-        input.data = input.data || {}
-        input.data.attrs = input.data.attrs || {}
-        input.data.attrs.value = this.internalValue[i]
-        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this.$.uid}`
+        input.props = {
+          ...input.props,
+          value: this.internalValue[i],
+          id: `input-${i ? 'max' : 'min'}-${this.$.uid}`
+        }
 
         return input
       })

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

@@ -191,7 +191,10 @@ describe('VRangeSlider', () => {
     const wrapper = mountFunction()
     const [min, max] = wrapper.vm.genInput()
 
-    expect(min.data.attrs.id).not.toEqual(max.data.attrs.id)
+    expect(min.props!.id).not.toEqual(max.props!.id)
+
+    const inputs = wrapper.findAll('input')
+    expect(inputs[0].attributes('id')).not.toEqual(inputs[1].attributes('id'))
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/12733

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

@@ -5,17 +5,17 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--vertical theme--light">
-        <input id="input-25"
+        <input id="input-min-25"
                disabled
                readonly
                tabindex="-1"
-               value="0,0"
+               value="0"
         >
-        <input id="input-25"
+        <input id="input-max-25"
                disabled
                readonly
                tabindex="-1"
-               value="0,0"
+               value="0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background primary lighten-3">
@@ -66,17 +66,17 @@ exports[`VRangeSlider should render disabled slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
-        <input id="input-29"
+        <input id="input-min-29"
                disabled
                readonly
                tabindex="-1"
-               value="0,0"
+               value="0"
         >
-        <input id="input-29"
+        <input id="input-max-29"
                disabled
                readonly
                tabindex="-1"
-               value="0,0"
+               value="0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background">

package/src/components/VSelect/VSelect.ts

@@ -505,7 +505,7 @@ export default baseMixins.extend({
         type: 'text',
         'aria-readonly': String(this.isReadonly),
         'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-        autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
+        autocomplete: getObjectValueByPath(input.props, 'autocomplete', 'off'),
         placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
         onKeypress: this.onKeyPress
       })

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

@@ -490,6 +490,7 @@ describe('VSelect.ts', () => {
     })
 
     expect(wrapper.vm.$attrs.autocomplete).toBe('on')
+    expect(wrapper.find('input').attributes('autocomplete')).toBe('on')
   })
 
   // Based on issue: https://github.com/vuetifyjs/vuetify/issues/12769

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

@@ -317,7 +317,7 @@ exports[`VSlider.ts should display label and have different aria-label 1`] = `
       <label class="v-label theme--light"
              for="input-98"
              aria-hidden="false"
-             style="left: 0px; position: relative;"
+             style="left: 0px;"
       >
         foo
       </label>
@@ -704,7 +704,7 @@ exports[`VSlider.ts should reverse label location when inverse 1`] = `
       <label class="v-label theme--light"
              for="input-89"
              aria-hidden="false"
-             style="left: 0px; position: relative;"
+             style="left: 0px;"
       >
         foo
       </label>
@@ -788,7 +788,7 @@ exports[`VSlider.ts should reverse label location when inverse 2`] = `
       <label class="v-label theme--light"
              for="input-89"
              aria-hidden="false"
-             style="left: 0px; position: relative;"
+             style="left: 0px;"
       >
         foo
       </label>

package/src/components/VTextField/VTextField.ts

@@ -216,7 +216,6 @@ export default baseMixins.extend({
 
   created () {
     const breakingProps = [
-      ['value', 'modelValue'],
       ['onInput', 'onUpdate:modelValue']
     ]
 
@@ -391,12 +390,12 @@ export default baseMixins.extend({
     genInput () {
       const listeners = Object.assign({}, this.listeners$)
       delete listeners.change // Change should not be bound externally
-      const { title, onChange: _onChange, class: _class, style: _style, ...inputAttrs } = this.attrs$ as Record<string, any>
+      const { title, onChange: _onChange, class: _class, style: _style, value: _value, ...inputAttrs } = this.attrs$ as Record<string, any>
 
       const node = h('input', {
         style: {},
-        value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,
         ...inputAttrs,
+        value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,
         autofocus: this.autofocus,
         disabled: this.isDisabled,
         id: this.computedId,

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

@@ -272,4 +272,19 @@ describe('VTextarea.ts', () => {
     const textarea = wrapper.find('textarea')
     expect(textarea.attributes('rows')).toBe('5')
   })
+
+  it('should activate label when using legacy value prop with auto-grow', () => {
+    const wrapper = mountFunction({
+      props: {
+        autoGrow: true,
+        filled: true,
+        label: 'Label',
+        value: 'The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through.'
+      }
+    })
+
+    expect(wrapper.element.classList).toContain('v-input--is-label-active')
+    expect(wrapper.element.classList).toContain('v-input--is-dirty')
+    expect(wrapper.find('.v-label').element.classList).toContain('v-label--active')
+  })
 })