@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/mixins/validatable/index.ts

@@ -5,23 +5,20 @@ import { inject as RegistrableInject } from '../registrable'
 
 // Utilities
 import { deepEqual } from '../../util/helpers'
-import { consoleError } from '../../util/console'
-import mixins from '../../util/mixins'
+import { consoleError, breaking } from '../../util/console'
+import { defineComponent, PropType } from 'vue'
 
 // Types
-import { PropValidator } from 'vue/types/options'
 import { InputMessage, InputValidationRules } from 'vuetify/types'
 
-const baseMixins = mixins(
-  Colorable,
-  RegistrableInject<'form', any>('form'),
-  Themeable,
-)
-
 /* @vue/component */
-export default baseMixins.extend({
+export default defineComponent({
   name: 'validatable',
 
+  extends: RegistrableInject<'form', any>('form'),
+
+  mixins: [Colorable, Themeable],
+
   props: {
     disabled: {
       type: Boolean,
@@ -33,26 +30,26 @@ export default baseMixins.extend({
       default: 1,
     },
     errorMessages: {
-      type: [String, Array],
+      type: [String, Array] as PropType<InputMessage | null>,
       default: () => [],
-    } as PropValidator<InputMessage | null>,
+    },
     messages: {
-      type: [String, Array],
+      type: [String, Array] as PropType<InputMessage | null>,
       default: () => [],
-    } as PropValidator<InputMessage | null>,
+    },
     readonly: {
       type: Boolean,
       default: null,
     },
     rules: {
-      type: Array,
+      type: Array as PropType<InputValidationRules>,
       default: () => [],
-    } as PropValidator<InputValidationRules>,
+    },
     success: Boolean,
     successMessages: {
-      type: [String, Array],
+      type: [String, Array] as PropType<InputMessage | null>,
       default: () => [],
-    } as PropValidator<InputMessage | null>,
+    },
     validateOnBlur: Boolean,
     modelValue: { required: false },
   },
@@ -65,7 +62,7 @@ export default baseMixins.extend({
       hasInput: false,
       isFocused: false,
       isResetting: false,
-      lazyValue: this.value,
+      lazyValue: this.modelValue ?? null,
       valid: false,
     }
   },
@@ -128,6 +125,7 @@ export default baseMixins.extend({
         this.lazyValue = val
 
         this.$emit('input', val)
+        this.$emit('update:modelValue', val)
       },
     },
     isDisabled (): boolean {
@@ -214,7 +212,7 @@ export default baseMixins.extend({
         this.$emit('update:error', val)
       }
     },
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },
@@ -224,10 +222,20 @@ 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)
+    })
+
     this.form && this.form.register(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.form && this.form.unregister(this)
   },
 

package/src/services/breakpoint/index.ts

@@ -1,3 +1,6 @@
+import { reactive } from 'vue'
+
+
 // Extensions
 import { Service } from '../service'
 
@@ -72,6 +75,8 @@ export class Breakpoint extends Service implements IBreakpoint {
     this.mobileBreakpoint = mobileBreakpoint
     this.scrollBarWidth = scrollBarWidth
     this.thresholds = thresholds
+
+    return reactive(this)
   }
 
   public init () {

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

@@ -1,4 +1,3 @@
-import Vue from 'vue/dist/vue.common.js'
 import {
   deepEqual,
   getNestedValue,
@@ -10,8 +9,10 @@ import {
   humanReadableFileSize,
   sortItems,
   createSimpleFunctional,
+  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()
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
 
-      expect(getSlotType(vm.$refs.foo, 'bar')).toBe('normal')
+      // В 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()
+      })
+
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
 
-      expect(getSlotType(vm.$refs.foo, 'bar', true)).toBe('v-slot')
+      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()
+      })
 
-      expect(getSlotType(vm.$refs.foo, 'bar', true)).toBe('scoped')
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      // В 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()
+      })
 
-      expect(getSlotType(vm.$refs.foo, 'bar')).toBe('scoped')
+      const wrapper = mount(TestComponent)
+      const fooRef = wrapper.findComponent({ ref: 'foo' })
+
+      expect(getSlotType(fooRef.vm, 'bar')).toBe('scoped')
     })
   })
 
@@ -379,3 +407,64 @@ describe('helpers', () => {
     expect(items).toStrictEqual([{ string: 'bar', number: 3 }, { string: 'baz', number: 2 }, { string: 'baz', number: 1 }, { string: 'foo', number: 1 }])
   })
 })
+
+describe('normalizeClasses', () => {
+  it('should return empty object for undefined input', () => {
+    expect(normalizeClasses(undefined)).toEqual({})
+  })
+
+  it('should return empty object for null input', () => {
+    expect(normalizeClasses(null as any)).toEqual({})
+  })
+
+  it('should normalize string classes', () => {
+    expect(normalizeClasses('class1 class2 class3')).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle string with extra spaces', () => {
+    expect(normalizeClasses('  class1   class2  ')).toEqual({
+      class1: true,
+      class2: true
+    })
+  })
+
+  it('should return object as is', () => {
+    const classes = { class1: true, class2: false }
+    expect(normalizeClasses(classes)).toBe(classes)
+  })
+
+  it('should normalize array of strings', () => {
+    expect(normalizeClasses(['class1', 'class2', 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should normalize array of objects', () => {
+    expect(normalizeClasses([{ class1: true }, { class2: false }])).toEqual({
+      class1: true,
+      class2: false
+    })
+  })
+
+  it('should normalize mixed array', () => {
+    expect(normalizeClasses(['class1', { class2: true }, 'class3'])).toEqual({
+      class1: true,
+      class2: true,
+      class3: true
+    })
+  })
+
+  it('should handle empty string', () => {
+    expect(normalizeClasses('')).toEqual({})
+  })
+
+  it('should handle string with only spaces', () => {
+    expect(normalizeClasses('   ')).toEqual({})
+  })
+})

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,9 +528,52 @@ 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]]
   }
 
   return obj
-}
+}
+
+/**
+ * Нормализует классы из различных форматов в объект
+ * @param classes - классы в виде строки, объекта или массива
+ * @returns объект с нормализованными классами
+ */
+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)) {
+    return classes
+  }
+
+  if (typeof classes === 'string') {
+    const trimmed = classes.trim()
+    if (!trimmed) return {}
+
+    return trimmed.split(/\s+/).reduce((acc, cls) => {
+      acc[cls] = true
+      return acc
+    }, {} as Record<string, any>)
+  }
+
+  if (Array.isArray(classes)) {
+    return classes.reduce((acc, cls) => {
+      if (typeof cls === 'string') {
+        const trimmed = cls.trim()
+        if (trimmed) {
+          trimmed.split(/\s+/).forEach(className => {
+            acc[className] = true
+          })
+        }
+      } else if (cls && typeof cls === 'object') {
+        Object.assign(acc, cls)
+      }
+      return acc
+    }, {} as Record<string, any>)
+  }
+
+  return {}
+}