@dimailn/vuetify 2.7.2-alpha57 → 2.7.2-alpha59

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')
+  })
 })

package/src/mixins/overlayable/__tests__/overlayable.spec.ts

@@ -75,6 +75,12 @@ describe('Overlayable.ts', () => {
     expect(wrapper.vm.overlay).toBeFalsy()
   })
 
+  it('destroyOverlay безопасен когда оверлея нет', () => {
+    const wrapper = mountFunction()
+    expect(() => wrapper.vm.destroyOverlay()).not.toThrow()
+    expect(wrapper.vm.overlay).toBeFalsy()
+  })
+
   it('should remove overlay app container after close', async () => {
     const wrapper = mountFunction()
 
@@ -210,6 +216,24 @@ describe('Overlayable.ts', () => {
       expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
     })
 
+    it('beforeUnmount уничтожает оверлей даже при isActive (фикс залипшего overlay)', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      expect(app.querySelector('.v-overlay')).toBeTruthy()
+      expect(document.querySelectorAll('[data-v-app]')).toHaveLength(1)
+
+      wrapper.unmount()
+
+      expect(app.querySelector('.v-overlay')).toBeNull()
+      expect(document.querySelectorAll('[data-v-app]')).toHaveLength(0)
+    })
+
     it('showOverlay true→true не вызывает genOverlay после потери [data-app]', async () => {
       const genOverlay = jest.fn()
       const removeOverlay = jest.fn()

package/src/mixins/overlayable/index.ts

@@ -57,7 +57,7 @@ export default defineComponent({
   },
 
   beforeUnmount () {
-    this.removeOverlay()
+    this.destroyOverlay()
   },
 
   methods: {
@@ -113,14 +113,7 @@ export default defineComponent({
       if (this.hideOverlay) return
 
       if (!this.overlay?.$el?.isConnected) {
-        if (this.overlay) {
-          cancelAnimationFrame(this.animationFrame)
-          const container = this.overlay.$el?.parentNode as HTMLElement | null
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-          if (container?.parentNode) container.parentNode.removeChild(container)
-          this.overlay = null
-        }
+        this.teardownOverlay()
         this.createOverlay()
       }
 
@@ -142,10 +135,7 @@ export default defineComponent({
     removeOverlay (showScroll = true) {
       if (this.overlay) {
         if (!this.overlay.$el?.isConnected) {
-          cancelAnimationFrame(this.animationFrame)
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-          this.overlay = null
+          this.teardownOverlay()
           showScroll && this.showScroll()
           return
         }
@@ -159,16 +149,7 @@ export default defineComponent({
             this.isActive
           ) return
 
-          const overlayContainer = this.overlay.$el.parentNode as HTMLElement | null
-
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-
-          if (overlayContainer?.parentNode) {
-            overlayContainer.parentNode.removeChild(overlayContainer)
-          }
-
-          this.overlay = null
+          this.teardownOverlay()
         })
 
         // Cancel animation frame in case
@@ -181,6 +162,27 @@ export default defineComponent({
 
       showScroll && this.showScroll()
     },
+    teardownOverlay () {
+      cancelAnimationFrame(this.animationFrame)
+
+      if (!this.overlay) return
+
+      const container = this.overlay.$el?.parentNode as HTMLElement | null
+
+      this.overlayApp?.unmount()
+      this.overlayApp = null
+
+      if (container?.parentNode) {
+        container.parentNode.removeChild(container)
+      }
+
+      this.overlay = null
+    },
+    /** Синхронно уничтожает оверлей независимо от isActive/анимации. Для unmount. */
+    destroyOverlay () {
+      this.teardownOverlay()
+      this.showScroll()
+    },
     scrollListener (e: WheelEvent | KeyboardEvent) {
       if ('key' in e) {
         if (