@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

package/src/components/VCheckbox/__tests__/__snapshots__/VCheckbox.spec.ts.snap

@@ -1,12 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VCheckbox.ts should apply classes to root element 1`] = `
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-input--selection-controls v-input--checkbox shrink mr-2 mt-0 primary--text">
+  <div class="v-input__control">
+    <div class="v-input__slot">
+      <div class="v-input--selection-controls__input">
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-marked primary--text"
+           aria-hidden="true"
+        >
+        </i>
+        <input aria-checked="true"
+               id="input-134"
+               role="checkbox"
+               type="checkbox"
+               checked
+        >
+        <div class="v-input--selection-controls__ripple">
+        </div>
+      </div>
+    </div>
+    <div class="v-messages theme--light primary--text">
+      <div class="v-messages__wrapper">
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`VCheckbox.ts should be disabled 1`] = `
 <input aria-checked="false"
-       disabled="disabled"
-       id="input-101"
+       disabled
+       id="input-122"
        role="checkbox"
        type="checkbox"
-       value
 >
 `;
 
@@ -15,27 +41,22 @@ exports[`VCheckbox.ts should be render colored checkbox 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+           aria-hidden="true"
         >
-          $checkboxOff
         </i>
         <input aria-checked="false"
-               id="input-106"
+               id="input-128"
                role="checkbox"
                type="checkbox"
-               value
         >
         <div class="v-input--selection-controls__ripple">
         </div>
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -46,27 +67,22 @@ exports[`VCheckbox.ts should render themed component 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light mdi mdi-checkbox-blank-outline"
+           aria-hidden="true"
         >
-          $checkboxOff
         </i>
         <input aria-checked="false"
-               id="input-96"
+               id="input-116"
                role="checkbox"
                type="checkbox"
-               value
         >
         <div class="v-input--selection-controls__ripple">
         </div>
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -77,13 +93,12 @@ exports[`VCheckbox.ts should use custom icons 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -93,11 +108,8 @@ exports[`VCheckbox.ts should use custom icons 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -108,13 +120,12 @@ exports[`VCheckbox.ts should use custom icons 2`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -124,11 +135,8 @@ exports[`VCheckbox.ts should use custom icons 2`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -139,13 +147,12 @@ exports[`VCheckbox.ts should use custom icons 3`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
-        <i aria-hidden="true"
-           class="v-icon notranslate material-icons theme--light"
+        <i class="v-icon notranslate theme--light material-icons"
+           aria-hidden="true"
         >
-          fizzbuzz
         </i>
         <input aria-checked="mixed"
-               id="input-91"
+               id="input-110"
                role="checkbox"
                type="checkbox"
                value="fizz"
@@ -155,11 +162,8 @@ exports[`VCheckbox.ts should use custom icons 3`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

package/src/components/VChip/VChip.ts

@@ -1,9 +1,6 @@
-import {h, vShow, withDirectives} from 'vue'
+import { h, vShow, withDirectives, VNode } from 'vue'
 // Styles
 import './VChip.sass'
-
-// Types
-import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 // Components
@@ -20,7 +17,7 @@ import Sizeable from '../../mixins/sizeable'
 
 // Utilities
 import { breaking } from '../../util/console'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { PropValidator, PropType } from 'vue/types/options'
@@ -32,10 +29,12 @@ export default mixins(
   Routable,
   Themeable,
   GroupableFactory('chipGroup'),
-  ToggleableFactory('inputValue')
+  ToggleableFactory()
 ).extend({
   name: 'v-chip',
 
+  emits: ['update:modelValue', 'click:close', 'click', 'change'],
+
   props: {
     active: {
       type: Boolean,
@@ -45,6 +44,7 @@ export default mixins(
       type: String,
     } as any as PropValidator<string>,
     close: Boolean,
+    onClick: Function as PropType<(e: MouseEvent) => void>,
     closeIcon: {
       type: String,
       default: '$delete',
@@ -69,7 +69,7 @@ export default mixins(
       default: 'span',
     },
     textColor: String,
-    value: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>,
   },
 
   data: () => ({
@@ -77,9 +77,10 @@ export default mixins(
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass)
+    $activeClass () {
+      if (this.activeClass) {
         return this.activeClass
+      }
       if (!this.chipGroup) return ''
 
       return this.chipGroup.activeClass
@@ -117,8 +118,8 @@ export default mixins(
     const breakingProps = [
       ['outline', 'outlined'],
       ['selected', 'input-value'],
-      ['value', 'active'],
-      ['@input', '@active.sync'],
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
     ]
 
     /* istanbul ignore next */
@@ -131,7 +132,10 @@ export default mixins(
     click (e: MouseEvent): void {
       this.$emit('click', e)
 
-      this.chipGroup && this.toggle()
+      if (this.chipGroup) {
+        this.toggle()
+        this.$emit('update:modelValue', this.isActive)
+      }
     },
     genFilter (): VNode {
       const children = []
@@ -158,8 +162,8 @@ export default mixins(
           e.preventDefault()
 
           this.$emit('click:close')
-          this.$emit('update:active', false)
-        }
+          this.$emit('update:modelValue', false)
+        },
       }, this.closeIcon)
     },
     genContent (): VNode {
@@ -193,7 +197,7 @@ export default mixins(
     const color = this.textColor || (this.outlined && this.color)
 
     return withDirectives(
-      h(tag, this.setTextColor(color, data), children),
+      h(getTagValue(tag), this.setTextColor(color, data), children),
       directives
     )
   },

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

@@ -1,39 +1,37 @@
 // Libraries
-import Vue from 'vue'
+import { nextTick } from 'vue'
 
 // Plugins
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
 // Components
 import VChip from '../VChip'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VChip.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let router: Router
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => VueWrapper<any>
 
   beforeEach(() => {
-    router = new Router()
-    localVue = createLocalVue()
-    localVue.use(Router)
-
     mountFunction = (options = {}) => {
       return mount(VChip, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        localVue,
-        router,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
+        global: {
+          config: {
+            warnHandler: () => {}, // Подавляем предупреждения Vue
+          },
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (val: string) => val,
+              },
+              icons: {
+                component: 'mdi',
+              },
             },
           },
         },
@@ -42,6 +40,8 @@ describe('VChip.ts', () => {
     }
   })
 
+  enableAutoUnmount(afterEach)
+
   it('should have a v-chip class', () => {
     const wrapper = mountFunction()
 
@@ -49,25 +49,24 @@ describe('VChip.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should be removable', () => {
+  it('should be removable', async () => {
     const wrapper = mountFunction({
-      propsData: { close: true },
+      props: { close: true },
     })
 
     const close = wrapper.find('.v-chip__close')
 
-    const input = jest.fn(value => wrapper.setProps({ value }))
-    wrapper.vm.$on('click:close', input)
-
     expect(wrapper.html()).toMatchSnapshot()
 
-    close.trigger('click')
-    expect(input).toHaveBeenCalled()
+    await close.trigger('click')
+    expect(wrapper.emitted('click:close')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
   })
 
   it('should render a colored chip', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'blue',
         textColor: 'green',
       },
@@ -79,7 +78,7 @@ describe('VChip.ts', () => {
 
   it('should render a disabled chip', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -95,7 +94,7 @@ describe('VChip.ts', () => {
 
   it('should render a colored outline chip', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         outlined: true,
         color: 'blue',
       },
@@ -107,7 +106,7 @@ describe('VChip.ts', () => {
 
   it('should render a colored outline chip with text color', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         outlined: true,
         color: 'blue',
         textColor: 'green',
@@ -120,50 +119,51 @@ describe('VChip.ts', () => {
 
   it('should render a chip with filter', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         filter: true,
-        inputValue: true,
+        modelValue: true, // ToggleableFactory использует modelValue для isActive
       },
     })
 
     expect(wrapper.findAll('.v-chip__filter')).toHaveLength(1)
   })
 
-  it('should call toggle event when used in the group', () => {
+  it('should call toggle event when used in the group', async () => {
     const register = jest.fn()
     const unregister = jest.fn()
-    const toggle = jest.fn()
     const wrapper = mountFunction({
-      provide: {
-        chipGroup: { register, unregister },
+      global: {
+        provide: {
+          chipGroup: { register, unregister },
+        },
       },
-      methods: { toggle },
     })
 
-    wrapper.trigger('click')
-    expect(toggle).toHaveBeenCalled()
+    // Проверяем, что toggle вызывается при клике
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('click')).toBeTruthy()
   })
 
   it('should conditionally show based on active prop', async () => {
-    const active = jest.fn()
     const wrapper = mountFunction({
-      propsData: { close: true },
+      props: { close: true },
     })
     const close = wrapper.find('.v-chip__close')
 
-    wrapper.vm.$on('update:active', active)
-
-    expect(wrapper.isVisible()).toBe(true)
+    // Initially visible
+    expect(wrapper.element.style.display).not.toBe('none')
 
-    close.trigger('click')
+    await close.trigger('click')
 
-    expect(active).toHaveBeenCalledTimes(1)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
 
     // Simulate active.sync behavior
-    wrapper.setProps({ active: false })
-
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ active: false })
+    await nextTick()
 
-    expect(wrapper.isVisible()).toBe(false)
+    // Element should be hidden via v-show directive
+    expect(wrapper.element.style.display).toBe('none')
   })
 })

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

@@ -3,12 +3,12 @@
 exports[`VChip.ts should be removable 1`] = `
 <span class="v-chip v-chip--no-color v-chip--removable theme--light v-size--default">
   <span class="v-chip__content">
-    <button type="button"
+    <button class="v-icon--link v-icon--right v-icon notranslate theme--light v-chip__close"
+            aria-hidden="false"
+            type="button"
+            style="font-size: 18px; height: 18px; width: 18px;"
             aria-label="$vuetify.close"
-            class="v-icon notranslate v-chip__close v-icon--link v-icon--right material-icons theme--light"
-            style="font-size: 18px;"
     >
-      $delete
     </button>
   </span>
 </span>

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

@@ -1,36 +1,29 @@
 // Libraries
-import Vue from 'vue'
-
-// Plugins
-import Router from 'vue-router'
+import { h } from 'vue'
 
 // Components
 import VChipGroup from '../VChipGroup'
 
 // Utilities
 import {
-  createLocalVue,
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VChipGroup.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
-  let router: Router
-  let localVue: typeof Vue
+  let mountFunction: (options?: object) => VueWrapper<any>
 
-  beforeEach(() => {
-    router = new Router()
-    localVue = createLocalVue()
-    localVue.use(Router)
+  enableAutoUnmount(afterEach)
 
+  beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VChipGroup, {
-        localVue,
-        router,
-        mocks: {
-          $vuetify: {
-            breakpoint: {},
+        global: {
+          mocks: {
+            $vuetify: {
+              breakpoint: {},
+            },
           },
         },
         ...options,
@@ -47,7 +40,7 @@ describe('VChipGroup.ts', () => {
 
   it('should render column', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         column: true,
       },
     })
@@ -56,13 +49,13 @@ describe('VChipGroup.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should switch to column', () => {
+  it('should switch to column', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.classes()).not.toContain('v-chip-group--column')
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       column: true,
     })