@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -11,7 +11,7 @@ import VChip from '../VChip'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VChip.ts', () => {
@@ -22,20 +22,20 @@ describe('VChip.ts', () => {
       return mount(VChip, {
         global: {
           config: {
-            warnHandler: () => {}, // Подавляем предупреждения Vue
+            warnHandler: () => {} // Подавляем предупреждения Vue
           },
           mocks: {
             $vuetify: {
               lang: {
-                t: (val: string) => val,
+                t: (val: string) => val
               },
               icons: {
-                component: 'mdi',
-              },
-            },
-          },
+                component: 'mdi'
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -49,9 +49,22 @@ describe('VChip.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
+  it('should show filter icon when filter and modelValue are true (Vue 3 VIcon/transition slots)', async () => {
+    const wrapper = mountFunction({
+      props: {
+        filter: true,
+        modelValue: true
+      }
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('.v-chip__filter').exists()).toBe(true)
+  })
+
   it('should be removable', async () => {
     const wrapper = mountFunction({
-      props: { close: true },
+      props: { close: true }
     })
 
     const close = wrapper.find('.v-chip__close')
@@ -68,8 +81,8 @@ describe('VChip.ts', () => {
     const wrapper = mountFunction({
       props: {
         color: 'blue',
-        textColor: 'green',
-      },
+        textColor: 'green'
+      }
     })
 
     expect(wrapper.element.classList).toContain('blue')
@@ -79,14 +92,14 @@ describe('VChip.ts', () => {
   it('should render a disabled chip', async () => {
     const wrapper = mountFunction({
       props: {
-        disabled: true,
-      },
+        disabled: true
+      }
     })
 
     expect(wrapper.element.classList).toContain('v-chip--disabled')
 
     wrapper.setProps({
-      close: true,
+      close: true
     })
     await wrapper.vm.$nextTick()
     expect(wrapper.findAll('.v-chip__close')).toHaveLength(1)
@@ -96,8 +109,8 @@ describe('VChip.ts', () => {
     const wrapper = mountFunction({
       props: {
         outlined: true,
-        color: 'blue',
-      },
+        color: 'blue'
+      }
     })
 
     expect(wrapper.element.classList).toContain('blue')
@@ -109,8 +122,8 @@ describe('VChip.ts', () => {
       props: {
         outlined: true,
         color: 'blue',
-        textColor: 'green',
-      },
+        textColor: 'green'
+      }
     })
 
     expect(wrapper.element.classList).toContain('blue')
@@ -121,8 +134,8 @@ describe('VChip.ts', () => {
     const wrapper = mountFunction({
       props: {
         filter: true,
-        modelValue: true, // ToggleableFactory использует modelValue для isActive
-      },
+        modelValue: true // ToggleableFactory использует modelValue для isActive
+      }
     })
 
     expect(wrapper.findAll('.v-chip__filter')).toHaveLength(1)
@@ -134,9 +147,9 @@ describe('VChip.ts', () => {
     const wrapper = mountFunction({
       global: {
         provide: {
-          chipGroup: { register, unregister },
-        },
-      },
+          chipGroup: { register, unregister }
+        }
+      }
     })
 
     // Проверяем, что toggle вызывается при клике
@@ -147,7 +160,7 @@ describe('VChip.ts', () => {
 
   it('should conditionally show based on active prop', async () => {
     const wrapper = mountFunction({
-      props: { close: true },
+      props: { close: true }
     })
     const close = wrapper.find('.v-chip__close')
 

package/src/components/VChipGroup/VChipGroup.ts

@@ -19,12 +19,12 @@ export default mixins(
 
   provide () {
     return {
-      chipGroup: this,
+      chipGroup: this
     }
   },
 
   props: {
-    column: Boolean,
+    column: Boolean
   },
 
   computed: {
@@ -32,9 +32,9 @@ export default mixins(
       return {
         ...BaseSlideGroup.computed.classes.call(this),
         'v-chip-group': true,
-        'v-chip-group--column': this.column,
+        'v-chip-group--column': this.column
       }
-    },
+    }
   },
 
   watch: {
@@ -42,14 +42,14 @@ export default mixins(
       if (val) this.scrollOffset = 0
 
       this.$nextTick(this.onResize)
-    },
+    }
   },
 
   methods: {
     genData () {
       return this.setTextColor(this.color, {
-        ...BaseSlideGroup.methods.genData.call(this),
+        ...BaseSlideGroup.methods.genData.call(this)
       })
-    },
-  },
+    }
+  }
 })

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

@@ -8,7 +8,7 @@ import VChipGroup from '../VChipGroup'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VChipGroup.ts', () => {
@@ -22,11 +22,11 @@ describe('VChipGroup.ts', () => {
         global: {
           mocks: {
             $vuetify: {
-              breakpoint: {},
-            },
-          },
+              breakpoint: {}
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -41,8 +41,8 @@ describe('VChipGroup.ts', () => {
   it('should render column', () => {
     const wrapper = mountFunction({
       props: {
-        column: true,
-      },
+        column: true
+      }
     })
 
     expect(wrapper.classes()).toContain('v-chip-group--column')
@@ -56,7 +56,7 @@ describe('VChipGroup.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({
-      column: true,
+      column: true
     })
 
     expect(wrapper.classes()).toContain('v-chip-group--column')

package/src/components/VColorPicker/VColorPicker.ts

@@ -30,12 +30,12 @@ export default defineComponent({
   props: {
     canvasHeight: {
       type: [String, Number],
-      default: 150,
+      default: 150
     },
     disabled: Boolean,
     dotSize: {
       type: [Number, String],
-      default: 10,
+      default: 10
     },
     flat: Boolean,
     hideCanvas: Boolean,
@@ -45,28 +45,28 @@ export default defineComponent({
     mode: {
       type: String,
       default: 'rgba',
-      validator: (v: string) => Object.keys(modes).includes(v),
+      validator: (v: string) => Object.keys(modes).includes(v)
     },
     showSwatches: Boolean,
     swatches: Array as PropType<string[][]>,
     swatchesMaxHeight: {
       type: [Number, String],
-      default: 150,
+      default: 150
     },
     modelValue: {
-      type: [Object, String],
+      type: [Object, String]
     },
     width: {
       type: [Number, String],
-      default: 300,
-    },
+      default: 300
+    }
   },
 
   emits: ['update:modelValue', 'update:color', 'update:mode'],
 
   data () {
     return {
-      internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),
+      internalValue: fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
     }
   },
 
@@ -74,13 +74,22 @@ export default defineComponent({
     hideAlpha (): boolean {
       if (!this.modelValue) return false
       return !hasAlpha(this.modelValue)
-    },
+    }
+  },
+
+  watch: {
+    modelValue: {
+      handler (color: any) {
+        this.updateColor(parseColor(color, this.internalValue))
+      },
+      immediate: true
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -89,15 +98,6 @@ export default defineComponent({
     })
   },
 
-  watch: {
-    modelValue: {
-      handler (color: any) {
-        this.updateColor(parseColor(color, this.internalValue))
-      },
-      immediate: true,
-    },
-  },
-
   methods: {
     updateColor (color: VColorPickerColor) {
       this.internalValue = color
@@ -122,10 +122,10 @@ export default defineComponent({
 
     genControls (): VNode {
       return h('div', {
-        class: 'v-color-picker__controls',
+        class: 'v-color-picker__controls'
       }, [
         !this.hideSliders && this.genPreview(),
-        !this.hideInputs && this.genEdit(),
+        !this.hideInputs && this.genEdit()
       ])
     },
 
@@ -137,7 +137,7 @@ export default defineComponent({
         hideModeSwitch: this.hideModeSwitch,
         mode: this.mode,
         'onUpdate:color': this.updateColor,
-        'onUpdate:mode': (v: string) => this.$emit('update:mode', v),
+        'onUpdate:mode': (v: string) => this.$emit('update:mode', v)
       })
     },
 
@@ -146,7 +146,7 @@ export default defineComponent({
         color: this.internalValue,
         disabled: this.disabled,
         hideAlpha: this.hideAlpha,
-        'onUpdate:color': this.updateColor,
+        'onUpdate:color': this.updateColor
       })
     },
 
@@ -156,9 +156,9 @@ export default defineComponent({
         swatches: this.swatches,
         color: this.internalValue,
         maxHeight: this.swatchesMaxHeight,
-        'onUpdate:color': this.updateColor,
+        'onUpdate:color': this.updateColor
       })
-    },
+    }
   },
 
   render (): VNode {
@@ -166,13 +166,13 @@ export default defineComponent({
       class: ['v-color-picker', {
         'v-color-picker--flat': this.flat,
         ...this.themeClasses,
-        ...this.elevationClasses,
+        ...this.elevationClasses
       }],
-      maxWidth: this.width,
-    }, [
+      maxWidth: this.width
+    }, () => [
       !this.hideCanvas && this.genCanvas(),
       (!this.hideSliders || !this.hideInputs) && this.genControls(),
-      this.showSwatches && this.genSwatches(),
+      this.showSwatches && this.genSwatches()
     ])
-  },
+  }
 })

package/src/components/VColorPicker/VColorPickerCanvas.ts

@@ -16,21 +16,21 @@ export default defineComponent({
   props: {
     color: {
       type: Object as PropType<VColorPickerColor>,
-      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 }),
+      default: () => fromRGBA({ r: 255, g: 0, b: 0, a: 1 })
     },
     disabled: Boolean,
     dotSize: {
       type: [Number, String],
-      default: 10,
+      default: 10
     },
     height: {
       type: [Number, String],
-      default: 150,
+      default: 150
     },
     width: {
       type: [Number, String],
-      default: 300,
-    },
+      default: 300
+    }
   },
 
   emits: ['update:color'],
@@ -41,8 +41,8 @@ export default defineComponent({
         width: 0,
         height: 0,
         left: 0,
-        top: 0,
-      } as ClientRect,
+        top: 0
+      } as ClientRect
     }
   },
 
@@ -52,15 +52,15 @@ export default defineComponent({
 
       return {
         x: this.color.hsva.s * parseInt(String(this.width), 10),
-        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10),
+        y: (1 - this.color.hsva.v) * parseInt(String(this.height), 10)
       }
-    },
+    }
   },
 
   watch: {
     'color.hue' () {
       this.updateCanvas()
-    },
+    }
   },
 
   mounted () {
@@ -97,7 +97,7 @@ export default defineComponent({
         h: this.color!.hue,
         s: clamp(x - left, 0, width) / width,
         v: 1 - clamp(y - top, 0, height) / height,
-        a: this.color!.alpha,
+        a: this.color!.alpha
       }))
     },
 
@@ -134,7 +134,7 @@ export default defineComponent({
       return h('canvas', {
         ref: 'canvas',
         width: this.width,
-        height: this.height,
+        height: this.height
       })
     },
 
@@ -145,15 +145,15 @@ export default defineComponent({
 
       return h('div', {
         class: ['v-color-picker__canvas-dot', {
-          'v-color-picker__canvas-dot--disabled': this.disabled,
+          'v-color-picker__canvas-dot--disabled': this.disabled
         }],
         style: {
           width: convertToUnit(this.dotSize),
           height: convertToUnit(this.dotSize),
-          transform: `translate(${x}, ${y})`,
-        },
+          transform: `translate(${x}, ${y})`
+        }
       })
-    },
+    }
   },
 
   render (): VNode {
@@ -161,13 +161,13 @@ export default defineComponent({
       class: 'v-color-picker__canvas',
       style: {
         width: convertToUnit(this.width),
-        height: convertToUnit(this.height),
+        height: convertToUnit(this.height)
       },
       onClick: this.handleClick,
-      onMousedown: this.handleMouseDown,
+      onMousedown: this.handleMouseDown
     }, [
       this.genCanvas(),
-      this.genDot(),
+      this.genDot()
     ])
-  },
+  }
 })

package/src/components/VColorPicker/VColorPickerEdit.ts

@@ -27,22 +27,22 @@ export const modes = {
       ['r', 255, 'int'],
       ['g', 255, 'int'],
       ['b', 255, 'int'],
-      ['a', 1, 'float'],
+      ['a', 1, 'float']
     ],
-    from: fromRGBA,
+    from: fromRGBA
   },
   hsla: {
     inputs: [
       ['h', 360, 'int'],
       ['s', 1, 'float'],
       ['l', 1, 'float'],
-      ['a', 1, 'float'],
+      ['a', 1, 'float']
     ],
-    from: fromHSLA,
+    from: fromHSLA
   },
   hexa: {
-    from: fromHexa,
-  },
+    from: fromHexa
+  }
 } as { [key: string]: Mode }
 
 export default defineComponent({
@@ -51,7 +51,7 @@ export default defineComponent({
   props: {
     color: {
       type: Object as PropType<VColorPickerColor>,
-      required: true,
+      required: true
     },
     disabled: Boolean,
     hideAlpha: Boolean,
@@ -59,28 +59,28 @@ export default defineComponent({
     mode: {
       type: String,
       default: 'rgba',
-      validator: (v: string) => Object.keys(modes).includes(v),
-    },
+      validator: (v: string) => Object.keys(modes).includes(v)
+    }
   },
 
   emits: ['update:color', 'update:mode'],
 
   data () {
     return {
-      internalMode: this.mode,
+      internalMode: this.mode
     }
   },
 
   computed: {
     currentMode (): Mode {
       return modes[this.internalMode]
-    },
+    }
   },
 
   watch: {
     mode (mode: string) {
       this.internalMode = mode
-    },
+    }
   },
 
   methods: {
@@ -106,15 +106,15 @@ export default defineComponent({
 
     genInput (target: string, attrs: any, value: any, onChange: any): VNode {
       return h('div', {
-        class: 'v-color-picker__input',
+        class: 'v-color-picker__input'
       }, [
         h('input', {
           key: target,
           ...attrs,
           value,
-          onChange,
+          onChange
         }),
-        h('span', target.toUpperCase()),
+        h('span', target.toUpperCase())
       ])
     },
 
@@ -126,7 +126,7 @@ export default defineComponent({
           'hex',
           {
             maxlength: this.hideAlpha ? 7 : 9,
-            disabled: this.disabled,
+            disabled: this.disabled
           },
           value,
           (e: Event) => {
@@ -145,7 +145,7 @@ export default defineComponent({
               min: 0,
               max,
               step: type === 'float' ? '0.01' : type === 'int' ? '1' : undefined,
-              disabled: this.disabled,
+              disabled: this.disabled
             },
             this.getValue(value[target], type),
             (e: Event) => {
@@ -167,19 +167,19 @@ export default defineComponent({
         small: true,
         icon: true,
         disabled: this.disabled,
-        onClick: this.changeMode,
+        onClick: this.changeMode
       }, {
-        default: () => [h(VIcon, {}, '$unfold')]
+        default: () => [h(VIcon, {}, () => '$unfold')]
       })
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
-      class: 'v-color-picker__edit',
+      class: 'v-color-picker__edit'
     }, [
       this.genInputs(),
-      !this.hideModeSwitch && this.genSwitch(),
+      !this.hideModeSwitch && this.genSwitch()
     ])
-  },
+  }
 })