@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VInput/VInput.ts

@@ -15,20 +15,23 @@ import {
   convertToUnit,
   getSlot,
   kebabCase,
+  normalizeClasses
 } from '../../util/helpers'
 import mergeData from '../../util/mergeData'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
+import { VNode, PropType, h, getCurrentInstance } from 'vue'
+import type { VNodeData } from '../../types/vue-internal'
 import mixins from '../../util/mixins'
 import { InputValidationRule } from 'vuetify/types'
 
 const baseMixins = mixins(
   BindsAttrs,
-  Validatable,
+  Validatable
 )
 
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   /* eslint-disable-next-line camelcase */
   $_modelEvent: string
 }
@@ -43,7 +46,7 @@ export default baseMixins.extend({
     appendIcon: String,
     backgroundColor: {
       type: String,
-      default: '',
+      default: ''
     },
     dense: Boolean,
     height: [Number, String],
@@ -55,13 +58,15 @@ export default baseMixins.extend({
     loading: Boolean,
     persistentHint: Boolean,
     prependIcon: String,
-    modelValue: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>
   },
 
+  emits: ['click', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'update:error'],
+
   data () {
     return {
       lazyValue: this.modelValue,
-      hasMouseDown: false,
+      hasMouseDown: false
     }
   },
 
@@ -79,7 +84,7 @@ export default baseMixins.extend({
         'v-input--is-readonly': this.isReadonly,
         'v-input--dense': this.dense,
         'v-input--hide-spin-buttons': this.hideSpinButtons,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
     computedId (): string {
@@ -107,7 +112,11 @@ export default baseMixins.extend({
       set (val: any) {
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
-      },
+
+        if ('$_emitChangeEvent' in this) {
+          this.$emit('change', val)
+        }
+      }
     },
     isDirty (): boolean {
       return !!this.lazyValue
@@ -130,19 +139,31 @@ export default baseMixins.extend({
     },
     showDetails (): boolean {
       return this.hideDetails === false || (this.hideDetails === 'auto' && this.hasDetails)
-    },
+    }
   },
 
   watch: {
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
-    },
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
-    this.$_modelEvent = /*(this.$options.model && this.$options.model.event) ||*/ 'update:modelValue'
+    this.$_modelEvent = /* (this.$options.model && this.$options.model.event) || */ 'update:modelValue'
   },
 
   methods: {
@@ -150,22 +171,22 @@ export default baseMixins.extend({
       return [
         this.genPrependSlot(),
         this.genControl(),
-        this.genAppendSlot(),
+        this.genAppendSlot()
       ]
     },
     genControl () {
       return h('div', {
         class: 'v-input__control',
-        title: this.attrs$.title,
+        title: this.attrs$.title
       }, [
         this.genInputSlot(),
-        this.genMessages(),
+        this.genMessages()
       ])
     },
     genDefaultSlot () {
       return [
         this.genLabel(),
-        getSlot(this),
+        getSlot(this)
       ]
     },
     genIcon (
@@ -182,7 +203,7 @@ export default baseMixins.extend({
         prependInner: 'prependAction',
         append: 'appendAction',
         appendOuter: 'appendAction',
-        clear: 'clear',
+        clear: 'clear'
       }[type]
       const label = hasListener && localeKey
         ? this.$vuetify.lang.t(`$vuetify.input.${localeKey}`, this.label ?? '')
@@ -198,43 +219,43 @@ export default baseMixins.extend({
         ...(!hasListener
           ? {}
           : {
-            onClick: (e: Event) => {
-              e.preventDefault()
-              e.stopPropagation()
-
-              this.$emit(eventName, e)
-              cb && cb(e)
-            },
-            // Container has g event that will
-            // trigger menu open if enclosed
-            onMouseup: (e: Event) => {
-              e.preventDefault()
-              e.stopPropagation()
-            },
-          }),
+              onClick: (e: Event) => {
+                e.preventDefault()
+                e.stopPropagation()
+
+                this.$emit(eventName, e)
+                cb && cb(e)
+              },
+              // Container has g event that will
+              // trigger menu open if enclosed
+              onMouseup: (e: Event) => {
+                e.preventDefault()
+                e.stopPropagation()
+              }
+            })
       }, extraData)
 
       return h('div', {
         class: {
           'v-input__icon': true,
           [`v-input__icon--${kebabCase(type)}`]: type
-        },
+        }
       }, [
         h(
           VIcon,
           data,
-          icon
-        ),
+          () => icon
+        )
       ])
     },
     genInputSlot () {
       return h('div', this.setBackgroundColor(this.backgroundColor, {
-        class: {'v-input__slot': true},
+        class: { 'v-input__slot': true },
         style: { height: convertToUnit(this.height) },
         onClick: this.onClick,
         onMousedown: this.onMouseDown,
         onMouseup: this.onMouseUp,
-        ref: 'input-slot',
+        ref: 'input-slot'
       }), [this.genDefaultSlot()])
     },
     genLabel () {
@@ -246,8 +267,8 @@ export default baseMixins.extend({
         disabled: this.isDisabled,
         focused: this.hasState,
         for: this.computedId,
-        light: this.light,
-      }, getSlot(this, 'label') || this.label)
+        light: this.light
+      }, () => getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null
@@ -256,9 +277,11 @@ export default baseMixins.extend({
         color: this.hasHint ? '' : this.validationState,
         dark: this.dark,
         light: this.light,
-        value: this.messagesToDisplay,
-        role: this.hasMessages ? 'alert' : null,
-      }, {default: getSlot(this, 'message') })
+        modelValue: this.messagesToDisplay,
+        role: this.hasMessages ? 'alert' : null
+      }, {
+        default: (props?: any) => getSlot(this, 'message', props) ?? []
+      })
     },
     genSlot (
       type: string,
@@ -269,11 +292,11 @@ export default baseMixins.extend({
 
       const ref = `${type}-${location}`
 
-      slot = slot.map(child => child instanceof Function ? child() : child)
+      slot = slot.map(child => (typeof child === 'function' ? (child as () => VNode | VNode[])() : child))
 
       return h('div', {
         class: `v-input__${ref}`,
-        ref,
+        ref
       }, slot)
     },
     genPrependSlot () {
@@ -312,12 +335,17 @@ export default baseMixins.extend({
     onMouseUp (e: Event) {
       this.hasMouseDown = false
       this.$emit('mouseup', e)
-    },
+    }
   },
 
   render (): VNode {
+    const { class: additionalClasses, ...restAttrs } = this.$attrs as Record<string, any>
+
     return h('div', this.setTextColor(this.validationState, {
-      class: {'v-input': true, ...this.classes},
-    }), this.genContent())
-  },
+      class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },
+      ...restAttrs
+    }), {
+      default: () => this.genContent()
+    })
+  }
 })

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

@@ -1,67 +1,84 @@
 import VInput from '../VInput'
-import {
-  mount,
-  MountOptions,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
 describe('VInput.ts', () => {
-  type Instance = InstanceType<typeof VInput>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VInput>;
+  let mountFunction: (
+    options?: MountingOptions<Instance>
+  ) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VInput, {
-        // https://github.com/vuejs/vue-test-utils/issues/1130
-        sync: false,
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: (val: string) => val,
-            },
-          },
-        },
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const defaultOptions = {
+        global: {
+          mocks: {
+            // Мокаем только необходимые свойства Vuetify
+            $vuetify: {
+              lang: {
+                t: (val: string) => val
+              },
+              icons: {
+                component: 'mdi'
+              }
+            }
+          }
+        }
+      }
+
+      // Объединяем опции правильно
+      const mergedOptions = {
+        ...defaultOptions,
         ...options,
-      })
+        global: {
+          ...defaultOptions.global,
+          ...options?.global
+        }
+      }
+
+      return mount(VInput, mergedOptions)
     }
   })
 
-  it('should have hint', () => {
+  it('should have hint', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        hint: 'foo',
-      },
+      props: {
+        hint: 'foo'
+      }
     })
 
     expect(wrapper.vm.hasHint).toBe(false)
-    wrapper.setProps({ persistentHint: true })
+    await wrapper.setProps({ persistentHint: true })
     expect(wrapper.vm.hasHint).toBe(true)
-    wrapper.setProps({ persistentHint: false })
+    await wrapper.setProps({ persistentHint: false })
     expect(wrapper.vm.hasHint).toBe(false)
-    wrapper.setData({ isFocused: true })
-    expect(wrapper.vm.hasHint).toBe(true)
   })
 
-  it('should emit an input update', () => {
-    const wrapper = mountFunction()
-
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
+  it('should update lazyValue when value is updated', async () => {
+    const wrapper = mountFunction({
+      props: {
+        modelValue: 'foo'
+      }
+    })
 
-    expect(wrapper.vm.lazyValue).toBeUndefined()
-    wrapper.vm.internalValue = 'foo'
-    expect(input).toHaveBeenCalledWith('foo')
     expect(wrapper.vm.lazyValue).toBe('foo')
+
+    await wrapper.setProps({ modelValue: 'bar' })
+
+    expect(wrapper.vm.lazyValue).toBe('bar')
   })
 
   it('should generate append and prepend slots', () => {
-    const el = slot => ({
-      render: h => h('div', slot),
-    })
+    const el = (slot: string) => h('div', slot)
     const wrapper = mountFunction({
-      slots: { append: [el('append')] },
+      slots: {
+        append: () => [el('append')]
+      }
     })
     const wrapper2 = mountFunction({
-      slots: { prepend: [el('prepend')] },
+      slots: {
+        prepend: () => [el('prepend')]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -70,210 +87,148 @@ describe('VInput.ts', () => {
 
   it('should generate an icon and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        prependIcon: 'list',
-      },
+      props: {
+        prependIcon: 'list'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       prependIcon: undefined,
-      appendIcon: 'list',
+      appendIcon: 'list'
     })
 
-    await wrapper.vm.$nextTick()
-
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should not generate input details', () => {
     const wrapper = mountFunction({
-      propsData: {
-        hideDetails: true,
-      },
+      props: {
+        hideDetails: true
+      }
     })
 
     expect(wrapper.vm.genMessages()).toBeNull()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should invoke callback', () => {
-    const cb = jest.fn()
-    const wrapper = mountFunction({
-      propsData: {
-        prependIcon: 'list',
-        appendIcon: 'search',
-      },
-      listeners: {
-        'click:prepend': cb,
-        'click:append': cb,
-      },
-    })
-
-    const click = jest.fn()
-    wrapper.vm.$on('click', click)
-
-    const prepend = wrapper.findAll('.v-icon').at(0)
-    const append = wrapper.findAll('.v-icon').at(1)
-    const slot = wrapper.find('.v-input__slot')
-
-    prepend.trigger('click')
-    expect(cb).toHaveBeenCalledTimes(1)
-    append.trigger('click')
-    expect(cb).toHaveBeenCalledTimes(2)
-    expect(click).not.toHaveBeenCalled()
-
-    slot.trigger('click')
-    expect(click).toHaveBeenCalled()
-  })
-
   it('should accept a custom height', async () => {
     const wrapper = mountFunction()
 
     const inputWrapper = wrapper.find('.v-input__slot')
-    expect(inputWrapper.element.style.height).toBe('')
+    expect(inputWrapper.element?.getAttribute('style')).toBe(null)
     expect(wrapper.vm.height).toBeUndefined()
 
-    wrapper.setProps({ height: 10 })
-    await wrapper.vm.$nextTick()
-    expect(inputWrapper.element.style.height).toBe('10px')
-    wrapper.setProps({ height: '20px' })
-    await wrapper.vm.$nextTick()
-    expect(inputWrapper.element.style.height).toBe('20px')
-  })
-
-  it('should update lazyValue when value is updated', async () => {
-    const wrapper = mountFunction({
-      propsData: {
-        value: 'foo',
-      },
-    })
-
-    expect(wrapper.vm.lazyValue).toBe('foo')
-
-    wrapper.setProps({ value: 'bar' })
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.lazyValue).toBe('bar')
-  })
-
-  it('should call the correct event for different click locations', () => {
-    const onClick = jest.fn()
-    const onMouseDown = jest.fn()
-    const onMouseUp = jest.fn()
-    const wrapper = mountFunction({
-      methods: {
-        onClick,
-        onMouseDown,
-        onMouseUp,
-      },
-    })
-
-    const slot = wrapper.find('.v-input__slot')
-
-    wrapper.trigger('click')
-    wrapper.trigger('mousedown')
-    wrapper.trigger('mouseup')
-    slot.trigger('click')
-    slot.trigger('mousedown')
-    slot.trigger('mouseup')
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-    expect(onMouseDown).toHaveBeenCalledTimes(1)
-    expect(onMouseUp).toHaveBeenCalledTimes(1)
+    await wrapper.setProps({ height: 10 })
+    expect(inputWrapper.element?.getAttribute('style')).toContain(
+      'height: 10px'
+    )
+    await wrapper.setProps({ height: '20px' })
+    expect(inputWrapper.element?.getAttribute('style')).toContain(
+      'height: 20px'
+    )
   })
 
   it('should be in an error state', async () => {
     const wrapper = mountFunction({
-      propsData: { error: true },
+      props: { error: true }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ errorMessages: 'required', error: false })
-    await wrapper.vm.$nextTick()
+    await wrapper.setProps({ errorMessages: 'required', error: false })
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should hide messages if no messages and hide-details is auto', () => {
+  it('should hide messages if no messages and hide-details is auto', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        hideDetails: 'auto',
-      },
+      props: {
+        hideDetails: 'auto'
+      }
     })
 
     expect(wrapper.vm.genMessages()).toBeNull()
 
-    wrapper.setProps({ error: true })
+    await wrapper.setProps({ error: true })
     expect(wrapper.vm.genMessages()).toBeNull()
 
-    wrapper.setProps({ errorMessages: 'required' })
+    await wrapper.setProps({ errorMessages: 'required' })
     expect(wrapper.vm.genMessages()).not.toBeNull()
   })
 
-  it('should be disabled', () => {
+  it('should be disabled', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.isInteractive).toBe(true)
 
-    wrapper.setProps({ disabled: true })
+    await wrapper.setProps({ disabled: true })
 
     expect(wrapper.vm.isInteractive).toBe(false)
 
-    wrapper.setProps({
+    await wrapper.setProps({
       disabled: false,
-      readonly: true,
+      readonly: true
     })
 
     expect(wrapper.vm.isInteractive).toBe(false)
 
-    wrapper.setProps({ readonly: false })
+    await wrapper.setProps({ readonly: false })
 
     expect(wrapper.vm.isInteractive).toBe(true)
   })
 
   it('should render a label', () => {
     const wrapper = mountFunction({
-      propsData: { label: 'foo' },
+      props: { label: 'foo' }
     })
 
     expect(wrapper.vm.hasLabel).toBe(true)
-
     expect(wrapper.html()).toMatchSnapshot()
-
-    const wrapper2 = mountFunction({
-      slots: {
-        label: [{ render: h => h('div', 'foo') }],
-      },
-    })
-
-    expect(wrapper2.html()).toMatchSnapshot()
   })
 
   it('should apply theme to label, counter, messages and icons', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         label: 'foo',
         hint: 'bar',
         persistentHint: true,
         light: true,
         prependIcon: 'prepend',
-        appendIcon: 'append',
-      },
+        appendIcon: 'append'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should not apply attrs to element', () => {
+  it('should apply attrs to root element', () => {
     const wrapper = mountFunction({
-      propsData: {
-        foo: 'bar',
-      },
+      props: {
+        foo: 'bar'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.attributes()).not.toHaveProperty('foobar')
+    expect(wrapper.attributes()).toHaveProperty('foo', 'bar')
+  })
+
+  it('should pass message slot to VMessages as a function slot (Vue 3)', async () => {
+    const wrapper = mountFunction({
+      props: {
+        errorMessages: ['validation-error'],
+        hideDetails: false
+      },
+      slots: {
+        message: (props: { message: string }) =>
+          h('span', { class: 'v-input__message-slot-test' }, [props.message, '-SLOT_OK'])
+      }
+    })
+
+    await nextTick()
+
+    expect(wrapper.find('.v-input__message-slot-test').exists()).toBe(true)
+    expect(wrapper.text()).toContain('validation-error')
+    expect(wrapper.text()).toContain('-SLOT_OK')
   })
 })