@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

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 value="0"
-               id="input-min-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background primary lighten-3">
@@ -25,28 +25,28 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
           <div class="v-slider__track-background primary lighten-3">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
@@ -54,11 +54,8 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -69,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 value="0"
-               id="input-min-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background">
@@ -89,28 +86,28 @@ exports[`VRangeSlider should render disabled slider 1`] = `
           <div class="v-slider__track-background">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
@@ -118,11 +115,8 @@ exports[`VRangeSlider should render disabled slider 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

package/src/components/VRating/VRating.ts

@@ -16,6 +16,7 @@ import Ripple from '../../directives/ripple'
 // Utilities
 import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeDirective, VNodeChildren } from 'vue'
@@ -127,6 +128,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     internalValue (val) {
       val !== this.modelValue && this.$emit('update:modelValue', val)

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

@@ -2,8 +2,8 @@
 
 exports[`VResponsive.ts should force aspect ratio 1`] = `
 <div class="v-responsive">
-  <div class="v-responsive__sizer"
-       style="padding-bottom: 56.25%;"
+  <div style="padding-bottom: 56.25%;"
+       class="v-responsive__sizer"
   >
   </div>
   <div class="v-responsive__content">

package/src/components/VSelect/VSelect.ts

@@ -22,7 +22,7 @@ import ClickOutside from '../../directives/click-outside'
 // Utilities
 import mergeData from '../../util/mergeData'
 import { getPropertyFromItem, getObjectValueByPath, keyCodes, normalizeAttrs } from '../../util/helpers'
-import { consoleError } from '../../util/console'
+import { consoleError, breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
@@ -63,10 +63,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-select',
 
-  directives: {
-    ClickOutside,
-  },
-
   props: {
     appendIcon: {
       type: String,
@@ -76,6 +72,7 @@ export default baseMixins.extend({
       type: null as unknown as PropType<string | boolean | Element | VNode>,
       default: false,
     },
+    auto: Boolean,
     cacheItems: Boolean,
     chips: Boolean,
     clearable: Boolean,
@@ -107,12 +104,15 @@ export default baseMixins.extend({
       type: [String, Array, Object],
       default: () => defaultMenuProps,
     },
+    minWidth: [String, Number],
     multiple: Boolean,
     openOnClear: Boolean,
     returnObject: Boolean,
     smallChips: Boolean,
   },
 
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index'],
+
   data () {
     return {
       cachedItems: this.cacheItems ? this.items : [],
@@ -129,6 +129,7 @@ export default baseMixins.extend({
       selectedItems: [] as any[],
       keyboardLookupPrefix: '',
       keyboardLookupLastTime: 0,
+      detectedScopeId: null as string | null,
     }
   },
 
@@ -152,7 +153,7 @@ export default baseMixins.extend({
       return this.allItems
     },
     computedOwns (): string {
-      return `list-${this.$.uid}`
+      return `list-${this.$?.uid}`
     },
     computedCounterValue (): number {
       const value = this.multiple
@@ -173,8 +174,8 @@ export default baseMixins.extend({
             handler: () => this.isFocused && this.blur(),
             closeConditional: this.closeConditional,
             include: () => this.getOpenDependentElements(),
-          }
-        ]
+          },
+        ],
       ]
     },
     dynamicHeight () {
@@ -190,13 +191,7 @@ export default baseMixins.extend({
       return this.selectedItems.length > 0
     },
     listData (): object {
-      const scopeId = this.$vnode && (this.$vnode.context!.$options as { [key: string]: any })._scopeId
-      const attrs = scopeId ? {
-        [scopeId]: true,
-      } : {}
-
       return {
-        ...attrs,
         id: this.computedOwns,
         action: this.multiple,
         color: this.itemColor,
@@ -211,12 +206,27 @@ export default baseMixins.extend({
         onSelect: this.selectItem,
       }
     },
+    listAttrs (): object {
+      const scopeIdAttrs: Record<string, any> = {}
+
+      // Используем detectedScopeId из mounted hook
+      if (this.detectedScopeId) {
+        scopeIdAttrs[this.detectedScopeId] = ''
+      }
+
+      // scopeId успешно передается в VSelectList
+
+      return scopeIdAttrs
+    },
     staticList (): VNode {
       if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
         consoleError('assert: staticList should not be called if slots are used')
       }
 
-      return h(VSelectList, this.listData,  {
+      return h(VSelectList, {
+        ...this.listData,
+        ...this.listAttrs,
+      }, {
         item: this.$slots.item,
       })
     },
@@ -243,26 +253,31 @@ export default baseMixins.extend({
         eager: this.eager,
         modelValue: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
+        auto: this.auto,
+        minWidth: this.minWidth,
         ...normalisedProps,
       }
     },
   },
 
   watch: {
-    internalValue (val) {
-      this.initialValue = val
-      this.setSelectedItems()
+    internalValue: {
+      handler (val) {
+        this.initialValue = val
+        this.setSelectedItems()
 
-      if (this.multiple) {
-        this.$nextTick(() => {
-          this.$refs.menu?.updateDimensions()
-        })
-      }
-      if (this.hideSelected) {
-        this.$nextTick(() => {
-          this.onScroll()
-        })
-      }
+        if (this.multiple) {
+          this.$nextTick(() => {
+            this.$refs.menu?.updateDimensions()
+          })
+        }
+        if (this.hideSelected) {
+          this.$nextTick(() => {
+            this.onScroll()
+          })
+        }
+      },
+      deep: true,
     },
     isMenuActive (val) {
       window.setTimeout(() => this.onMenuActiveChange(val))
@@ -284,6 +299,34 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      if (this.$el && this.$el.attributes) {
+        const attrs = this.$el.attributes
+        for (let i = 0; i < attrs.length; i++) {
+          const attr = attrs[i]
+          if (attr.name.startsWith('data-v-')) {
+            this.detectedScopeId = attr.name
+            // scopeId найден и сохранен для использования в dropdown
+            break
+          }
+        }
+      }
+    })
+  },
+
   methods: {
     /** @public */
     blur (e?: Event) {
@@ -368,7 +411,7 @@ export default baseMixins.extend({
         tabindex: -1,
         close: this.deletableChips && isInteractive,
         disabled: isDisabled,
-        inputValue: index === this.selectedIndex,
+        modelValue: index === this.selectedIndex,
         small: this.smallChips,
         onClick: (e: MouseEvent) => {
           if (!isInteractive) return
@@ -379,7 +422,7 @@ export default baseMixins.extend({
         },
         'onClick:close': () => this.onChipInput(item),
         key: JSON.stringify(this.getValue(item)),
-      }, this.getText(item))
+      }, () => this.getText(item))
     },
     genCommaSelection (item: object, index: number, last: boolean) {
       const color = index === this.selectedIndex && this.computedColor
@@ -412,7 +455,7 @@ export default baseMixins.extend({
       return [
         this.genFieldset(),
         withDirectives(h('div', {
-          class: 'v-select__slot'
+          class: 'v-select__slot',
         }, [
           this.genLabel(),
           this.prefix ? this.genAffix('prefix') : null,
@@ -435,11 +478,12 @@ export default baseMixins.extend({
 
       if (type === 'append') {
         // Don't allow the dropdown icon to be focused
-        const hasListeners = Object.keys(icon.children![0].props).some(key => key.startsWith('on'))
-        icon.children![0].data = mergeData(icon.children![0].props!, {
-          tabindex: hasListeners && '-1',
+        const iconChild = icon.children![0]
+        const hasListeners = Object.keys(iconChild.props || {}).some(key => key.startsWith('on'))
+        iconChild.props = mergeData(iconChild.props || {}, {
+          tabindex: hasListeners ? '-1' : undefined,
           'aria-hidden': 'true',
-          'aria-label': undefined
+          'aria-label': undefined,
         })
       }
 
@@ -466,10 +510,23 @@ export default baseMixins.extend({
       return input
     },
     genHiddenInput (): VNode {
+      let value = this.lazyValue
+
+      if (this.multiple && Array.isArray(value)) {
+        value = value.map(item => {
+          if (typeof item === 'object' && item !== null) {
+            return this.getValue(item)
+          }
+          return item
+        }).join(',')
+      } else if (typeof value === 'object' && value !== null) {
+        value = this.getValue(value)
+      }
+
       return h('input', {
-        value: this.lazyValue,
+        value,
         type: 'hidden',
-        name: this.attrs$.name
+        name: this.$attrs.name,
       })
     },
     genInputSlot (): VNode {
@@ -480,7 +537,7 @@ export default baseMixins.extend({
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
         'aria-owns': this.computedOwns,
-        ...render.props
+        ...render.props,
       }
 
       return render
@@ -494,18 +551,20 @@ export default baseMixins.extend({
       }
     },
     genListWithSlot (): VNode {
-      const slots = ['prepend-item', 'no-data', 'append-item']
+      const slots = Object.fromEntries(['prepend-item', 'no-data', 'append-item']
         .filter(slotName => this.$slots[slotName])
-        .map(slotName => h('template', {
-          slot: slotName,
-        }, this.$slots[slotName]))
+        .map(slotName => [
+          slotName,
+          this.$slots[slotName],
+        ]
+        ))
       // Requires destructuring due to Vue
       // modifying the `on` property when passed
       // as a referenced object
-
       return h(VSelectList, {
         ...this.listData,
-      }, {...slots,item: this.$slots.item})
+        ...this.listAttrs,
+      }, { ...slots, item: this.$slots.item })
     },
     genMenu (): VNode {
       const props = this.$_menuProps as any
@@ -528,13 +587,13 @@ export default baseMixins.extend({
       return h(VMenu, {
         role: undefined,
         ...props,
-        onInput: (val: boolean) => {
+        'onUpdate:modelValue': (val: boolean) => {
           this.isMenuActive = val
           this.isFocused = val
         },
         onScroll: this.onScroll,
         ref: 'menu',
-      }, [this.genList()])
+      }, () => [this.genList()])
     },
     genSelections (): VNode {
       let length = this.selectedItems.length
@@ -875,7 +934,6 @@ export default baseMixins.extend({
     setValue (value: any) {
       if (!this.valueComparator(value, this.internalValue)) {
         this.internalValue = value
-        this.$emit('update:modelValue', value)
       }
     },
     isAppendInner (target: any) {

package/src/components/VSelect/VSelectList.ts

@@ -19,6 +19,7 @@ import Themeable from '../../mixins/themeable'
 
 // Helpers
 import { getPropertyFromItem } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
@@ -32,11 +33,6 @@ type ListTile = { item: any, disabled?: null | boolean, value?: boolean, index:
 export default mixins(Colorable, Themeable).extend({
   name: 'v-select-list',
 
-  // https://github.com/vuejs/vue/issues/6872
-  directives: {
-    ripple,
-  },
-
   props: {
     action: Boolean,
     dense: Boolean,
@@ -85,19 +81,31 @@ export default mixins(Colorable, Themeable).extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     genAction (item: object, inputValue: any): VNode {
-      return h(VListItemAction, [
+      return h(VListItemAction, {}, () => [
         h(VSimpleCheckbox, {
           color: this.color,
-          value: inputValue,
+          modelValue: inputValue,
           ripple: false,
-          onInput: () => this.$emit('select', item)
+          'onUpdate:modelValue': () => this.$emit('select', item),
         }),
       ])
     },
     genDivider (props: { [key: string]: any }) {
-      return h(VDivider, { props })
+      return h(VDivider, props)
     },
     genFilteredText (text: string) {
       text = text || ''
@@ -109,7 +117,7 @@ export default mixins(Colorable, Themeable).extend({
       return [start, this.genHighlight(middle), end]
     },
     genHeader (props: { [key: string]: any }): VNode {
-      return h(VSubheader, { props }, props.header)
+      return h(VSubheader, props, props.header)
     },
     genHighlight (text: string) {
       return h('span', { class: 'v-list-item__mask' }, text)
@@ -147,7 +155,7 @@ export default mixins(Colorable, Themeable).extend({
         // Default behavior in list does not
         // contain aria-selected by default
         'aria-selected': String(value),
-        id: `list-item-${this._uid}-${index}`,
+        id: `list-item-${this.$.uid}-${index}`,
         role: 'option',
         onMousedown: (e: Event) => {
           // Prevent onBlur from being called
@@ -157,7 +165,14 @@ export default mixins(Colorable, Themeable).extend({
         activeClass: this.tileActiveClass,
         disabled,
         ripple: true,
-        inputValue: value,
+        modelValue: value,
+        // Передаем scopeId атрибуты от родительского компонента
+        ...Object.keys(this.$attrs).reduce((acc, key) => {
+          if (key.startsWith('data-v-')) {
+            acc[key] = this.$attrs[key]
+          }
+          return acc
+        }, {} as Record<string, any>),
       }
 
       if (!this.$slots.item) {
@@ -170,14 +185,16 @@ export default mixins(Colorable, Themeable).extend({
       }
 
       const parent = this
+      const { onClick, onMousedown, ...attrsWithoutEvents } = tile
       const scopedSlot = this.$slots.item({
         parent,
         item,
-        attrs: {
-          ...tile.attrs,
-          ...tile.props,
+        active: value,
+        attrs: tile,
+        on: {
+          onMousedown,
+          onClick,
         },
-        on: tile.on,
       })
 
       return this.needsTile(scopedSlot)
@@ -185,8 +202,8 @@ export default mixins(Colorable, Themeable).extend({
         : scopedSlot
     },
     genTileContent (item: any, index = 0): VNode {
-      return h(VListItemContent, [
-        h(VListItemTitle, [
+      return h(VListItemContent, {}, () => [
+        h(VListItemTitle, {}, () => [
           this.genFilteredText(this.getText(item)),
         ]),
       ])
@@ -194,10 +211,18 @@ export default mixins(Colorable, Themeable).extend({
     hasItem (item: object) {
       return this.parsedItems.indexOf(this.getValue(item)) > -1
     },
-    needsTile (slot: VNode[] | undefined) {
-      return slot!.length !== 1 ||
-        slot![0].componentOptions == null ||
-        slot![0].componentOptions.Ctor.name !== 'v-list-item'
+    needsTile (slot: VNode[] | undefined): boolean {
+      const [vnode] = slot ?? []
+
+      if (!slot?.length || slot.length !== 1) return true
+
+      const { type } = vnode ?? {}
+
+      const isComponent = type && typeof type === 'object'
+
+      const isVListItem = isComponent && 'name' in type && type.name === 'v-list-item'
+
+      return !isVListItem
     },
     getDisabled (item: object) {
       return Boolean(getPropertyFromItem(item, this.itemDisabled, false))
@@ -226,13 +251,14 @@ export default mixins(Colorable, Themeable).extend({
       else children.push(this.genTile({ item, index }))
     }
 
-    children.length || children.push(this.$slots['no-data'] || this.staticNoDataTile)
+    children.length || children.push(this.$slots['no-data']?.() || this.staticNoDataTile)
 
-    this.$slots['prepend-item'] && children.unshift(this.$slots['prepend-item'])
+    this.$slots['prepend-item'] && children.unshift(this.$slots['prepend-item']())
 
-    this.$slots['append-item'] && children.push(this.$slots['append-item'])
+    this.$slots['append-item'] && children.push(this.$slots['append-item']())
 
     return h(VList, {
+      ...this.$attrs,
       class: ['v-select-list', this.themeClasses],
       role: 'listbox',
       tabindex: -1,