@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/util/colorUtils.ts

@@ -55,7 +55,7 @@ export function colorToInt (color: Color): ColorInt {
 export function classToHex (
   color: string,
   colors: Record<string, Record<string, string>>,
-  currentTheme: Partial<VuetifyThemeVariant>,
+  currentTheme: Partial<VuetifyThemeVariant>
 ): string {
   const [colorName, colorModifier] = color
     .toString().trim().replace('-', '').split(' ', 2) as (string | undefined)[]
@@ -175,7 +175,7 @@ export function RGBAtoHex (rgba: RGBA): Hex {
     toHex(rgba.r),
     toHex(rgba.g),
     toHex(rgba.b),
-    toHex(Math.round(rgba.a * 255)),
+    toHex(Math.round(rgba.a * 255))
   ].join('')}`
 }
 
@@ -186,7 +186,7 @@ export function HexToRGBA (hex: Hex): RGBA {
     r: rgba[0],
     g: rgba[1],
     b: rgba[2],
-    a: Math.round((rgba[3] / 255) * 100) / 100,
+    a: Math.round((rgba[3] / 255) * 100) / 100
   }
 }
 
@@ -222,7 +222,7 @@ export function parseHex (hex: string): Hex {
 export function parseGradient (
   gradient: string,
   colors: Record<string, Record<string, string>>,
-  currentTheme: Partial<VuetifyThemeVariant>,
+  currentTheme: Partial<VuetifyThemeVariant>
 ) {
   return gradient.replace(/([a-z]+(\s[a-z]+-[1-5])?)(?=$|,)/gi, x => {
     return classToHex(x, colors, currentTheme) || x

package/src/util/colors.ts

@@ -12,7 +12,7 @@ const red = Object.freeze({
   accent1: '#ff8a80',
   accent2: '#ff5252',
   accent3: '#ff1744',
-  accent4: '#d50000',
+  accent4: '#d50000'
 })
 
 const pink = Object.freeze({
@@ -29,7 +29,7 @@ const pink = Object.freeze({
   accent1: '#ff80ab',
   accent2: '#ff4081',
   accent3: '#f50057',
-  accent4: '#c51162',
+  accent4: '#c51162'
 })
 
 const purple = Object.freeze({
@@ -46,7 +46,7 @@ const purple = Object.freeze({
   accent1: '#ea80fc',
   accent2: '#e040fb',
   accent3: '#d500f9',
-  accent4: '#aa00ff',
+  accent4: '#aa00ff'
 })
 
 const deepPurple = Object.freeze({
@@ -63,7 +63,7 @@ const deepPurple = Object.freeze({
   accent1: '#b388ff',
   accent2: '#7c4dff',
   accent3: '#651fff',
-  accent4: '#6200ea',
+  accent4: '#6200ea'
 })
 
 const indigo = Object.freeze({
@@ -80,7 +80,7 @@ const indigo = Object.freeze({
   accent1: '#8c9eff',
   accent2: '#536dfe',
   accent3: '#3d5afe',
-  accent4: '#304ffe',
+  accent4: '#304ffe'
 })
 
 const blue = Object.freeze({
@@ -97,7 +97,7 @@ const blue = Object.freeze({
   accent1: '#82b1ff',
   accent2: '#448aff',
   accent3: '#2979ff',
-  accent4: '#2962ff',
+  accent4: '#2962ff'
 })
 
 const lightBlue = Object.freeze({
@@ -114,7 +114,7 @@ const lightBlue = Object.freeze({
   accent1: '#80d8ff',
   accent2: '#40c4ff',
   accent3: '#00b0ff',
-  accent4: '#0091ea',
+  accent4: '#0091ea'
 })
 
 const cyan = Object.freeze({
@@ -131,7 +131,7 @@ const cyan = Object.freeze({
   accent1: '#84ffff',
   accent2: '#18ffff',
   accent3: '#00e5ff',
-  accent4: '#00b8d4',
+  accent4: '#00b8d4'
 })
 
 const teal = Object.freeze({
@@ -148,7 +148,7 @@ const teal = Object.freeze({
   accent1: '#a7ffeb',
   accent2: '#64ffda',
   accent3: '#1de9b6',
-  accent4: '#00bfa5',
+  accent4: '#00bfa5'
 })
 
 const green = Object.freeze({
@@ -165,7 +165,7 @@ const green = Object.freeze({
   accent1: '#b9f6ca',
   accent2: '#69f0ae',
   accent3: '#00e676',
-  accent4: '#00c853',
+  accent4: '#00c853'
 })
 
 const lightGreen = Object.freeze({
@@ -182,7 +182,7 @@ const lightGreen = Object.freeze({
   accent1: '#ccff90',
   accent2: '#b2ff59',
   accent3: '#76ff03',
-  accent4: '#64dd17',
+  accent4: '#64dd17'
 })
 
 const lime = Object.freeze({
@@ -199,7 +199,7 @@ const lime = Object.freeze({
   accent1: '#f4ff81',
   accent2: '#eeff41',
   accent3: '#c6ff00',
-  accent4: '#aeea00',
+  accent4: '#aeea00'
 })
 
 const yellow = Object.freeze({
@@ -216,7 +216,7 @@ const yellow = Object.freeze({
   accent1: '#ffff8d',
   accent2: '#ffff00',
   accent3: '#ffea00',
-  accent4: '#ffd600',
+  accent4: '#ffd600'
 })
 
 const amber = Object.freeze({
@@ -233,7 +233,7 @@ const amber = Object.freeze({
   accent1: '#ffe57f',
   accent2: '#ffd740',
   accent3: '#ffc400',
-  accent4: '#ffab00',
+  accent4: '#ffab00'
 })
 
 const orange = Object.freeze({
@@ -250,7 +250,7 @@ const orange = Object.freeze({
   accent1: '#ffd180',
   accent2: '#ffab40',
   accent3: '#ff9100',
-  accent4: '#ff6d00',
+  accent4: '#ff6d00'
 })
 
 const deepOrange = Object.freeze({
@@ -267,7 +267,7 @@ const deepOrange = Object.freeze({
   accent1: '#ff9e80',
   accent2: '#ff6e40',
   accent3: '#ff3d00',
-  accent4: '#dd2c00',
+  accent4: '#dd2c00'
 })
 
 const brown = Object.freeze({
@@ -280,7 +280,7 @@ const brown = Object.freeze({
   darken1: '#6d4c41',
   darken2: '#5d4037',
   darken3: '#4e342e',
-  darken4: '#3e2723',
+  darken4: '#3e2723'
 })
 
 const blueGrey = Object.freeze({
@@ -293,7 +293,7 @@ const blueGrey = Object.freeze({
   darken1: '#546e7a',
   darken2: '#455a64',
   darken3: '#37474f',
-  darken4: '#263238',
+  darken4: '#263238'
 })
 
 const grey = Object.freeze({
@@ -306,13 +306,13 @@ const grey = Object.freeze({
   darken1: '#757575',
   darken2: '#616161',
   darken3: '#424242',
-  darken4: '#212121',
+  darken4: '#212121'
 })
 
 const shades = Object.freeze({
   black: '#000000',
   white: '#ffffff',
-  transparent: 'transparent',
+  transparent: 'transparent'
 })
 
 export default Object.freeze({
@@ -335,5 +335,5 @@ export default Object.freeze({
   brown,
   blueGrey,
   grey,
-  shades,
+  shades
 })

package/src/util/console.ts

@@ -8,12 +8,11 @@ function createMessage (message: string, vm?: any, parent?: any): string | void
     vm = {
       _isVue: true,
       $parent: parent,
-      $options: vm,
+      $options: vm
     }
   }
 
   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/dedupeModelListeners.ts

@@ -1,4 +1,4 @@
-import { VNodeData } from 'vue'
+import type { VNodeData } from '../types/vue-internal'
 
 /**
  * Removes duplicate `@input` listeners when

package/src/util/helpers.ts

@@ -1,8 +1,15 @@
-import {defineComponent, h} from 'vue'
-import { VNode, VNodeDirective } from 'vue/types'
+import { defineComponent, h, resolveComponent } from 'vue'
+import type { VNode, VNodeDirective } from '../types/vue-internal'
 import { VuetifyIcon } from 'vuetify/types/services/icons'
 import { DataTableCompareFunction, SelectItemKey, ItemGroup } from 'vuetify/types'
 
+/** Резолвит пропс tag как компонент, если это строка с составным именем (например v-card или VCard) */
+export const getTagValue = (tag: string) => (
+  tag.includes('-') || /^[A-Z]/.test(tag)
+    ? resolveComponent(tag)
+    : tag
+)
+
 export function createSimpleFunctional (
   c: string,
   el = 'div',
@@ -16,8 +23,8 @@ export function createSimpleFunctional (
     props: {
       tag: {
         type: String,
-        default: el,
-      },
+        default: el
+      }
     },
 
     render (): VNode {
@@ -25,8 +32,8 @@ export function createSimpleFunctional (
 
       data.class = (`${c} ${data.class || ''}`).trim()
 
-      return h(this.tag, data, this.$slots.default?.())
-    },
+      return h(getTagValue(this.tag), data, this.$slots.default?.())
+    }
   })
 }
 
@@ -36,7 +43,7 @@ export function directiveConfig (binding: BindingConfig, defaults = {}): VNodeDi
     ...defaults,
     ...binding.modifiers,
     value: binding.arg,
-    ...(binding.value || {}),
+    ...(binding.value || {})
   }
 }
 
@@ -60,7 +67,7 @@ try {
     const testListenerOpts = Object.defineProperty({}, 'passive', {
       get: () => {
         passiveSupported = true
-      },
+      }
     }) as EventListener & EventListenerOptions
 
     window.addEventListener('testListener', testListenerOpts, testListenerOpts)
@@ -125,7 +132,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)
@@ -213,7 +222,7 @@ export const keyCodes = Object.freeze({
   insert: 45,
   pageup: 33,
   pagedown: 34,
-  shift: 16,
+  shift: 16
 })
 
 /**
@@ -245,8 +254,8 @@ export function remapInternalIcon (vm: Vue, iconName: string): VuetifyIcon {
   return {
     component,
     props: {
-      icon: iconName,
-    },
+      icon: iconName
+    }
   }
 }
 
@@ -295,7 +304,7 @@ export function groupItems<T extends any = any> (
       current = val
       groups.push({
         name: val ?? '',
-        items: [],
+        items: []
       })
     }
     groups[groups.length - 1].items.push(item)
@@ -371,20 +380,29 @@ export function searchItems<T extends any = any> (items: T[], search: string): T
   return items.filter((item: any) => Object.keys(item).some(key => defaultFilter(getObjectValueByPath(item, key), search, item)))
 }
 
+/** Только функции слотов для третьего аргумента h(Компонент) во Vue 3 (иначе warn «Non-function value…»). */
+export function pickSlotFunctions (slots: Record<string, any> | undefined): Record<string, (...args: any[]) => any> {
+  if (!slots) return {}
+  const out: Record<string, (...args: any[]) => any> = {}
+  for (const key of Object.keys(slots)) {
+    const fn = slots[key]
+    if (typeof fn === 'function') out[key] = fn
+  }
+  return out
+}
+
 /**
- * Returns:
- *  - 'normal' for old style slots - `<template slot="default">`
- *  - 'scoped' for old style scoped slots (`<template slot="default" slot-scope="data">`) or bound v-slot (`#default="data"`)
- *  - 'v-slot' for unbound v-slot (`#default`) - only if the third param is true, otherwise counts as scoped
+ * Возвращает тип слота:
+ * - `normal` — старый стиль `<template slot="default">`
+ * - `scoped` — старый scoped (`slot-scope`) или привязанный v-slot (`#default="data"`)
+ * - `v-slot` — непривязанный v-slot (`#default`), только при `split === true`, иначе считается scoped
  */
 export function getSlotType<T extends boolean = false> (vm: Vue, name: string, split?: T): (T extends true ? 'v-slot' : never) | 'normal' | 'scoped' | void {
-  return 'scoped'
-
-  if (vm.$slots.hasOwnProperty(name) && vm.$slots.hasOwnProperty(name) && (vm.$slots[name] as any).name) {
+  if (vm.$slots.hasOwnProperty(name) && (vm.$slots[name] as any).name) {
     return split ? 'v-slot' as any : 'scoped'
   }
   if (vm.$slots.hasOwnProperty(name)) return 'normal'
-  if (vm.$slots.hasOwnProperty(name)) return 'scoped'
+  if (vm.$slots.hasOwnProperty(kebabCase(name))) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -415,15 +433,10 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
   const kebabName = kebabCase(name)
-
-  if (vm.$slots.hasOwnProperty(name)) {
-    return vm.$slots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots.hasOwnProperty(kebabName)) {
-    return vm.$slots[kebabName]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
-    return vm.$slots[name]
-  } else if (vm.$slots.hasOwnProperty(kebabName) && (!data || optional)) {
-    return vm.$slots[kebabName]
+  // Vue 3: $slots может быть прокси; hasOwnProperty('default') часто ложен — слот есть, контент теряется
+  const slot = (vm.$slots as any)[name] ?? (vm.$slots as any)[kebabName]
+  if (slot != null) {
+    return slot(data instanceof Function ? data() : data)
   }
   return undefined
 }
@@ -526,9 +539,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<Record<string, any>>((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 as Record<string, any>)
+      }
+      return acc
+    }, {})
+  }
+
+  return {}
+}

package/src/util/legacyEventsMixin.ts

@@ -0,0 +1,34 @@
+// Legacy events mixin for Vue 3 migration
+// Provides $on, $off, and $emitLegacy methods to maintain compatibility with Vue 2 code
+
+export const legacyEventsMixin = {
+  methods: {
+    $emitLegacy (this: any, eventName: string, args?: any) {
+      if (!this.eventsLegacy || !this.eventsLegacy[eventName]) return
+
+      this.eventsLegacy[eventName].forEach((listener: Function) => listener(args))
+    },
+    $on (this: any, eventName: string, listener: Function) {
+      this.eventsLegacy ||= {}
+      this.eventsLegacy[eventName] ||= []
+      this.eventsLegacy[eventName].push(listener)
+      // console.warn("$on is not available")
+    },
+    $off (this: any, eventName: string, listener: Function) {
+      if (this.eventsLegacy && this.eventsLegacy[eventName]) {
+        this.eventsLegacy[eventName] = this.eventsLegacy[eventName].filter((_listener: Function) => _listener !== listener)
+      }
+      // console.warn('$off is not available')
+    }
+  },
+  computed: {
+    $listeners (this: any): Record<string, unknown> {
+      const names = Object.keys(this.$attrs).filter((name: string) => name.startsWith('on'))
+
+      return names.reduce((listeners: Record<string, unknown>, name: string) => {
+        listeners[name] = this.$attrs[name]
+        return listeners
+      }, {})
+    }
+  }
+}

package/src/util/make-directive-activatable.ts

@@ -1,42 +1,42 @@
-export default (directive) => {
+export default (directive: Record<string, any>) => {
   const activeMap = new WeakMap()
 
-  const {mounted, unmounted, updated} = directive
+  const { mounted, unmounted, updated } = directive
 
-  const wrappedMounted = (...args) => {
+  const wrappedMounted = (...args: any[]) => {
     const binding = args[1]
 
     activeMap.set(args[0], binding.value.isDirActive)
 
-    if(binding.value.isDirActive === false) return
+    if (binding.value.isDirActive === false) return
 
     mounted(...args)
   }
 
-  const wrappedUnmounted = (...args) => {
+  const wrappedUnmounted = (...args: any[]) => {
     const binding = args[1]
 
     activeMap.set(args[0], binding.value.isDirActive)
 
-    if(binding.value.isDirActive === false) return
+    if (binding.value.isDirActive === false) return
 
     unmounted(...args)
   }
 
-  const wrappedUpdated = (...args) => {
+  const wrappedUpdated = (...args: any[]) => {
     const isDirActive = activeMap.get(args[0])
 
-    if(isDirActive === undefined) return updated(...args)
+    if (isDirActive === undefined) return updated(...args)
 
     const binding = args[1]
 
-    if(!isDirActive && binding.value.isDirActive) {
+    if (!isDirActive && binding.value.isDirActive) {
       mounted(...args)
       activeMap.set(args[0], binding.value.isDirActive)
       return
     }
 
-    if(isDirActive && !binding.value.isDirActive) {
+    if (isDirActive && !binding.value.isDirActive) {
       unmounted(...args)
       activeMap.set(args[0], binding.value.isDirActive)
       return
@@ -50,6 +50,6 @@ export default (directive) => {
       mounted: wrappedMounted,
       unmounted: wrappedUnmounted,
       updated: wrappedUpdated
-    }).filter(([name, fn]) => directive[name])
+    }).filter(([name, fn]) => directive[name] && fn)
   )
-}
+}