@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VInput/VInput.ts

@@ -15,22 +15,23 @@ import {
   convertToUnit,
   getSlot,
   kebabCase,
-  normalizeClasses,
+  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
 }
@@ -45,7 +46,7 @@ export default baseMixins.extend({
     appendIcon: String,
     backgroundColor: {
       type: String,
-      default: '',
+      default: ''
     },
     dense: Boolean,
     height: [Number, String],
@@ -57,7 +58,7 @@ 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'],
@@ -65,7 +66,7 @@ export default baseMixins.extend({
   data () {
     return {
       lazyValue: this.modelValue,
-      hasMouseDown: false,
+      hasMouseDown: false
     }
   },
 
@@ -83,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 {
@@ -115,7 +116,7 @@ export default baseMixins.extend({
         if ('$_emitChangeEvent' in this) {
           this.$emit('change', val)
         }
-      },
+      }
     },
     isDirty (): boolean {
       return !!this.lazyValue
@@ -138,19 +139,19 @@ export default baseMixins.extend({
     },
     showDetails (): boolean {
       return this.hideDetails === false || (this.hideDetails === 'auto' && this.hasDetails)
-    },
+    }
   },
 
   watch: {
     modelValue (val) {
       this.lazyValue = val
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -162,7 +163,7 @@ export default baseMixins.extend({
   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: {
@@ -170,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 (
@@ -202,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 ?? '')
@@ -218,33 +219,33 @@ 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
-        ),
+        )
       ])
     },
     genInputSlot () {
@@ -254,7 +255,7 @@ export default baseMixins.extend({
         onClick: this.onClick,
         onMousedown: this.onMouseDown,
         onMouseup: this.onMouseUp,
-        ref: 'input-slot',
+        ref: 'input-slot'
       }), [this.genDefaultSlot()])
     },
     genLabel () {
@@ -266,7 +267,7 @@ export default baseMixins.extend({
         disabled: this.isDisabled,
         focused: this.hasState,
         for: this.computedId,
-        light: this.light,
+        light: this.light
       }, () => getSlot(this, 'label') || this.label)
     },
     genMessages () {
@@ -277,8 +278,10 @@ export default baseMixins.extend({
         dark: this.dark,
         light: this.light,
         modelValue: this.messagesToDisplay,
-        role: this.hasMessages ? 'alert' : null,
-      }, { default: getSlot(this, 'message') })
+        role: this.hasMessages ? 'alert' : null
+      }, {
+        default: (props?: any) => getSlot(this, 'message', props) ?? []
+      })
     },
     genSlot (
       type: string,
@@ -289,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 () {
@@ -332,7 +335,7 @@ export default baseMixins.extend({
     onMouseUp (e: Event) {
       this.hasMouseDown = false
       this.$emit('mouseup', e)
-    },
+    }
   },
 
   render (): VNode {
@@ -340,9 +343,9 @@ export default baseMixins.extend({
 
     return h('div', this.setTextColor(this.validationState, {
       class: { 'v-input': true, ...this.classes, ...normalizeClasses(additionalClasses) },
-      ...restAttrs,
+      ...restAttrs
     }), {
-      default: () => this.genContent(),
+      default: () => this.genContent()
     })
-  },
+  }
 })

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

@@ -1,12 +1,12 @@
-import VInput from "../VInput";
-import { mount, MountingOptions, VueWrapper } from "@vue/test-utils";
-import { h } from "vue";
+import VInput from '../VInput'
+import { mount, MountingOptions, VueWrapper } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
-describe("VInput.ts", () => {
+describe('VInput.ts', () => {
   type Instance = InstanceType<typeof VInput>;
   let mountFunction: (
     options?: MountingOptions<Instance>
-  ) => VueWrapper<Instance>;
+  ) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options?: MountingOptions<Instance>) => {
@@ -19,12 +19,12 @@ describe("VInput.ts", () => {
                 t: (val: string) => val
               },
               icons: {
-                component: "mdi"
+                component: 'mdi'
               }
             }
           }
         }
-      };
+      }
 
       // Объединяем опции правильно
       const mergedOptions = {
@@ -34,182 +34,201 @@ describe("VInput.ts", () => {
           ...defaultOptions.global,
           ...options?.global
         }
-      };
+      }
 
-      return mount(VInput, mergedOptions);
-    };
-  });
+      return mount(VInput, mergedOptions)
+    }
+  })
 
-  it("should have hint", async () => {
+  it('should have hint', async () => {
     const wrapper = mountFunction({
       props: {
-        hint: "foo"
+        hint: 'foo'
       }
-    });
+    })
 
-    expect(wrapper.vm.hasHint).toBe(false);
-    await wrapper.setProps({ persistentHint: true });
-    expect(wrapper.vm.hasHint).toBe(true);
-    await wrapper.setProps({ persistentHint: false });
-    expect(wrapper.vm.hasHint).toBe(false);
-  });
+    expect(wrapper.vm.hasHint).toBe(false)
+    await wrapper.setProps({ persistentHint: true })
+    expect(wrapper.vm.hasHint).toBe(true)
+    await wrapper.setProps({ persistentHint: false })
+    expect(wrapper.vm.hasHint).toBe(false)
+  })
 
-  it("should update lazyValue when value is updated", async () => {
+  it('should update lazyValue when value is updated', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: "foo"
+        modelValue: 'foo'
       }
-    });
+    })
 
-    expect(wrapper.vm.lazyValue).toBe("foo");
+    expect(wrapper.vm.lazyValue).toBe('foo')
 
-    await wrapper.setProps({ modelValue: "bar" });
+    await wrapper.setProps({ modelValue: 'bar' })
 
-    expect(wrapper.vm.lazyValue).toBe("bar");
-  });
+    expect(wrapper.vm.lazyValue).toBe('bar')
+  })
 
-  it("should generate append and prepend slots", () => {
-    const el = (slot: string) => h("div", slot);
+  it('should generate append and prepend slots', () => {
+    const el = (slot: string) => h('div', slot)
     const wrapper = mountFunction({
       slots: {
-        append: () => [el("append")]
+        append: () => [el('append')]
       }
-    });
+    })
     const wrapper2 = mountFunction({
       slots: {
-        prepend: () => [el("prepend")]
+        prepend: () => [el('prepend')]
       }
-    });
+    })
 
-    expect(wrapper.html()).toMatchSnapshot();
-    expect(wrapper2.html()).toMatchSnapshot();
-  });
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper2.html()).toMatchSnapshot()
+  })
 
-  it("should generate an icon and match snapshot", async () => {
+  it('should generate an icon and match snapshot', async () => {
     const wrapper = mountFunction({
       props: {
-        prependIcon: "list"
+        prependIcon: 'list'
       }
-    });
+    })
 
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.html()).toMatchSnapshot()
 
     await wrapper.setProps({
       prependIcon: undefined,
-      appendIcon: "list"
-    });
+      appendIcon: 'list'
+    })
 
-    expect(wrapper.html()).toMatchSnapshot();
-  });
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 
-  it("should not generate input details", () => {
+  it('should not generate input details', () => {
     const wrapper = mountFunction({
       props: {
         hideDetails: true
       }
-    });
-
-    expect(wrapper.vm.genMessages()).toBeNull();
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-
-  it("should accept a custom height", async () => {
-    const wrapper = mountFunction();
-
-    const inputWrapper = wrapper.find(".v-input__slot");
-    expect(inputWrapper.element?.getAttribute("style")).toBe(null);
-    expect(wrapper.vm.height).toBeUndefined();
-
-    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 () => {
+    })
+
+    expect(wrapper.vm.genMessages()).toBeNull()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should accept a custom height', async () => {
+    const wrapper = mountFunction()
+
+    const inputWrapper = wrapper.find('.v-input__slot')
+    expect(inputWrapper.element?.getAttribute('style')).toBe(null)
+    expect(wrapper.vm.height).toBeUndefined()
+
+    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({
       props: { error: true }
-    });
+    })
 
-    expect(wrapper.html()).toMatchSnapshot();
+    expect(wrapper.html()).toMatchSnapshot()
 
-    await wrapper.setProps({ errorMessages: "required", error: false });
-    expect(wrapper.html()).toMatchSnapshot();
-  });
+    await wrapper.setProps({ errorMessages: 'required', error: false })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 
-  it("should hide messages if no messages and hide-details is auto", async () => {
+  it('should hide messages if no messages and hide-details is auto', async () => {
     const wrapper = mountFunction({
       props: {
-        hideDetails: "auto"
+        hideDetails: 'auto'
       }
-    });
+    })
 
-    expect(wrapper.vm.genMessages()).toBeNull();
+    expect(wrapper.vm.genMessages()).toBeNull()
 
-    await wrapper.setProps({ error: true });
-    expect(wrapper.vm.genMessages()).toBeNull();
+    await wrapper.setProps({ error: true })
+    expect(wrapper.vm.genMessages()).toBeNull()
 
-    await wrapper.setProps({ errorMessages: "required" });
-    expect(wrapper.vm.genMessages()).not.toBeNull();
-  });
+    await wrapper.setProps({ errorMessages: 'required' })
+    expect(wrapper.vm.genMessages()).not.toBeNull()
+  })
 
-  it("should be disabled", async () => {
-    const wrapper = mountFunction();
+  it('should be disabled', async () => {
+    const wrapper = mountFunction()
 
-    expect(wrapper.vm.isInteractive).toBe(true);
+    expect(wrapper.vm.isInteractive).toBe(true)
 
-    await wrapper.setProps({ disabled: true });
+    await wrapper.setProps({ disabled: true })
 
-    expect(wrapper.vm.isInteractive).toBe(false);
+    expect(wrapper.vm.isInteractive).toBe(false)
 
     await wrapper.setProps({
       disabled: false,
       readonly: true
-    });
+    })
 
-    expect(wrapper.vm.isInteractive).toBe(false);
+    expect(wrapper.vm.isInteractive).toBe(false)
 
-    await wrapper.setProps({ readonly: false });
+    await wrapper.setProps({ readonly: false })
 
-    expect(wrapper.vm.isInteractive).toBe(true);
-  });
+    expect(wrapper.vm.isInteractive).toBe(true)
+  })
 
-  it("should render a label", () => {
+  it('should render a label', () => {
     const wrapper = mountFunction({
-      props: { label: "foo" }
-    });
+      props: { label: 'foo' }
+    })
 
-    expect(wrapper.vm.hasLabel).toBe(true);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
+    expect(wrapper.vm.hasLabel).toBe(true)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 
-  it("should apply theme to label, counter, messages and icons", () => {
+  it('should apply theme to label, counter, messages and icons', () => {
     const wrapper = mountFunction({
       props: {
-        label: "foo",
-        hint: "bar",
+        label: 'foo',
+        hint: 'bar',
         persistentHint: true,
         light: true,
-        prependIcon: "prepend",
-        appendIcon: "append"
+        prependIcon: 'prepend',
+        appendIcon: 'append'
       }
-    });
+    })
 
-    expect(wrapper.html()).toMatchSnapshot();
-  });
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 
-  it("should apply attrs to root element", () => {
+  it('should apply attrs to root element', () => {
     const wrapper = mountFunction({
       props: {
-        foo: "bar"
+        foo: 'bar'
       }
-    });
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+    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.html()).toMatchSnapshot();
-    expect(wrapper.attributes()).toHaveProperty("foo", "bar");
-  });
-});
+    expect(wrapper.find('.v-input__message-slot-test').exists()).toBe(true)
+    expect(wrapper.text()).toContain('validation-error')
+    expect(wrapper.text()).toContain('-SLOT_OK')
+  })
+})

package/src/components/VItemGroup/VItem.ts

@@ -7,7 +7,7 @@ import { factory as GroupableFactory } from '../../mixins/groupable'
 // Utilities
 import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
-import { defineComponent, mergeProps } from "vue"
+import { defineComponent, mergeProps } from 'vue'
 
 import type { VNode } from 'vue'
 
@@ -16,19 +16,19 @@ export const BaseItem = defineComponent({
   props: {
     activeClass: String,
     value: {
-      required: false,
+      required: false
     },
-    disabled: Boolean,
+    disabled: Boolean
   },
 
   data: () => ({
-    isActive: false,
+    isActive: false
   }),
 
   methods: {
     toggle () {
       this.isActive = !this.isActive
-    },
+    }
   },
 
   render (): VNode | null {
@@ -39,7 +39,7 @@ export const BaseItem = defineComponent({
 
     const slotContent = this.$slots.default({
       active: this.isActive,
-      toggle: this.toggle,
+      toggle: this.toggle
     })
 
     if (!slotContent || slotContent.length === 0) {
@@ -47,7 +47,7 @@ export const BaseItem = defineComponent({
       return null
     }
 
-    let element = slotContent[0]
+    const element = slotContent[0]
 
     if (!element) {
       consoleWarn('v-item should contain at least one element', this)
@@ -62,7 +62,7 @@ export const BaseItem = defineComponent({
     element.props = mergeProps(element.props || {}, {
       class: {
         ...(this.$activeClass && { [this.$activeClass]: this.isActive }),
-        "v-item--disabled": this.disabled
+        'v-item--disabled': this.disabled
       }
     })
 
@@ -73,7 +73,7 @@ export const BaseItem = defineComponent({
     }
 
     return element
-  },
+  }
 })
 
 export default mixins(
@@ -83,6 +83,6 @@ export default mixins(
   name: 'v-item',
 
   emits: [
-    'change',
-  ],
+    'change'
+  ]
 })