@dimailn/vuetify 2.7.2-alpha25 → 2.7.2-alpha27

package/src/components/VMenu/VMenu.ts

@@ -1,4 +1,4 @@
-import {h, Transition, vShow, withDirectives} from 'vue'
+import { h, Transition, vShow, withDirectives } from 'vue'
 // Styles
 import './VMenu.sass'
 
@@ -84,6 +84,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['keydown'],
+
   data () {
     return {
       calculatedTopAuto: 0,

package/src/components/VMessages/VMessages.ts

@@ -30,7 +30,7 @@ export default mixins(Colorable, Themeable).extend({
         class: 'v-messages__wrapper',
         name: 'message-transition',
         tag: 'div',
-      }, this.value.map(this.genMessage))
+      }, () => this.value.map(this.genMessage))
     },
     genMessage (message: string, key: number) {
       return h('div', {

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -50,11 +50,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-navigation-drawer',
 
-  directives: {
-    ClickOutside,
-    Resize,
-    Touch,
-  },
 
   provide (): object {
     return {
@@ -96,6 +91,8 @@ export default baseMixins.extend({
     modelValue: null as unknown as PropType<any>,
   },
 
+  emits: ['update:modelValue', 'transitionend', 'update:mini-variant'],
+
   data: () => ({
     isMouseover: false,
     touchArea: {

package/src/components/VOtpInput/VOtpInput.ts

@@ -31,9 +31,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-otp-input',
 
-  directives: {
-    ripple,
-  },
 
   inheritAttrs: false,
 
@@ -49,6 +46,8 @@ export default baseMixins.extend({
     plain: Boolean,
   },
 
+  emits: ['blur', 'focus', 'change', 'keydown', 'finish'],
+
   data: () => ({
     initialValue: null,
     isBooted: false,

package/src/components/VOverflowBtn/VOverflowBtn.ts

@@ -24,6 +24,8 @@ export default defineComponent({
     segmented: Boolean,
   },
 
+  emits: ['change'],
+
   computed: {
     classes (): object {
       return {
@@ -99,7 +101,7 @@ export default defineComponent({
             itemObj.callback(e)
           },
         },
-      }, [itemObj.text])
+      }, () => [itemObj.text])
     },
     updateValue (val: boolean) {
       if (val) {

package/src/components/VOverlay/VOverlay.ts

@@ -22,6 +22,8 @@ export default mixins(
 ).extend({
   name: 'v-overlay',
 
+  emits: ['update:modelValue'],
+
   props: {
     absolute: Boolean,
     color: {

package/src/components/VPagination/VPagination.ts

@@ -25,7 +25,6 @@ export default mixins(
 ).extend({
   name: 'v-pagination',
 
-  directives: { Resize },
 
   props: {
     circle: Boolean,
@@ -72,6 +71,8 @@ export default mixins(
     },
   },
 
+  emits: ['update:modelValue', 'next', 'previous'],
+
   data () {
     return {
       maxButtons: 0,
@@ -197,7 +198,7 @@ export default mixins(
             'aria-label': label,
             ...(disabled ? {} : { onClick: fn }),
           }),
-          [h(VIcon, { color: this.navigationTextColor }, [icon])]
+          [h(VIcon, { color: this.navigationTextColor }, () => [icon])]
         ),
       ])
     },

package/src/components/VPicker/VPicker.ts

@@ -1,4 +1,5 @@
-import {h, Transition} from 'vue'
+import { h, Transition, defineComponent } from 'vue'
+import type { VNode } from 'vue'
 import './VPicker.sass'
 import '../VCard/VCard.sass'
 
@@ -10,17 +11,14 @@ import Themeable from '../../mixins/themeable'
 // Helpers
 import { convertToUnit, getSlot } from '../../util/helpers'
 
-// Types
-import { VNode } from 'vue/types'
-import mixins from '../../util/mixins'
-
 /* @vue/component */
-export default mixins(
-  Colorable,
-  Elevatable,
-  Themeable
-).extend({
+export default defineComponent({
   name: 'v-picker',
+  mixins: [
+    Colorable,
+    Elevatable,
+    Themeable,
+  ],
 
   props: {
     flat: Boolean,
@@ -55,7 +53,7 @@ export default mixins(
     genBodyTransition () {
       return h(Transition, {
         name: this.transition,
-      }, getSlot(this))
+      }, () => getSlot(this))
     },
     genBody () {
       return h('div', {

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

@@ -4,13 +4,12 @@ import VPicker from '../VPicker'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
 
 describe('VPicker.ts', () => {
   type Instance = InstanceType<typeof VPicker>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -23,7 +22,7 @@ describe('VPicker.ts', () => {
   it('should render component without title and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
+        default: '<span>default</span>',
       },
     })
 
@@ -33,8 +32,8 @@ describe('VPicker.ts', () => {
   it('should render component with title and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
     })
 
@@ -44,8 +43,8 @@ describe('VPicker.ts', () => {
   it('should render flat component and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
       props: {
         flat: true,
@@ -58,8 +57,8 @@ describe('VPicker.ts', () => {
   it('should render component with elevation and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
       props: {
         elevation: 15,
@@ -71,12 +70,12 @@ describe('VPicker.ts', () => {
 
   it('should render dark component and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         dark: true,
       },
       slots: {
-        default: [compileToFunctions('<span>default</span>')],
-        title: [compileToFunctions('<span>title</span>')],
+        default: '<span>default</span>',
+        title: '<span>title</span>',
       },
     })
 
@@ -85,11 +84,11 @@ describe('VPicker.ts', () => {
 
   it('should render colored component', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'orange lighten-1',
       },
       slots: {
-        title: [compileToFunctions('<span>title</span>')],
+        title: '<span>title</span>',
       },
     })
 

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -20,7 +20,6 @@ export default defineComponent({
 
   extends: Colorable,
 
-  directives: { intersect },
 
   props: {
     button: Boolean,

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VProgressLinear.sass'
 
 // Components
@@ -34,7 +34,6 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-progress-linear',
 
-  directives: { intersect },
 
   props: {
     active: {
@@ -78,6 +77,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['update:modelValue', 'click'],
+
   data () {
     return {
       internalLazyValue: this.modelValue || this.value || 0,
@@ -94,7 +95,7 @@ export default baseMixins.extend({
     },
     __cachedBar (): VNode {
       return h(this.computedTransition, {}, {
-        default: () => [this.__cachedBarType]
+        default: () => [this.__cachedBarType],
       })
     },
     __cachedBarType (): VNode {
@@ -119,8 +120,8 @@ export default baseMixins.extend({
         class: ['v-progress-linear__indeterminate',
           {
             'v-progress-linear__indeterminate--active': this.active,
-          }
-        ]
+          },
+        ],
       }, [
         this.genProgressBar('long'),
         this.genProgressBar('short'),
@@ -206,14 +207,14 @@ export default baseMixins.extend({
       if (!slot) return null
 
       return h(
-        "div",
+        'div',
         {
-          class: "v-progress-linear__content"
+          class: 'v-progress-linear__content',
         },
         {
-          default: () => slot
+          default: () => slot,
         }
-      );
+      )
     },
     genListeners (): any {
       const listeners = this.$listeners
@@ -229,8 +230,8 @@ export default baseMixins.extend({
         class: ['v-progress-linear__indeterminate',
           {
             [name]: true,
-          }
-        ]
+          },
+        ],
       }))
     },
     onClick (e: MouseEvent) {
@@ -275,8 +276,8 @@ export default baseMixins.extend({
     ]), [
       [
         Intersect,
-        this.onObserve
-      ]
+        this.onObserve,
+      ],
     ])
   },
 })

package/src/components/VRadioGroup/VRadio.ts

@@ -42,6 +42,8 @@ export default baseMixins.extend({
 
   inheritAttrs: false,
 
+  emits: ['change', 'focus', 'blur'],
+
   props: {
     disabled: {
       type: Boolean,
@@ -139,7 +141,7 @@ export default baseMixins.extend({
         for: this.computedId,
         color: this.validationState,
         focused: this.hasState,
-      }, getSlot(this, 'label') || this.label)
+      }, () => getSlot(this, 'label') || this.label)
     },
     genRadio () {
       const { title, ...radioAttrs } = this.attrs$
@@ -149,7 +151,7 @@ export default baseMixins.extend({
       }, [
         h(VIcon, this.setTextColor(this.validationState, {
           dense: this.radioGroup && this.radioGroup.dense,
-        }), this.computedIcon),
+        }), () => this.computedIcon),
         this.genInput({
           name: this.computedName,
           value: this.value,

package/src/components/VSelect/VSelect.ts

@@ -63,10 +63,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-select',
 
-  directives: {
-    ClickOutside,
-  },
-
   props: {
     appendIcon: {
       type: String,
@@ -113,6 +109,8 @@ export default baseMixins.extend({
     smallChips: Boolean,
   },
 
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index'],
+
   data () {
     return {
       cachedItems: this.cacheItems ? this.items : [],
@@ -129,6 +127,7 @@ export default baseMixins.extend({
       selectedItems: [] as any[],
       keyboardLookupPrefix: '',
       keyboardLookupLastTime: 0,
+      detectedScopeId: null as string | null,
     }
   },
 
@@ -152,7 +151,7 @@ export default baseMixins.extend({
       return this.allItems
     },
     computedOwns (): string {
-      return `list-${this.$.uid}`
+      return `list-${this.$?.uid}`
     },
     computedCounterValue (): number {
       const value = this.multiple
@@ -190,13 +189,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 +204,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,
       })
     },
@@ -248,6 +256,22 @@ export default baseMixins.extend({
     },
   },
 
+  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
@@ -368,7 +392,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 +403,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
@@ -435,9 +459,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
         })
@@ -466,10 +491,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: value,
         type: 'hidden',
-        name: this.attrs$.name
+        name: this.$attrs.name
       })
     },
     genInputSlot (): VNode {
@@ -506,7 +544,8 @@ export default baseMixins.extend({
       // 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
@@ -535,7 +574,7 @@ export default baseMixins.extend({
         },
         onScroll: this.onScroll,
         ref: 'menu',
-      }, [this.genList()])
+      }, () => [this.genList()])
     },
     genSelections (): VNode {
       let length = this.selectedItems.length
@@ -877,6 +916,7 @@ export default baseMixins.extend({
       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

@@ -32,10 +32,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,
@@ -87,17 +83,17 @@ export default mixins(Colorable, Themeable).extend({
 
   methods: {
     genAction (item: object, inputValue: any): VNode {
-      return h(VListItemAction, [
+      return h(VListItemAction, {}, () => [
         h(VSimpleCheckbox, {
           color: this.color,
           modelValue: inputValue,
           ripple: false,
-          onInput: () => this.$emit('select', item)
+          onInput: () => this.$emit('select', item),
         }),
       ])
     },
     genDivider (props: { [key: string]: any }) {
-      return h(VDivider, { props })
+      return h(VDivider, props)
     },
     genFilteredText (text: string) {
       text = text || ''
@@ -109,7 +105,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)
@@ -157,7 +153,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) {
@@ -176,7 +179,7 @@ export default mixins(Colorable, Themeable).extend({
         attrs: {
           ...tile.attrs,
           ...tile.props,
-          ...tile.on
+          ...tile.on,
         },
         on: tile.on,
       })
@@ -186,8 +189,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)),
         ]),
       ])
@@ -234,6 +237,7 @@ export default mixins(Colorable, Themeable).extend({
     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,

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -107,10 +107,6 @@ export const BaseSlideGroup = mixins<options &
 ).extend({
   name: 'base-slide-group',
 
-  directives: {
-    Resize,
-    Touch,
-  },
 
   props: {
     activeClass: {
@@ -139,6 +135,8 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
+  emits: ['click:prev', 'click:next'],
+
   data: () => ({
     isOverflowing: false,
     resizeTimeout: 0,
@@ -323,9 +321,9 @@ export const BaseSlideGroup = mixins<options &
         !hasAffix
       ) return null
 
-      return h(VIcon, {
+      return h(VIcon, () => ({
         disabled: !hasAffix,
-      }, (this as any)[`${icon}Icon`])
+      }, (this as any)[`${icon}Icon`]))
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
@@ -342,7 +340,7 @@ export const BaseSlideGroup = mixins<options &
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, [this.genIcon(location)])
+      return h(VFadeTransition, () => [this.genIcon(location)])
     },
     genWrapper (): VNode {
       return withDirectives(h('div', {

package/src/components/VSlideGroup/VSlideItem.ts

@@ -11,4 +11,6 @@ export default mixins(
   /* @vue/component */
 ).extend({
   name: 'v-slide-item',
+
+  emits: ['change'],
 })