@dimailn/vuetify 2.7.2-alpha32 → 2.7.2-alpha34

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

@@ -4,27 +4,32 @@ import VSnackbar from '../VSnackbar'
 // Utilities
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VSnackbar.ts', () => {
   type Instance = InstanceType<typeof VSnackbar>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
-    mountFunction = (options = {} as MountOptions<Instance>) => {
+    mountFunction = (options = {} as MountingOptions<Instance>) => {
       return mount(VSnackbar, {
-        mocks: {
-          $vuetify: {
-            application: {
-              bar: 24,
-              bottom: 56,
-              footer: 48,
-              insetFooter: 32,
-              left: 256,
-              right: 256,
-              top: 64,
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                bar: 24,
+                bottom: 56,
+                footer: 48,
+                insetFooter: 32,
+                left: 256,
+                right: 256,
+                top: 64,
+              },
             },
           },
         },
@@ -38,8 +43,8 @@ describe('VSnackbar.ts', () => {
     [{ text: true }, false],
     [{ outlined: true }, false],
     [{ light: true }, false],
-  ])('should be dark when using %s', (propsData, expected: boolean) => {
-    const wrapper = mountFunction({ propsData })
+  ])('should be dark when using %s', (props, expected: boolean) => {
+    const wrapper = mountFunction({ props })
 
     expect(wrapper.vm.isDark).toBe(expected)
   })
@@ -50,7 +55,7 @@ describe('VSnackbar.ts', () => {
     [true, '256px', '256px'],
   ])('should have app padding on the x-axis using %s', (app, left, right) => {
     const wrapper = mountFunction({
-      propsData: { app },
+      props: { app },
     })
 
     expect(wrapper.vm.styles).toHaveProperty('paddingLeft', left)
@@ -63,7 +68,7 @@ describe('VSnackbar.ts', () => {
     [true, false],
   ])('should have app padding on the x-axis using %s', (absolute, expected: boolean) => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
         absolute,
       },
@@ -76,34 +81,35 @@ describe('VSnackbar.ts', () => {
     [undefined, false],
     [false, false],
     [true, true],
-  ])('should conditionally invoke setTimeout method using %s', (value, expected: boolean) => {
-    const setTimeout = jest.fn()
-
-    mountFunction({
-      propsData: { value },
-      methods: { setTimeout },
+  ])('should conditionally invoke setTimeout method using %s', (modelValue, expected: boolean) => {
+    const wrapper = mountFunction({
+      props: { modelValue },
     })
 
-    expect(setTimeout.mock.calls.length > 0).toBe(expected)
+    // Проверяем, что setTimeout вызывается через проверку activeTimeout
+    if (expected) {
+      expect(wrapper.vm.activeTimeout).toBeGreaterThanOrEqual(0)
+    } else {
+      expect(wrapper.vm.activeTimeout).toBe(-1)
+    }
   })
 
   it.each([
     [undefined, false],
     [false, true],
   ])('should conditionally render transition content using %s', (transition, expected: boolean) => {
-    const genContent = jest.fn()
-    const genTransition = jest.fn()
-
-    mountFunction({
-      propsData: { transition },
-      methods: {
-        genTransition,
-        genContent,
+    const wrapper = mountFunction({
+      props: {
+        transition,
+        modelValue: true, // Активируем компонент, чтобы увидеть transition
       },
     })
 
-    expect(genContent.mock.calls.length > 0).toBe(expected)
-    expect(genTransition.mock.calls.length > 0).toBe(!expected)
+    // Проверяем, что transition используется через проверку computed свойства
+    // Когда transition undefined, используется значение по умолчанию 'v-snack-transition'
+    // Когда transition false, transition не используется
+    const usesTransition = wrapper.vm.transition !== false
+    expect(usesTransition).toBe(!expected)
   })
 
   it.each([
@@ -116,9 +122,9 @@ describe('VSnackbar.ts', () => {
     const spy = jest.spyOn(window, 'setTimeout')
 
     mountFunction({
-      propsData: {
+      props: {
         timeout,
-        value: true,
+        modelValue: true,
       },
     })
 
@@ -130,5 +136,8 @@ describe('VSnackbar.ts', () => {
     if (timeout === 0) {
       expect(`[Vuetify] [UPGRADE] 'timeout="0"' is deprecated, use '-1' instead.`).toHaveBeenTipped()
     }
+
+    spy.mockRestore()
+    jest.useRealTimers()
   })
 })

package/src/components/VStepper/VStepper.ts

@@ -58,8 +58,8 @@ export default baseMixins.extend({
       isReverse: false,
     }
 
-    data.internalLazyValue = this.value != null
-      ? this.value
+    data.internalLazyValue = this.modelValue != null
+      ? this.modelValue
       : (data[0] || {}).step || 1
 
     return data

package/src/components/VStepper/VStepperContent.ts

@@ -150,21 +150,16 @@ export default baseMixins.extend({
     }
 
     if (!this.isVertical) {
-      contentData.directives = [{
-        name: 'show',
-        value: this.isActive,
-      }]
+      contentData.directives = [
+        [
+          vShow,
+          this.isActive,
+        ],
+      ]
     }
 
     const wrapper = h('div', wrapperData, getSlot(this))
-    const content = withDirectives(
-      h('div', contentData, [wrapper]), this.isVertical ? [] :
-      [
-        [
-          vShow,
-          this.isActive
-        ]
-      ])
+    const content = h('div', contentData, [wrapper])
 
     return h(this.computedTransition, {
       ...this.$listeners,

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

@@ -4,14 +4,14 @@ import VStepper from '../VStepper'
 // Utilities
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
   enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VStepper.ts', () => {
   type Instance = InstanceType<typeof VStepper>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   enableAutoUnmount(afterEach)
 

package/src/components/VStepper/__tests__/VStepperContent.spec.ts

@@ -54,12 +54,14 @@ describe('VStepperContent.ts', () => {
     expect(wrapper.vm.isActive).toBeNull()
     expect(wrapper.vm.height).toBe(0)
 
+    await wrapper.vm.$nextTick()
     await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.height).toBe('auto')
   })
 
-  it('should use reverse transition', () => {
+  it('should use reverse transition', async () => {
     const wrapper = mountFunction({
       props: { step: 1 },
       global: {
@@ -74,11 +76,12 @@ describe('VStepperContent.ts', () => {
     })
     expect(wrapper.vm.computedTransition).toBe(VTabTransition)
 
-    wrapper.setData({ isReverse: true })
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
   })
 
-  it('should use opposite of reverse transition in rtl', () => {
+  it('should use opposite of reverse transition in rtl', async () => {
     const wrapper = mountFunction({
       global: {
         mocks: {
@@ -98,7 +101,8 @@ describe('VStepperContent.ts', () => {
     })
     expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
 
-    wrapper.setData({ isReverse: true })
+    await wrapper.setData({ isReverse: true })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.computedTransition).toBe(VTabTransition)
   })
 
@@ -128,6 +132,7 @@ describe('VStepperContent.ts', () => {
       isActive: true,
       isVertical: true,
     })
+    await wrapper.vm.$nextTick()
 
     const stepWrapper = wrapper.find('.v-stepper__wrapper')
 
@@ -135,9 +140,11 @@ describe('VStepperContent.ts', () => {
 
     // should call leave() -- total so far: 1
     await wrapper.setData({ isActive: false })
+    await wrapper.vm.$nextTick()
 
     // should call enter() -- total so far: 1
     await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
 
     expect(enter).toHaveBeenCalled()
     expect(leave).toHaveBeenCalled()
@@ -149,13 +156,16 @@ describe('VStepperContent.ts', () => {
     await wrapper.setData({
       isVertical: false,
     })
+    await wrapper.vm.$nextTick()
     await wrapper.setData({ isActive: false })
+    await wrapper.vm.$nextTick()
     await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
     expect(enter.mock.calls).toHaveLength(1)
     expect(leave.mock.calls).toHaveLength(1)
   })
 
-  it('should toggle isActive state', () => {
+  it('should toggle isActive state', async () => {
     const wrapper = mountFunction({
       props: { step: 1 },
       global: {
@@ -170,16 +180,19 @@ describe('VStepperContent.ts', () => {
     })
 
     wrapper.vm.toggle(1, false)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.isReverse).toBe(false)
 
     wrapper.vm.toggle('1', false)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.isReverse).toBe(false)
 
     wrapper.vm.toggle(2, true)
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isReverse).toBe(true)
@@ -266,10 +279,12 @@ describe('VStepperContent.ts', () => {
     expect(wrapper.vm.onTransition()).toBeUndefined()
 
     await wrapper.setData({ isActive: true })
+    await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.height).toBe('auto')
 
     await wrapper.setData({ height: 0 })
+    await wrapper.vm.$nextTick()
 
     wrapper.vm.onTransition({ propertyName: 'foo' })
     expect(wrapper.vm.height).toBe(0)
@@ -287,6 +302,10 @@ describe('VStepperContent.ts', () => {
         },
       },
     })
-    // В Vue 3 нет автоматических предупреждений о контексте
+
+    expect(wrapper.vm).toBeDefined()
+
+    // Ожидаем предупреждение о том, что компонент должен использоваться внутри v-stepper
+    expect('[Vuetify] The v-stepper-content component must be used inside a v-stepper').toHaveBeenTipped()
   })
 })

package/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap

@@ -5,8 +5,8 @@ exports[`VStepperStep.ts should accept a custom color 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step pink">
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -22,8 +22,8 @@ exports[`VStepperStep.ts should accept a custom css color 1`] = `
   <span class="v-stepper__step__step"
         style="background-color: rgb(170, 187, 204); border-color: #aabbcc;"
   >
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -49,8 +49,8 @@ exports[`VStepperStep.ts should render complete step 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step primary">
-    <i aria-hidden="true"
-       class="v-icon notranslate mdi mdi-check theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-check"
+       aria-hidden="true"
     >
     </i>
   </span>
@@ -64,10 +64,9 @@ exports[`VStepperStep.ts should render editable step 1`] = `
      class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete"
 >
   <span class="v-stepper__step__step primary">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light material-icons"
+       aria-hidden="true"
     >
-      $edit
     </i>
   </span>
   <div class="v-stepper__label">
@@ -80,10 +79,9 @@ exports[`VStepperStep.ts should render step with error 1`] = `
      class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text"
 >
   <span class="v-stepper__step__step">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-alert"
+       aria-hidden="true"
     >
-      $error
     </i>
   </span>
   <div class="v-stepper__label">

package/src/components/VSwitch/VSwitch.ts

@@ -39,7 +39,7 @@ export default defineComponent({
     },
   },
 
-  emits: ['click', 'focus', 'blur'],
+  emits: ['click', 'focus', 'blur', 'update:modelValue', 'change'],
 
   computed: {
     classes (): object {

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

@@ -4,18 +4,15 @@ import VSwitch from '../VSwitch'
 // Utilities
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
   enableAutoUnmount,
 } from '@vue/test-utils'
 import { touch } from '../../../../test'
 
-// Types
-import { ExtractVue } from '../../../util/mixins'
-
 describe('VSwitch.ts', () => {
-  type Instance = ExtractVue<typeof VSwitch>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VSwitch>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   enableAutoUnmount(afterEach)
 

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

@@ -6,35 +6,34 @@ exports[`VSwitch.ts should render element with loader and match the snapshot 1`]
     <div class="v-input__slot">
       <div class="v-input--selection-controls__input">
         <input aria-checked="false"
-               id="input-22"
+               id="input-29"
                role="switch"
                type="checkbox"
                aria-disabled="false"
-               value
         >
         <div class="v-input--selection-controls__ripple">
         </div>
-        <div class="v-input--switch__track theme--light">
+        <div class="theme--light v-input--switch__track">
         </div>
-        <div class="v-input--switch__thumb theme--light">
-          <div role="progressbar"
+        <div class="theme--light v-input--switch__thumb">
+          <div class="v-progress-circular v-progress-circular--visible v-progress-circular--indeterminate primary--text"
+               role="progressbar"
                aria-valuemin="0"
                aria-valuemax="100"
-               class="v-progress-circular v-progress-circular--indeterminate primary--text"
                style="height: 16px; width: 16px;"
           >
-            <svg xmlns="http://www.w3.org/2000/svg"
+            <svg style="transform: rotate(0deg);"
+                 xmlns="http://www.w3.org/2000/svg"
                  viewbox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
-                 style="transform: rotate(0deg);"
             >
-              <circle fill="transparent"
+              <circle class="v-progress-circular__overlay"
+                      fill="transparent"
                       cx="45.714285714285715"
                       cy="45.714285714285715"
                       r="20"
                       stroke-width="5.714285714285714"
                       stroke-dasharray="125.664"
                       stroke-dashoffset="125.66370614359172px"
-                      class="v-progress-circular__overlay"
               >
               </circle>
             </svg>
@@ -45,11 +44,8 @@ exports[`VSwitch.ts should render element with loader and match the snapshot 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>

package/src/components/VTabs/VTabs.ts

@@ -45,6 +45,10 @@ export default baseMixins.extend({
       default: '',
     },
     alignWithTitle: Boolean,
+    allowDeselect: {
+      type: Boolean,
+      default: false,
+    },
     backgroundColor: String,
     centerActive: Boolean,
     centered: Boolean,
@@ -216,6 +220,7 @@ export default baseMixins.extend({
           height: convertToUnit(this.height),
         },
         activeClass: this.activeClass,
+        allowDeselect: this.allowDeselect,
         centerActive: this.centerActive,
         dark: this.dark,
         light: this.light,

package/src/components/VTabs/VTabsBar.ts

@@ -31,6 +31,10 @@ export default mixins(
     }
   },
 
+  props: {
+    allowDeselect: Boolean,
+  },
+
   computed: {
     classes () {
       return {

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

@@ -250,4 +250,69 @@ describe('VTabs.ts', () => {
     const emitted = wrapper.emitted('update:modelValue')
     expect(emitted).toBeFalsy() // Не должно быть эмиттов при инициализации
   })
+
+  it('should not close active tab when clicked (allowDeselect=false)', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 'first',
+        allowDeselect: false, // Запрещаем deselect
+      },
+      slots: {
+        default: () => [h('div', [
+          h(VTab, { tabValue: 'first' }, () => 'First Tab'),
+          h(VTab, { tabValue: 'second' }, () => 'Second Tab'),
+        ])],
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    // Проверяем, что первая вкладка активна
+    expect(wrapper.vm.internalValue).toBe('first')
+
+    // Кликаем по активной вкладке (первой)
+    const tabs = wrapper.findAllComponents({ name: 'v-tab' })
+    const firstTab = tabs[0] // Первая вкладка должна быть активной
+    await firstTab.trigger('click')
+
+    // Проверяем, что значение не изменилось (вкладка осталась активной)
+    expect(wrapper.vm.internalValue).toBe('first')
+
+    // Проверяем, что не было эмиттов update:modelValue
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeFalsy()
+  })
+
+  it('should not close active tab when clicked (mandatory=true)', async () => {
+    // Тест для проверки, что при mandatory=true активная вкладка не закрывается
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 'first',
+        optional: false, // mandatory=true
+      },
+      slots: {
+        default: () => [h('div', [
+          h(VTab, { tabValue: 'first' }, () => 'First Tab'),
+          h(VTab, { tabValue: 'second' }, () => 'Second Tab'),
+        ])],
+      },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    // Проверяем, что первая вкладка активна
+    expect(wrapper.vm.internalValue).toBe('first')
+
+    // Кликаем по активной вкладке (первой)
+    const tabs = wrapper.findAllComponents({ name: 'v-tab' })
+    const firstTab = tabs[0] // Первая вкладка должна быть активной
+    await firstTab.trigger('click')
+
+    // Проверяем, что значение не изменилось (вкладка осталась активной)
+    expect(wrapper.vm.internalValue).toBe('first')
+
+    // Проверяем, что не было эмиттов update:modelValue
+    const emitted = wrapper.emitted('update:modelValue')
+    expect(emitted).toBeFalsy()
+  })
 })

package/src/components/VTextField/VTextField.ts

@@ -85,7 +85,7 @@ export default baseMixins.extend({
     },
   },
 
-  emits: ['update:modelValue', 'blur', 'focus', 'keydown'],
+  emits: ['update:modelValue', 'blur', 'focus', 'keydown', 'click:clear'],
 
   data: () => ({
     badInput: false,
@@ -254,6 +254,7 @@ export default baseMixins.extend({
     clearableCallback () {
       this.$refs.input && this.$refs.input.focus()
       this.$nextTick(() => this.internalValue = null)
+      this.$emit('click:clear')
     },
     genAppendSlot () {
       const slot = []