@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VSelect/VSelect.ts

@@ -22,12 +22,13 @@ 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'
-import { VNode, VNodeDirective, PropType, VNodeData, withDirectives, h } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { withDirectives, h } from 'vue'
+import type { VNodeData } from '../../types/vue-internal'
 import { SelectItemKey } from 'vuetify/types'
 
 export const defaultMenuProps = {
@@ -35,7 +36,7 @@ export const defaultMenuProps = {
   closeOnContentClick: false,
   disableKeys: true,
   openOnClick: false,
-  maxHeight: 304,
+  maxHeight: 304
 }
 
 // Types
@@ -46,7 +47,7 @@ const baseMixins = mixins(
   Filterable
 )
 
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   $refs: {
     menu: InstanceType<typeof VMenu>
     content: HTMLElement
@@ -63,19 +64,19 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-select',
 
-  directives: {
-    ClickOutside,
-  },
+  $_emitChangeEvent: true,
+  $_modelEvent: 'update:modelValue',
 
   props: {
     appendIcon: {
       type: String,
-      default: '$dropdown',
+      default: '$dropdown'
     },
     attach: {
       type: null as unknown as PropType<string | boolean | Element | VNode>,
-      default: false,
+      default: false
     },
+    auto: Boolean,
     cacheItems: Boolean,
     chips: Boolean,
     clearable: Boolean,
@@ -85,34 +86,37 @@ export default baseMixins.extend({
     hideSelected: Boolean,
     items: {
       type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
+      default: () => []
+    } as unknown as PropType<any[]>,
     itemColor: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     itemDisabled: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'disabled',
+      default: 'disabled'
     },
     itemText: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'text',
+      default: 'text'
     },
     itemValue: {
       type: [String, Array, Function] as PropType<SelectItemKey>,
-      default: 'value',
+      default: 'value'
     },
     menuProps: {
       type: [String, Array, Object],
-      default: () => defaultMenuProps,
+      default: () => defaultMenuProps
     },
+    minWidth: [String, Number],
     multiple: Boolean,
     openOnClear: Boolean,
     returnObject: Boolean,
-    smallChips: Boolean,
+    smallChips: Boolean
   },
 
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index', 'click:clear'],
+
   data () {
     return {
       cachedItems: this.cacheItems ? this.items : [],
@@ -129,6 +133,7 @@ export default baseMixins.extend({
       selectedItems: [] as any[],
       keyboardLookupPrefix: '',
       keyboardLookupLastTime: 0,
+      detectedScopeId: null as string | null
     }
   },
 
@@ -144,7 +149,7 @@ export default baseMixins.extend({
         'v-select--chips': this.hasChips,
         'v-select--chips--small': this.smallChips,
         'v-select--is-menu-active': this.isMenuActive,
-        'v-select--is-multi': this.multiple,
+        'v-select--is-multi': this.multiple
       }
     },
     /* Used by other components to overwrite */
@@ -152,7 +157,7 @@ export default baseMixins.extend({
       return this.allItems
     },
     computedOwns (): string {
-      return `list-${this.$.uid}`
+      return `list-${this.$?.uid}`
     },
     computedCounterValue (): number {
       const value = this.multiple
@@ -165,14 +170,14 @@ export default baseMixins.extend({
 
       return value.length
     },
-    directives (): VNodeDirective[] | undefined {
+    directives (): any[] | undefined {
       return [
         [
           ClickOutside,
           {
             handler: () => this.isFocused && this.blur(),
             closeConditional: this.closeConditional,
-            include: () => this.getOpenDependentElements(),
+            include: () => this.getOpenDependentElements()
           }
         ]
       ]
@@ -190,13 +195,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,
@@ -208,16 +207,31 @@ export default baseMixins.extend({
         itemValue: this.itemValue,
         noDataText: this.$vuetify.lang.t(this.noDataText),
         selectedItems: this.selectedItems,
-        onSelect: this.selectItem,
+        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,  {
-        item: this.$slots.item,
+      return h(VSelectList, {
+        ...this.listData,
+        ...this.listAttrs
+      }, {
+        item: this.$slots.item
       })
     },
     virtualizedItems (): object[] {
@@ -243,26 +257,31 @@ export default baseMixins.extend({
         eager: this.eager,
         modelValue: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0, // convert to int
-        ...normalisedProps,
+        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))
@@ -280,8 +299,36 @@ export default baseMixins.extend({
         }
 
         this.setSelectedItems()
-      },
-    },
+      }
+    }
+  },
+
+  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: {
@@ -308,12 +355,13 @@ export default baseMixins.extend({
       this.$nextTick(() => this.$refs.input && this.$refs.input.focus())
 
       if (this.openOnClear) this.isMenuActive = true
+      this.$emit('click:clear')
     },
     closeConditional (e: Event) {
       if (!this.isMenuActive) return true
 
       return (
-        !this._isDestroyed &&
+        !this.$.isUnmounted &&
 
         // Click originates from outside the menu content
         // Multiple selects don't close when an item is clicked
@@ -368,7 +416,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
@@ -378,8 +426,8 @@ export default baseMixins.extend({
           this.selectedIndex = index
         },
         'onClick:close': () => this.onChipInput(item),
-        key: JSON.stringify(this.getValue(item)),
-      }, this.getText(item))
+        key: JSON.stringify(this.getValue(item))
+      }, () => this.getText(item))
     },
     genCommaSelection (item: object, index: number, last: boolean) {
       const color = index === this.selectedIndex && this.computedColor
@@ -390,9 +438,9 @@ export default baseMixins.extend({
 
       return h('div', this.setTextColor(color, {
         class: ['v-select__selection v-select__selection--comma', {
-          'v-select__selection--disabled': isDisabled,
+          'v-select__selection--disabled': isDisabled
         }],
-        key: JSON.stringify(this.getValue(item)),
+        key: JSON.stringify(this.getValue(item))
       }), `${this.getText(item)}${last ? '' : ', '}`)
     },
     genDefaultSlot (): (VNode | VNode[] | null)[] {
@@ -420,10 +468,10 @@ export default baseMixins.extend({
           this.suffix ? this.genAffix('suffix') : null,
           this.genClearIcon(),
           this.genIconSlot(),
-          this.genHiddenInput(),
+          this.genHiddenInput()
         ]), this.directives),
         this.genMenu(),
-        this.genProgress(),
+        this.genProgress()
       ]
     },
     genIcon (
@@ -435,9 +483,10 @@ 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
         })
@@ -457,7 +506,7 @@ export default baseMixins.extend({
         'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
         autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
         placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
-        onKeypress: this.onKeyPress,
+        onKeypress: this.onKeyPress
       })
 
       input.props = { ...input.props, value: null }
@@ -466,10 +515,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 {
@@ -494,18 +556,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 +592,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()])
+        ref: 'menu'
+      }, () => [this.genList()])
     },
     genSelections (): VNode {
       let length = this.selectedItems.length
@@ -559,7 +623,7 @@ export default baseMixins.extend({
       }
 
       return h('div', {
-        class: 'v-select__selections',
+        class: 'v-select__selections'
       }, children)
     },
     genSlotSelection (item: object, index: number): VNode[] | undefined {
@@ -568,12 +632,12 @@ export default baseMixins.extend({
         parent: this,
         item,
         index,
-        select: (e: Event) => {
+        onSelect: (e: Event) => {
           e.stopPropagation()
           this.selectedIndex = index
         },
         selected: index === this.selectedIndex,
-        disabled: !this.isInteractive,
+        disabled: !this.isInteractive
       })
     },
     getMenuIndex () {
@@ -666,7 +730,9 @@ export default baseMixins.extend({
 
       // If menu is active, allow default
       // listIndex change from menu
-      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
+      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(
+        keyCode as typeof keyCodes.up | typeof keyCodes.down | typeof keyCodes.home | typeof keyCodes.end | typeof keyCodes.enter
+      )) {
         this.$nextTick(() => {
           menu.changeListIndex(e)
           this.$emit('update:list-index', menu.listIndex)
@@ -676,8 +742,8 @@ export default baseMixins.extend({
       // If enter, space, open menu
       if ([
         keyCodes.enter,
-        keyCodes.space,
-      ].includes(keyCode)) this.activateMenu()
+        keyCodes.space
+      ].includes(keyCode as typeof keyCodes.enter | typeof keyCodes.space)) this.activateMenu()
 
       // If menu is not active, up/down/home/end can do
       // one of 2 things. If multiple, opens the
@@ -685,7 +751,9 @@ export default baseMixins.extend({
       // available options
       if (
         !this.isMenuActive &&
-        [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)
+        [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(
+          keyCode as typeof keyCodes.up | typeof keyCodes.down | typeof keyCodes.home | typeof keyCodes.end
+        )
       ) return this.onUpDown(e)
 
       // If escape deactivate the menu
@@ -875,7 +943,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) {
@@ -884,6 +951,6 @@ export default baseMixins.extend({
       const appendInner = this.$refs['append-inner']
 
       return appendInner && (appendInner === target || appendInner.contains(target))
-    },
-  },
+    }
+  }
 })