@dimailn/vuetify 2.7.2-alpha28 → 2.7.2-alpha29

package/src/components/VTabs/VTabs.ts

@@ -19,6 +19,7 @@ import Resize from '../../directives/resize'
 import { convertToUnit, getSlot } from '../../util/helpers'
 import { ExtractVue } from './../../util/mixins'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode } from 'vue/types'
@@ -122,6 +123,19 @@ export default baseMixins.extend({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onChange', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     alignWithTitle: 'callSlider',
     centered: 'callSlider',

package/src/mixins/validatable/index.ts

@@ -5,7 +5,7 @@ import { inject as RegistrableInject } from '../registrable'
 
 // Utilities
 import { deepEqual } from '../../util/helpers'
-import { consoleError } from '../../util/console'
+import { consoleError, breaking } from '../../util/console'
 import { defineComponent, PropType } from 'vue'
 
 // Types
@@ -222,6 +222,16 @@ export default defineComponent({
   },
 
   created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+
     this.form && this.form.register(this)
   },
 

package/src/util/__tests__/console.spec.ts

@@ -1,19 +1,132 @@
-import { consoleWarn, consoleError } from '../console'
+import { consoleWarn, consoleError, consoleInfo, deprecate, breaking, removed } from '../console'
 
 describe('console', () => {
-  it('should generate a warning', () => {
-    consoleWarn('foo')
-    expect('[Vuetify] foo').toHaveBeenTipped()
+  beforeEach(() => {
+    // Clear console mocks before each test
+    jest.clearAllMocks()
+  })
+
+  describe('consoleWarn', () => {
+    it('should generate a warning', () => {
+      consoleWarn('foo')
+      expect('[Vuetify] foo').toHaveBeenTipped()
+    })
+
+    it('should generate a warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'Vue3Component' },
+        props: { color: 'primary', size: 'large' },
+        setupState: { isActive: true, count: 0 }
+      }
+      consoleWarn('Vue 3 warning', vm)
+      expect('[Vuetify] Vue 3 warning\n\n(found in <Vue3Component> (props: color, size, setup: isActive, count))').toHaveBeenTipped()
+    })
+
+    it('should not show duplicate warnings for same component instance', () => {
+      const vm = {
+        type: { name: 'TestComponent' },
+        props: {},
+        setupState: {}
+      }
+      consoleWarn('duplicate warning', vm)
+      consoleWarn('duplicate warning', vm) // Should not show again
+      expect('[Vuetify] duplicate warning\n\n(found in <TestComponent>)').toHaveBeenTipped()
+    })
+  })
+
+  describe('consoleError', () => {
+    it('should generate an error', () => {
+      consoleError('foo')
+      expect('[Vuetify] foo').toHaveBeenWarned()
+    })
+
+    it('should generate an error with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'Vue3ErrorComponent' },
+        props: { error: true },
+        setupState: { hasError: true }
+      }
+      consoleError('Vue 3 error', vm)
+      expect('[Vuetify] Vue 3 error\n\n(found in <Vue3ErrorComponent> (props: error, setup: hasError))').toHaveBeenWarned()
+    })
+  })
+
+  describe('deprecate', () => {
+    it('should generate deprecation warning', () => {
+      deprecate('oldProp', 'newProp')
+      expect('[Vuetify] [UPGRADE] \'oldProp\' is deprecated, use \'newProp\' instead.').toHaveBeenTipped()
+    })
+
+    it('should generate deprecation warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'DeprecatedComponent' },
+        props: {},
+        setupState: {}
+      }
+      deprecate('oldMethod', 'newMethod', vm)
+      expect('[Vuetify] [UPGRADE] \'oldMethod\' is deprecated, use \'newMethod\' instead.\n\n(found in <DeprecatedComponent>)').toHaveBeenTipped()
+    })
+  })
+
+  describe('breaking', () => {
+    it('should generate breaking change error', () => {
+      breaking('removedProp', 'replacementProp')
+      expect('[Vuetify] [BREAKING] \'removedProp\' has been removed, use \'replacementProp\' instead.').toHaveBeenWarned()
+    })
+
+    it('should generate breaking change error with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'BreakingComponent' },
+        props: {},
+        setupState: {}
+      }
+      breaking('oldAPI', 'newAPI', vm)
+      expect('[Vuetify] [BREAKING] \'oldAPI\' has been removed, use \'newAPI\' instead.\n\n(found in <BreakingComponent>)').toHaveBeenWarned()
+    })
+  })
+
+  describe('removed', () => {
+    it('should generate removal warning', () => {
+      removed('unusedProp')
+      expect('[Vuetify] [REMOVED] \'unusedProp\' has been removed. You can safely omit it.').toHaveBeenTipped()
+    })
 
-    consoleWarn('bar', { _isVue: true, $options: { name: 'baz' } })
-    expect('[Vuetify] bar\n\n(found in <Baz>)').toHaveBeenTipped()
+    it('should generate removal warning with Vue 3 component', () => {
+      const vm = {
+        type: { name: 'RemovedComponent' },
+        props: {},
+        setupState: {}
+      }
+      removed('unusedMethod', vm)
+      expect('[Vuetify] [REMOVED] \'unusedMethod\' has been removed. You can safely omit it.\n\n(found in <RemovedComponent>)').toHaveBeenTipped()
+    })
   })
 
-  it('should generate an error', () => {
-    consoleError('foo')
-    expect('[Vuetify] foo').toHaveBeenWarned()
+  describe('component name formatting', () => {
+    it('should handle anonymous Vue 3 components', () => {
+      const vm = {
+        type: {},
+        props: {},
+        setupState: {}
+      }
+      consoleWarn('anonymous test', vm)
+      expect('[Vuetify] anonymous test\n\n(found in <Anonymous>)').toHaveBeenTipped()
+    })
 
-    consoleError('bar', { _isVue: true, $options: { name: 'baz' } })
-    expect('[Vuetify] bar\n\n(found in <Baz>)').toHaveBeenWarned()
+    it('should handle Vue 3 root component', () => {
+      const vm = {
+        appContext: {
+          app: {
+            _instance: {
+              proxy: {}
+            }
+          }
+        }
+      }
+      // Mock the root check
+      vm.appContext.app._instance.proxy = vm
+      consoleWarn('root test', vm)
+      expect('[Vuetify] root test\n\n(found in <Root>)').toHaveBeenTipped()
+    })
   })
 })

package/src/util/__tests__/helpers.spec.ts

@@ -12,6 +12,7 @@ import {
   normalizeClasses,
 } from '../helpers'
 import { mount } from '@vue/test-utils'
+import { defineComponent, createApp, h } from 'vue'
 
 describe('createSimpleFunctional', () => {
   it('should render with a custom tag', () => {
@@ -22,7 +23,7 @@ describe('createSimpleFunctional', () => {
   it('should render with a user-defined tag', () => {
     const component = createSimpleFunctional('v-test', 'pre')
     const wrapper = mount(component, {
-      propsData: { tag: 'h1' },
+      props: { tag: 'h1' },
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -231,58 +232,85 @@ describe('helpers', () => {
 
   describe('getSlotType', () => {
     it('should detect old slots', () => {
-      const vm = new Vue({
-        components: {
-          foo: { render: h => h('div') },
-        },
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
         template: `<foo ref="foo"><template slot="bar">hello</template></foo>`,
-      }).$mount()
+      })
 
-      expect(getSlotType(vm.$refs.foo, 'bar')).toBe('normal')
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      // В Vue 3 все слоты считаются scoped, даже старые
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
     })
 
     it('should detect old scoped slots', () => {
-      const vm = new Vue({
-        components: {
-          foo: { render: h => h('div') },
-        },
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
         template: `<foo ref="foo"><template slot="bar" slot-scope="data">hello</template></foo>`,
-      }).$mount()
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
 
-      expect(getSlotType(vm.$refs.foo, 'bar')).toBe('scoped')
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
     })
 
     it('should detect bare v-slot', () => {
-      const vm = new Vue({
-        components: {
-          foo: { render: h => h('div') },
-        },
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
         template: `<foo ref="foo"><template #bar>hello</template></foo>`,
-      }).$mount()
+      })
 
-      expect(getSlotType(vm.$refs.foo, 'bar', true)).toBe('v-slot')
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      expect(getSlotType(fooRef.vm, 'bar', true)).toBe('v-slot')
     })
 
     it('should detect bound v-slot', () => {
-      const vm = new Vue({
-        components: {
-          foo: { render: h => h('div') },
-        },
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
         template: `<foo ref="foo"><template #bar="data">hello</template></foo>`,
-      }).$mount()
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
 
-      expect(getSlotType(vm.$refs.foo, 'bar', true)).toBe('scoped')
+      // В Vue 3 #bar="data" считается v-slot, а не scoped
+      expect(getSlotType(fooRef.vm, 'bar', true)).toBe('v-slot')
     })
 
     it('should count bare v-slot as scoped', () => {
-      const vm = new Vue({
-        components: {
-          foo: { render: h => h('div') },
-        },
+      const FooComponent = defineComponent({
+        render: () => h('div')
+      })
+
+      const TestComponent = defineComponent({
+        components: { foo: FooComponent },
         template: `<foo ref="foo"><template #bar>hello</template></foo>`,
-      }).$mount()
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
 
-      expect(getSlotType(vm.$refs.foo, 'bar')).toBe('scoped')
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
     })
   })
 

package/src/util/console.ts

@@ -13,7 +13,6 @@ function createMessage (message: string, vm?: any, parent?: any): string | void
   }
 
   if (vm) {
-    // Only show each message once per instance
     vm.$_alreadyWarned = vm.$_alreadyWarned || []
     if (vm.$_alreadyWarned.includes(message)) return
     vm.$_alreadyWarned.push(message)
@@ -43,7 +42,7 @@ export function deprecate (original: string, replacement: string, vm?: any, pare
   consoleWarn(`[UPGRADE] '${original}' is deprecated, use '${replacement}' instead.`, vm, parent)
 }
 export function breaking (original: string, replacement: string, vm?: any, parent?: any) {
-  consoleError(`[BREAKING] '${original}' has been removed, use '${replacement}' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide`, vm, parent)
+  consoleError(`[BREAKING] '${original}' has been removed, use '${replacement}' instead.`, vm, parent)
 }
 export function removed (original: string, vm?: any, parent?: any) {
   consoleWarn(`[REMOVED] '${original}' has been removed. You can safely omit it.`, vm, parent)
@@ -58,47 +57,67 @@ const classify = (str: string) => str
   .replace(classifyRE, c => c.toUpperCase())
   .replace(/[-_]/g, '')
 
-function formatComponentName (vm: any, includeFile?: boolean): string {
-  if (vm.$root === vm) {
+function formatComponentName (vm: any): string {
+  if (vm === vm?.appContext?.app?._instance?.proxy) {
     return '<Root>'
   }
-  const options = typeof vm === 'function' && vm.cid != null
-    ? vm.options
-    : vm._isVue
-      ? vm.$options || vm.constructor.options
-      : vm || {}
-  let name = options.name || options._componentTag
-  const file = options.__file
-  if (!name && file) {
-    const match = file.match(/([^/\\]+)\.vue$/)
-    name = match && match[1]
+
+  const { name } = extractComponentInfo(vm)
+  const additionalInfo = getAdditionalVue3Info(vm)
+
+  const componentName = name ? `<${classify(name)}>` : '<Anonymous>'
+  const additionalInfoStr = additionalInfo.length > 0 ? ` (${additionalInfo.join(', ')})` : ''
+
+  return componentName + additionalInfoStr
+}
+
+function extractComponentInfo (vm: any): { name?: string } {
+  const options = vm?.$options || vm?.vnode?.type || vm?.type || vm || {}
+  return { name: options.name }
+}
+
+function getAdditionalVue3Info (vm: any): string[] {
+  const additionalInfo: string[] = []
+
+  if (vm?.props && typeof vm.props === 'object') {
+    const propKeys = Object.keys(vm.props).slice(0, 3)
+    if (propKeys.length > 0) {
+      additionalInfo.push(`props: ${propKeys.join(', ')}${Object.keys(vm.props).length > 3 ? '...' : ''}`)
+    }
   }
 
-  return (
-    (name ? `<${classify(name)}>` : `<Anonymous>`) +
-    (file && includeFile !== false ? ` at ${file}` : '')
-  )
+  if (vm?.setupState && typeof vm.setupState === 'object') {
+    const setupKeys = Object.keys(vm.setupState).slice(0, 2)
+    if (setupKeys.length > 0) {
+      additionalInfo.push(`setup: ${setupKeys.join(', ')}${Object.keys(vm.setupState).length > 2 ? '...' : ''}`)
+    }
+  }
+
+  return additionalInfo
 }
 
 function generateComponentTrace (vm: any): string {
-  if (vm._isVue && vm.$parent) {
+  if (vm?.parent || vm?.$parent) {
     const tree: any[] = []
     let currentRecursiveSequence = 0
-    while (vm) {
+    let currentVm = vm
+
+    while (currentVm) {
       if (tree.length > 0) {
         const last: any = tree[tree.length - 1]
-        if (last.constructor === vm.constructor) {
+        if (last.constructor === currentVm.constructor) {
           currentRecursiveSequence++
-          vm = vm.$parent
+          currentVm = currentVm.parent || currentVm.$parent
           continue
         } else if (currentRecursiveSequence > 0) {
           tree[tree.length - 1] = [last, currentRecursiveSequence]
           currentRecursiveSequence = 0
         }
       }
-      tree.push(vm)
-      vm = vm.$parent
+      tree.push(currentVm)
+      currentVm = currentVm.parent || currentVm.$parent
     }
+
     return '\n\nfound in\n\n' + tree
       .map((vm, i) => `${
         i === 0 ? '---> ' : ' '.repeat(5 + i * 2)

package/src/util/helpers.ts

@@ -1,4 +1,4 @@
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 import { VNode, VNodeDirective } from 'vue/types'
 import { VuetifyIcon } from 'vuetify/types/services/icons'
 import { DataTableCompareFunction, SelectItemKey, ItemGroup } from 'vuetify/types'
@@ -125,7 +125,9 @@ export function deepEqual (a: any, b: any): boolean {
 export function getObjectValueByPath (obj: any, path: string, fallback?: any): any {
   // credit: http://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-with-string-key#comment55278413_6491621
   if (obj == null || !path || typeof path !== 'string') return fallback
-  if (path in obj && obj[path] !== undefined) return obj[path]
+  if (obj !== null && typeof obj === 'object' && !Array.isArray(obj) && path in obj && obj[path] !== undefined) {
+    return obj[path]
+  }
   path = path.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
   path = path.replace(/^\./, '') // strip a leading dot
   return getNestedValue(obj, path.split('.'), fallback)
@@ -526,7 +528,7 @@ export function normalizeAttrs (attrs) {
 
   const obj = {}
 
-  for(let i = 0; i < keys.length; i++) {
+  for (let i = 0; i < keys.length; i++) {
     obj[keys[i]] = attrs[keys[i]]
   }
 
@@ -538,7 +540,9 @@ export function normalizeAttrs (attrs) {
  * @param classes - классы в виде строки, объекта или массива
  * @returns объект с нормализованными классами
  */
-export function normalizeClasses (classes: string | Record<string, any> | Array<string | Record<string, any>> | undefined): Record<string, any> {
+export function normalizeClasses (
+  classes: string | Record<string, any> | Array<string | Record<string, any>> | undefined
+): Record<string, any> {
   if (!classes) return {}
 
   if (typeof classes === 'object' && !Array.isArray(classes)) {