@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha41

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

@@ -3,15 +3,16 @@ import {
   getNestedValue,
   getPropertyFromItem,
   convertToUnit,
+  getSlot,
   getSlotType,
   arrayDiff,
   getObjectValueByPath,
   humanReadableFileSize,
   sortItems,
   createSimpleFunctional,
-  normalizeClasses,
+  normalizeClasses
 } from '../helpers'
-import { mount } from '@vue/test-utils'
+import { mount, enableAutoUnmount } from '@vue/test-utils'
 import { defineComponent, createApp, h } from 'vue'
 
 describe('createSimpleFunctional', () => {
@@ -23,7 +24,7 @@ describe('createSimpleFunctional', () => {
   it('should render with a user-defined tag', () => {
     const component = createSimpleFunctional('v-test', 'pre')
     const wrapper = mount(component, {
-      props: { tag: 'h1' },
+      props: { tag: 'h1' }
     })
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -137,12 +138,12 @@ describe('helpers', () => {
       a: 'foo',
       'b.a': 'foobar',
       b: {
-        a: 1,
+        a: 1
       },
       'c.d': undefined,
       c: {
-        d: 'bar',
-      },
+        d: 'bar'
+      }
     }
 
     expect(getObjectValueByPath(obj, 'a')).toEqual('foo')
@@ -155,14 +156,14 @@ describe('helpers', () => {
       a: {
         b: {
           c: 1,
-          d: 2,
+          d: 2
         },
         e: [
           { f: 'f' },
-          'e1',
-        ],
+          'e1'
+        ]
       },
-      g: null,
+      g: null
     }
 
     expect(getNestedValue(obj, ['a', 'b', 'c'])).toEqual(1)
@@ -191,13 +192,13 @@ describe('helpers', () => {
   it('should get property from items', () => {
     const obj = {
       a: {
-        b: 1,
+        b: 1
       },
       c: [2, 3, { d: 'd' }],
       'x.y': 'comp',
       x: {
-        y: 'nested',
-      },
+        y: 'nested'
+      }
     }
     expect(getPropertyFromItem(obj, 'a.b')).toEqual(1)
     expect(getPropertyFromItem(obj, 'c.0')).toEqual(2)
@@ -238,7 +239,7 @@ describe('helpers', () => {
 
       const TestComponent = defineComponent({
         components: { foo: FooComponent },
-        template: `<foo ref="foo"><template slot="bar">hello</template></foo>`,
+        template: `<foo ref="foo"><template slot="bar">hello</template></foo>`
       })
 
       const wrapper = mount(TestComponent)
@@ -255,7 +256,7 @@ describe('helpers', () => {
 
       const TestComponent = defineComponent({
         components: { foo: FooComponent },
-        template: `<foo ref="foo"><template slot="bar" slot-scope="data">hello</template></foo>`,
+        template: `<foo ref="foo"><template slot="bar" slot-scope="data">hello</template></foo>`
       })
 
       const wrapper = mount(TestComponent)
@@ -271,7 +272,7 @@ describe('helpers', () => {
 
       const TestComponent = defineComponent({
         components: { foo: FooComponent },
-        template: `<foo ref="foo"><template #bar>hello</template></foo>`,
+        template: `<foo ref="foo"><template #bar>hello</template></foo>`
       })
 
       const wrapper = mount(TestComponent)
@@ -287,7 +288,7 @@ describe('helpers', () => {
 
       const TestComponent = defineComponent({
         components: { foo: FooComponent },
-        template: `<foo ref="foo"><template #bar="data">hello</template></foo>`,
+        template: `<foo ref="foo"><template #bar="data">hello</template></foo>`
       })
 
       const wrapper = mount(TestComponent)
@@ -304,7 +305,7 @@ describe('helpers', () => {
 
       const TestComponent = defineComponent({
         components: { foo: FooComponent },
-        template: `<foo ref="foo"><template #bar>hello</template></foo>`,
+        template: `<foo ref="foo"><template #bar>hello</template></foo>`
       })
 
       const wrapper = mount(TestComponent)
@@ -468,3 +469,115 @@ describe('normalizeClasses', () => {
     expect(normalizeClasses('   ')).toEqual({})
   })
 })
+
+describe('getSlot', () => {
+  enableAutoUnmount(afterEach)
+
+  it('возвращает контент default-слота и рендерит его', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', { class: 'root' }, getSlot(this as any) as any)
+      }
+    })
+    const w = mount(Cmp, { slots: { default: () => 'hello' } })
+    expect(w.text()).toBe('hello')
+  })
+
+  it('возвращает undefined, если default-слота нет', () => {
+    const Cmp = defineComponent({
+      render () {
+        const v = getSlot(this as any)
+        return h('div', { 'data-empty': v === undefined ? '1' : '0' })
+      }
+    })
+    const w = mount(Cmp)
+    expect(w.attributes('data-empty')).toBe('1')
+  })
+
+  it('достаёт именованный слот по имени', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any, 'title') as any)
+      }
+    })
+    const w = mount(Cmp, { slots: { title: () => 'T' } })
+    expect(w.text()).toBe('T')
+  })
+
+  it('поддерживает kebab-имя для camelCase (mySlot → my-slot)', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any, 'mySlot') as any)
+      }
+    })
+    const w = mount(Cmp, { slots: { 'my-slot': () => 'kebab' } })
+    expect(w.text()).toBe('kebab')
+  })
+
+  it('предпочитает точное имя слота перед kebab-вариантом', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any, 'mySlot') as any)
+      }
+    })
+    const w = mount(Cmp, {
+      slots: {
+        mySlot: () => 'camel',
+        'my-slot': () => 'kebab'
+      }
+    })
+    expect(w.text()).toBe('camel')
+  })
+
+  it('передаёт в слот объект props', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any, 'default', { n: 7 }) as any)
+      }
+    })
+    const w = mount(Cmp, {
+      slots: {
+        default: (props: { n?: number }) => String(props?.n ?? '')
+      }
+    })
+    expect(w.text()).toBe('7')
+  })
+
+  it('передаёт в слот результат фабрики props', () => {
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any, 'default', () => ({ n: 2 })) as any)
+      }
+    })
+    const w = mount(Cmp, {
+      slots: {
+        default: (props: { n?: number }) => String(props?.n ?? '')
+      }
+    })
+    expect(w.text()).toBe('2')
+  })
+
+  it('вызывает default-слот с undefined, если data не передан', () => {
+    const spy = jest.fn(() => 'ok')
+    const Cmp = defineComponent({
+      render () {
+        return h('div', getSlot(this as any) as any)
+      }
+    })
+    mount(Cmp, { slots: { default: spy } })
+    expect(spy).toHaveBeenCalled()
+    expect(spy.mock.calls[0][0]).toBeUndefined()
+  })
+
+  /**
+   * Регрессия: старый код использовал vm.$slots.hasOwnProperty(name).
+   * У объекта без прототипа нет унаследованного hasOwnProperty — обращение ломалось.
+   * Реальный Vue 3 в dev отдаёт shallowReadonly(slots); доступ по ключу остаётся валидным.
+   */
+  it('читает слот по ключу, если у $slots нет hasOwnProperty (null-prototype)', () => {
+    const rawSlots = Object.create(null) as Record<string, any>
+    rawSlots.default = () => 'plain'
+    const vm = { $slots: rawSlots } as any
+    expect(getSlot(vm)).toBe('plain')
+  })
+})

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

@@ -60,7 +60,7 @@ describe('mergeClasses', () => {
     [cObject, cEmptyString, cObject],
     [cObject, cString, [cObject, cString]],
     [cObject, cArray, [cObject, ...cArray]],
-    [cObject, cObject, [cObject, cObject]],
+    [cObject, cObject, [cObject, cObject]]
   ])('should merge classes', verifyFactory(mergeClasses))
 })
 
@@ -82,7 +82,7 @@ describe('mergeStyles', () => {
     [cObject, cUndefined, cObject],
     [cObject, cEmptyString, cObject],
     [cObject, cString, [cObject, cObject]],
-    [cObject, cObject, [cObject, cObject]],
+    [cObject, cObject, [cObject, cObject]]
   ])('should merge styles', verifyFactory(mergeStyles))
 })
 
@@ -99,6 +99,6 @@ describe('mergeListeners', () => {
     [{ one: listener1 }, { one: listener2 }, { onOne: [listener1, listener2] }],
     [{ one: listener1 }, { one: [listener2] }, { onOne: [listener1, listener2] }],
     [{ one: [listener1, listener2] }, { one: [listener2] }, { onOne: [listener1, listener2, listener2] }],
-    [{ one: [listener1, listener2] }, { two: listener2 }, { onOne: [listener1, listener2], onTwo: listener2 }],
+    [{ one: [listener1, listener2] }, { two: listener2 }, { onOne: [listener1, listener2], onTwo: listener2 }]
   ])('should merge listeners', verifyFactory(mergeListeners))
 })

package/src/util/color/transformCIELAB.ts

@@ -21,7 +21,7 @@ export function fromXYZ (xyz: XYZ): LAB {
   return [
     116 * transformedY - 16,
     500 * (transform(xyz[0] / 0.95047) - transformedY),
-    200 * (transformedY - transform(xyz[2] / 1.08883)),
+    200 * (transformedY - transform(xyz[2] / 1.08883))
   ]
 }
 
@@ -31,6 +31,6 @@ export function toXYZ (lab: LAB): XYZ {
   return [
     transform(Ln + lab[1] / 500) * 0.95047,
     transform(Ln),
-    transform(Ln - lab[2] / 200) * 1.08883,
+    transform(Ln - lab[2] / 200) * 1.08883
   ]
 }

package/src/util/color/transformSRGB.ts

@@ -5,7 +5,7 @@ import { clamp } from '../../util/helpers'
 const srgbForwardMatrix = [
   [3.2406, -1.5372, -0.4986],
   [-0.9689, 1.8758, 0.0415],
-  [0.0557, -0.2040, 1.0570],
+  [0.0557, -0.2040, 1.0570]
 ]
 
 // Forward gamma adjust
@@ -19,7 +19,7 @@ const srgbForwardTransform = (C: number): number => (
 const srgbReverseMatrix = [
   [0.4124, 0.3576, 0.1805],
   [0.2126, 0.7152, 0.0722],
-  [0.0193, 0.1192, 0.9505],
+  [0.0193, 0.1192, 0.9505]
 ]
 
 // Reverse gamma adjust

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

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,5 +1,5 @@
 import { defineComponent, h, resolveComponent } from 'vue'
-import { VNode, VNodeDirective } from 'vue/types'
+import type { VNode, VNodeDirective } from '../types/vue-internal'
 import { VuetifyIcon } from 'vuetify/types/services/icons'
 import { DataTableCompareFunction, SelectItemKey, ItemGroup } from 'vuetify/types'
 
@@ -23,8 +23,8 @@ export function createSimpleFunctional (
     props: {
       tag: {
         type: String,
-        default: el,
-      },
+        default: el
+      }
     },
 
     render (): VNode {
@@ -33,7 +33,7 @@ export function createSimpleFunctional (
       data.class = (`${c} ${data.class || ''}`).trim()
 
       return h(getTagValue(this.tag), data, this.$slots.default?.())
-    },
+    }
   })
 }
 
@@ -43,7 +43,7 @@ export function directiveConfig (binding: BindingConfig, defaults = {}): VNodeDi
     ...defaults,
     ...binding.modifiers,
     value: binding.arg,
-    ...(binding.value || {}),
+    ...(binding.value || {})
   }
 }
 
@@ -67,7 +67,7 @@ try {
     const testListenerOpts = Object.defineProperty({}, 'passive', {
       get: () => {
         passiveSupported = true
-      },
+      }
     }) as EventListener & EventListenerOptions
 
     window.addEventListener('testListener', testListenerOpts, testListenerOpts)
@@ -222,7 +222,7 @@ export const keyCodes = Object.freeze({
   insert: 45,
   pageup: 33,
   pagedown: 34,
-  shift: 16,
+  shift: 16
 })
 
 /**
@@ -254,8 +254,8 @@ export function remapInternalIcon (vm: Vue, iconName: string): VuetifyIcon {
   return {
     component,
     props: {
-      icon: iconName,
-    },
+      icon: iconName
+    }
   }
 }
 
@@ -304,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)
@@ -380,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) {
@@ -424,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
 }
@@ -567,7 +571,7 @@ export function normalizeClasses (
   }
 
   if (Array.isArray(classes)) {
-    return classes.reduce((acc, cls) => {
+    return classes.reduce<Record<string, any>>((acc, cls) => {
       if (typeof cls === 'string') {
         const trimmed = cls.trim()
         if (trimmed) {
@@ -576,10 +580,10 @@ export function normalizeClasses (
           })
         }
       } else if (cls && typeof cls === 'object') {
-        Object.assign(acc, cls)
+        Object.assign(acc, cls as Record<string, any>)
       }
       return acc
-    }, {} as Record<string, any>)
+    }, {})
   }
 
   return {}