@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VColorPicker/VColorPickerPreview.ts

@@ -20,10 +20,10 @@ export default defineComponent({
   props: {
     color: {
       type: Object as PropType<VColorPickerColor>,
-      required: true,
+      required: true
     },
     disabled: Boolean,
-    hideAlpha: Boolean,
+    hideAlpha: Boolean
   },
 
   emits: ['update:color'],
@@ -42,13 +42,13 @@ export default defineComponent({
         style: {
           backgroundImage: this.disabled
             ? undefined
-            : `linear-gradient(to ${this.$vuetify?.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,
+            : `linear-gradient(to ${this.$vuetify?.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`
         },
         'onUpdate:modelValue': (val: number) => {
           if (this.color && this.color.alpha !== val) {
             this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val }))
           }
-        },
+        }
       })
     },
 
@@ -66,7 +66,7 @@ export default defineComponent({
           if (this.color && this.color.hue !== val) {
             this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val }))
           }
-        },
+        }
       })
     },
 
@@ -74,40 +74,40 @@ export default defineComponent({
       return h(VSlider, {
         class: 'v-color-picker__track',
         disabled: this.disabled,
-        ...options,
+        ...options
       })
     },
 
     genSliders (): VNode {
       return h('div', {
-        class: 'v-color-picker__sliders',
+        class: 'v-color-picker__sliders'
       }, [
         this.genHue(),
-        !this.hideAlpha && this.genAlpha(),
+        !this.hideAlpha && this.genAlpha()
       ])
     },
 
     genDot (): VNode {
       return h('div', {
-        class: 'v-color-picker__dot',
+        class: 'v-color-picker__dot'
       }, [
         h('div', {
           style: {
-            background: this.color ? RGBAtoCSS(this.color.rgba) : 'transparent',
-          },
-        }),
+            background: this.color ? RGBAtoCSS(this.color.rgba) : 'transparent'
+          }
+        })
       ])
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
       class: ['v-color-picker__preview', {
-        'v-color-picker__preview--hide-alpha': this.hideAlpha,
-      }],
+        'v-color-picker__preview--hide-alpha': this.hideAlpha
+      }]
     }, [
       this.genDot(),
-      this.genSliders(),
+      this.genSliders()
     ])
-  },
+  }
 })

package/src/components/VColorPicker/VColorPickerSwatches.ts

@@ -21,22 +21,24 @@ import type { VNode, PropType } from 'vue'
 function parseDefaultColors (colors: Record<string, Record<string, string>>) {
   return Object.keys(colors).map(key => {
     const color = colors[key]
-    return color.base ? [
-      color.base,
-      color.darken4,
-      color.darken3,
-      color.darken2,
-      color.darken1,
-      color.lighten1,
-      color.lighten2,
-      color.lighten3,
-      color.lighten4,
-      color.lighten5,
-    ] : [
-      color.black,
-      color.white,
-      color.transparent,
-    ]
+    return color.base
+      ? [
+          color.base,
+          color.darken4,
+          color.darken3,
+          color.darken2,
+          color.darken1,
+          color.lighten1,
+          color.lighten2,
+          color.lighten3,
+          color.lighten4,
+          color.lighten5
+        ]
+      : [
+          color.black,
+          color.white,
+          color.transparent
+        ]
   })
 }
 
@@ -51,15 +53,15 @@ export default defineComponent({
   props: {
     swatches: {
       type: Array as PropType<string[][]>,
-      default: () => parseDefaultColors(colors),
+      default: () => parseDefaultColors(colors)
     },
     disabled: Boolean,
     color: {
       type: Object as PropType<VColorPickerColor>,
-      required: true,
+      required: true
     },
     maxWidth: [Number, String],
-    maxHeight: [Number, String],
+    maxHeight: [Number, String]
   },
 
   emits: ['update:color'],
@@ -68,14 +70,14 @@ export default defineComponent({
     genColor (color: string): VNode {
       const content = h('div', {
         style: {
-          background: color,
-        },
+          background: color
+        }
       }, [
         deepEqual(this.color, parseColor(color, null)) && h(VIcon, {
           small: true,
           dark: contrastRatio(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
           light: contrastRatio(this.color.rgba, black) > 2 && this.color.alpha > 0.5
-        }, '$success'),
+        }, () => '$success')
       ])
 
       return h('div', {
@@ -84,7 +86,7 @@ export default defineComponent({
           if (!this.disabled) {
             this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color))
           }
-        },
+        }
       }, [content])
     },
 
@@ -93,10 +95,10 @@ export default defineComponent({
         const colors = swatch.map(this.genColor)
 
         return h('div', {
-          class: 'v-color-picker__swatch',
+          class: 'v-color-picker__swatch'
         }, colors)
       })
-    },
+    }
   },
 
   render (): VNode {
@@ -104,10 +106,10 @@ export default defineComponent({
       class: ['v-color-picker__swatches', this.themeClasses],
       style: {
         maxWidth: convertToUnit(this.maxWidth),
-        maxHeight: convertToUnit(this.maxHeight),
-      },
+        maxHeight: convertToUnit(this.maxHeight)
+      }
     }, [
-      h('div', this.genSwatches()),
+      h('div', this.genSwatches())
     ])
-  },
+  }
 })

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

@@ -2,7 +2,7 @@ import VColorPicker from '../VColorPicker'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { nextTick } from 'vue'
 
@@ -26,12 +26,12 @@ describe('VColorPicker.ts', () => {
             $vuetify: {
               rtl: false,
               icons: {
-                component: null,
-              },
-            },
+                component: null
+              }
+            }
           },
-          ...options.global,
-        },
+          ...options.global
+        }
       })
     }
   })
@@ -51,8 +51,8 @@ describe('VColorPicker.ts', () => {
   it('should change canvas height', () => {
     const wrapper = mountFunction({
       props: {
-        canvasHeight: 200,
-      },
+        canvasHeight: 200
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -62,8 +62,8 @@ describe('VColorPicker.ts', () => {
   it('should show swatches', () => {
     const wrapper = mountFunction({
       props: {
-        showSwatches: true,
-      },
+        showSwatches: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -73,8 +73,8 @@ describe('VColorPicker.ts', () => {
   it('should hide canvas', () => {
     const wrapper = mountFunction({
       props: {
-        hideCanvas: true,
-      },
+        hideCanvas: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -84,8 +84,8 @@ describe('VColorPicker.ts', () => {
   it('should hide sliders', () => {
     const wrapper = mountFunction({
       props: {
-        hideSliders: true,
-      },
+        hideSliders: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -95,8 +95,8 @@ describe('VColorPicker.ts', () => {
   it('should hide inputs', () => {
     const wrapper = mountFunction({
       props: {
-        hideInputs: true,
-      },
+        hideInputs: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -107,8 +107,8 @@ describe('VColorPicker.ts', () => {
     const wrapper = mountFunction({
       props: {
         hideInputs: true,
-        hideSliders: true,
-      },
+        hideSliders: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -121,11 +121,11 @@ describe('VColorPicker.ts', () => {
     const fn = jest.fn()
     const wrapper = mountFunction({
       props: {
-        modelValue: '#00FF00',
+        modelValue: '#00FF00'
       },
       attrs: {
-        'onUpdate:modelValue': fn,
-      },
+        'onUpdate:modelValue': fn
+      }
     })
 
     // В Vue 3 мы должны напрямую эмитировать событие
@@ -139,11 +139,11 @@ describe('VColorPicker.ts', () => {
     const fn = jest.fn()
     const wrapper = mountFunction({
       props: {
-        modelValue: { r: 0, g: 0, b: 255 },
+        modelValue: { r: 0, g: 0, b: 255 }
       },
       attrs: {
-        'onUpdate:modelValue': fn,
-      },
+        'onUpdate:modelValue': fn
+      }
     })
 
     // В Vue 3 мы должны напрямую эмитировать событие
@@ -156,8 +156,8 @@ describe('VColorPicker.ts', () => {
   it('should not show alpha controls if given hex value without alpha', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: '#00FF00',
-      },
+        modelValue: '#00FF00'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -169,8 +169,8 @@ describe('VColorPicker.ts', () => {
   it('should work correctly when initial value is null', () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: null,
-      },
+        modelValue: null
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -179,8 +179,8 @@ describe('VColorPicker.ts', () => {
   it('should render flat picker', () => {
     const wrapper = mountFunction({
       props: {
-        flat: true,
-      },
+        flat: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -189,8 +189,8 @@ describe('VColorPicker.ts', () => {
   it('should render picker with elevation', () => {
     const wrapper = mountFunction({
       props: {
-        elevation: 15,
-      },
+        elevation: 15
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VColorPicker/__tests__/VColorPickerCanvas.spec.ts

@@ -2,7 +2,7 @@ import VColorPickerCanvas from '../VColorPickerCanvas'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { fromRGBA } from '../util'
 
@@ -12,7 +12,7 @@ function createMouseEvent (x: number, y: number): MouseEvent {
   return {
     preventDefault: () => {},
     clientX: x,
-    clientY: y,
+    clientY: y
   } as any
 }
 
@@ -24,7 +24,7 @@ const rectMock: DOMRect = {
   right: 0,
   top: 0,
   x: 0,
-  y: 0,
+  y: 0
 }
 
 describe('VColorPickerCanvas.ts', () => {
@@ -42,11 +42,11 @@ describe('VColorPickerCanvas.ts', () => {
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
         width: 100,
-        height: 100,
+        height: 100
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
     wrapper.vm.$el.getBoundingClientRect = () => rectMock
 
@@ -61,11 +61,11 @@ describe('VColorPickerCanvas.ts', () => {
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
         width: 100,
-        height: 100,
+        height: 100
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
     wrapper.vm.$el.getBoundingClientRect = () => rectMock
     const addEventListener = jest.spyOn(window, 'addEventListener')
@@ -94,11 +94,11 @@ describe('VColorPickerCanvas.ts', () => {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
         width: 100,
         height: 100,
-        disabled: true,
+        disabled: true
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
     wrapper.vm.$el.getBoundingClientRect = () => rectMock
 

package/src/components/VColorPicker/__tests__/VColorPickerEdit.spec.ts

@@ -2,7 +2,7 @@ import VColorPickerEdit from '../VColorPickerEdit'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { fromRGBA } from '../util'
 import { nextTick } from 'vue'
@@ -21,12 +21,12 @@ describe('VColorPickerEdit.ts', () => {
             $vuetify: {
               rtl: false,
               icons: {
-                component: null,
-              },
-            },
+                component: null
+              }
+            }
           },
-          ...options.global,
-        },
+          ...options.global
+        }
       })
     }
   })
@@ -36,11 +36,11 @@ describe('VColorPickerEdit.ts', () => {
     const wrapper = mountFunction({
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
-        mode: 'hexa',
+        mode: 'hexa'
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
 
     const input = wrapper.find('input')
@@ -56,11 +56,11 @@ describe('VColorPickerEdit.ts', () => {
     const wrapper = mountFunction({
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
-        mode: 'rgba',
+        mode: 'rgba'
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
 
     // В Vue 3 мы должны напрямую эмитировать событие
@@ -76,11 +76,11 @@ describe('VColorPickerEdit.ts', () => {
     const wrapper = mountFunction({
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
-        mode: 'hsla',
+        mode: 'hsla'
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
 
     // В Vue 3 мы должны напрямую эмитировать событие
@@ -96,8 +96,8 @@ describe('VColorPickerEdit.ts', () => {
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
         mode: 'rgba',
-        disabled: true,
-      },
+        disabled: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -107,8 +107,8 @@ describe('VColorPickerEdit.ts', () => {
     const wrapper = mountFunction({
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
-        mode: 'hexa',
-      },
+        mode: 'hexa'
+      }
     })
 
     const changeMode = wrapper.find('.v-btn')
@@ -126,7 +126,7 @@ describe('VColorPickerEdit.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({
-      mode: 'hsla',
+      mode: 'hsla'
     })
     await nextTick()
     expect(wrapper.html()).toMatchSnapshot()
@@ -137,8 +137,8 @@ describe('VColorPickerEdit.ts', () => {
       props: {
         color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
         mode: 'rgba',
-        hideModeSwitch: true,
-      },
+        hideModeSwitch: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VColorPicker/__tests__/VColorPickerPreview.spec.ts

@@ -2,7 +2,7 @@ import VColorPickerPreview from '../VColorPickerPreview'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { fromRGBA } from '../util'
 import { nextTick } from 'vue'
@@ -19,12 +19,12 @@ describe('VColorPickerPreview.ts', () => {
         ...options,
         global: {
           config: {
-            warnHandler: () => {}, // Подавляем предупреждения Vue
+            warnHandler: () => {} // Подавляем предупреждения Vue
           },
           mocks: {
             $vuetify: {
-              rtl: false,
-            },
+              rtl: false
+            }
           },
           stubs: {
             VSlider: {
@@ -36,7 +36,7 @@ describe('VColorPickerPreview.ts', () => {
               props: ['modelValue', 'min', 'max', 'step', 'disabled'],
               emits: ['update:modelValue'],
               methods: {
-                handleKeydown(e: KeyboardEvent) {
+                handleKeydown (e: KeyboardEvent) {
                   e.preventDefault()
                   if (e.key === 'ArrowRight') {
                     const newValue = Number(this.modelValue) + 1
@@ -44,10 +44,10 @@ describe('VColorPickerPreview.ts', () => {
                   }
                 }
               }
-            },
+            }
           },
-          ...options.global,
-        },
+          ...options.global
+        }
       })
     }
   })
@@ -56,11 +56,11 @@ describe('VColorPickerPreview.ts', () => {
     const update = jest.fn()
     const wrapper = mountFunction({
       props: {
-        color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
+        color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 })
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
 
     // Тестируем напрямую методы компонента
@@ -81,11 +81,11 @@ describe('VColorPickerPreview.ts', () => {
     const update = jest.fn()
     const wrapper = mountFunction({
       props: {
-        color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 }),
+        color: fromRGBA({ r: 0, g: 0, b: 0, a: 0 })
       },
       attrs: {
-        'onUpdate:color': update,
-      },
+        'onUpdate:color': update
+      }
     })
 
     // Создаем новый цвет с измененным alpha
@@ -103,8 +103,8 @@ describe('VColorPickerPreview.ts', () => {
     const testColor = fromRGBA({ r: 255, g: 100, b: 50, a: 0.8 })
     const wrapper = mountFunction({
       props: {
-        color: testColor,
-      },
+        color: testColor
+      }
     })
 
     const dot = wrapper.find('.v-color-picker__dot')
@@ -123,8 +123,8 @@ describe('VColorPickerPreview.ts', () => {
     const testColor = fromRGBA({ r: 128, g: 64, b: 192, a: 1 })
     const wrapper = mountFunction({
       props: {
-        color: testColor,
-      },
+        color: testColor
+      }
     })
 
     const dot = wrapper.find('.v-color-picker__dot')
@@ -133,7 +133,7 @@ describe('VColorPickerPreview.ts', () => {
 
     // Проверяем что внутри есть один вложенный div
     const innerDivs = dot.findAll('div')
-    expect(innerDivs.length).toBe(1)
+    expect(innerDivs).toHaveLength(1)
 
     // Проверяем что внутренний div имеет стиль с фоном
     const innerDiv = innerDivs[0]

package/src/components/VColorPicker/util/__tests__/index.spec.ts

@@ -7,7 +7,7 @@ const red = {
   hsla: { h: 0, s: 1, l: 0.5, a: 1 },
   hsva: { h: 0, s: 1, v: 1, a: 1 },
   hue: 0,
-  rgba: { r: 255, g: 0, b: 0, a: 1 },
+  rgba: { r: 255, g: 0, b: 0, a: 1 }
 }
 
 describe('VColorPicker Utils', () => {
@@ -70,7 +70,7 @@ describe('VColorPicker Utils', () => {
       [red, { h: 0, s: 1, v: 1, a: 0.5 }, { h: 0, s: 1, v: 1, a: 1 }],
       [red, undefined, red],
       [red, 0, red],
-      [red, true, red],
+      [red, true, red]
     ]
 
     it.each(cases)('When given %p and %p, extractColor util should return %p',