@dimailn/vuetify 2.7.2-alpha27 → 2.7.2-alpha29

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'
@@ -72,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,
@@ -103,6 +104,7 @@ export default baseMixins.extend({
       type: [String, Array, Object],
       default: () => defaultMenuProps,
     },
+    minWidth: [String, Number],
     multiple: Boolean,
     openOnClear: Boolean,
     returnObject: Boolean,
@@ -172,8 +174,8 @@ export default baseMixins.extend({
             handler: () => this.isFocused && this.blur(),
             closeConditional: this.closeConditional,
             include: () => this.getOpenDependentElements(),
-          }
-        ]
+          },
+        ],
       ]
     },
     dynamicHeight () {
@@ -251,42 +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,
       }
     },
   },
 
-  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
-          }
-        }
-      }
-    })
-  },
-
   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))
@@ -308,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) {
@@ -436,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,
@@ -464,7 +483,7 @@ export default baseMixins.extend({
         iconChild.props = mergeData(iconChild.props || {}, {
           tabindex: hasListeners ? '-1' : undefined,
           'aria-hidden': 'true',
-          'aria-label': undefined
+          'aria-label': undefined,
         })
       }
 
@@ -505,9 +524,9 @@ export default baseMixins.extend({
       }
 
       return h('input', {
-        value: value,
+        value,
         type: 'hidden',
-        name: this.$attrs.name
+        name: this.$attrs.name,
       })
     },
     genInputSlot (): VNode {
@@ -518,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
@@ -536,8 +555,8 @@ export default baseMixins.extend({
         .filter(slotName => this.$slots[slotName])
         .map(slotName => [
           slotName,
-          this.$slots[slotName]
-          ]
+          this.$slots[slotName],
+        ]
         ))
       // Requires destructuring due to Vue
       // modifying the `on` property when passed
@@ -545,7 +564,7 @@ export default baseMixins.extend({
       return h(VSelectList, {
         ...this.listData,
         ...this.listAttrs,
-      }, {...slots, item: this.$slots.item})
+      }, { ...slots, item: this.$slots.item })
     },
     genMenu (): VNode {
       const props = this.$_menuProps as any
@@ -568,7 +587,7 @@ export default baseMixins.extend({
       return h(VMenu, {
         role: undefined,
         ...props,
-        onInput: (val: boolean) => {
+        'onUpdate:modelValue': (val: boolean) => {
           this.isMenuActive = val
           this.isFocused = val
         },
@@ -915,8 +934,6 @@ export default baseMixins.extend({
     setValue (value: any) {
       if (!this.valueComparator(value, this.internalValue)) {
         this.internalValue = value
-        this.$emit('update:modelValue', value)
-        // Note: change event is already emitted by VInput's internalValue setter
       }
     },
     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,7 +33,6 @@ type ListTile = { item: any, disabled?: null | boolean, value?: boolean, index:
 export default mixins(Colorable, Themeable).extend({
   name: 'v-select-list',
 
-
   props: {
     action: Boolean,
     dense: Boolean,
@@ -81,6 +81,18 @@ 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, {}, () => [
@@ -88,7 +100,7 @@ export default mixins(Colorable, Themeable).extend({
           color: this.color,
           modelValue: inputValue,
           ripple: false,
-          onInput: () => this.$emit('select', item),
+          'onUpdate:modelValue': () => this.$emit('select', item),
         }),
       ])
     },
@@ -160,7 +172,7 @@ export default mixins(Colorable, Themeable).extend({
             acc[key] = this.$attrs[key]
           }
           return acc
-        }, {} as Record<string, any>)
+        }, {} as Record<string, any>),
       }
 
       if (!this.$slots.item) {
@@ -173,15 +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,
-          ...tile.on,
+        active: value,
+        attrs: tile,
+        on: {
+          onMousedown,
+          onClick,
         },
-        on: tile.on,
       })
 
       return this.needsTile(scopedSlot)
@@ -198,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))