@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -18,29 +18,28 @@ import { breaking } from '../../util/console'
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-
   props: {
     ...Colorable.props,
     ...Themeable.props,
     disabled: Boolean,
     ripple: {
       type: Boolean,
-      default: true,
+      default: true
     },
     modelValue: Boolean,
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
-      default: '$checkboxIndeterminate',
+      default: '$checkboxIndeterminate'
     },
     onIcon: {
       type: String,
-      default: '$checkboxOn',
+      default: '$checkboxOn'
     },
     offIcon: {
       type: String,
-      default: '$checkboxOff',
-    },
+      default: '$checkboxOff'
+    }
   },
 
   emits: ['input', 'update:modelValue'],
@@ -48,7 +47,7 @@ export default defineComponent({
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -74,7 +73,7 @@ export default defineComponent({
         Colorable.methods.setTextColor(modelValue && color, {
           disabled,
           dark,
-          light,
+          light
         }),
         () => this.getIcon()
       )
@@ -89,11 +88,11 @@ export default defineComponent({
         h(
           'div',
           Colorable.methods.setTextColor(color, {
-            class: 'v-input--selection-controls__ripple',
+            class: 'v-input--selection-controls__ripple'
           })
         ),
         [
-          [Ripple, { center: true }],
+          [Ripple, { center: true }]
         ]
       )
     },
@@ -106,8 +105,7 @@ export default defineComponent({
       const newValue = !this.modelValue
       const attrs = this.$attrs
 
-
-      this.$emit("input", newValue);
+      this.$emit('input', newValue)
       this.$emit('update:modelValue', newValue)
     },
 
@@ -120,7 +118,7 @@ export default defineComponent({
       }
 
       return children
-    },
+    }
   },
 
   render (): VNode {
@@ -132,9 +130,9 @@ export default defineComponent({
       mergeData(data, {
         class: {
           'v-simple-checkbox': true,
-          'v-simple-checkbox--disabled': disabled,
+          'v-simple-checkbox--disabled': disabled
         },
-        onClick: this.handleClick,
+        onClick: this.handleClick
       }),
       [
         h(
@@ -144,5 +142,5 @@ export default defineComponent({
         )
       ]
     )
-  },
+  }
 })

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

@@ -1,7 +1,7 @@
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import VCheckbox from '../VCheckbox'
 
@@ -19,8 +19,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should return true when clicked', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: false,
-      } as any,
+        modelValue: false
+      } as any
     })
 
     const input = wrapper.find('input')
@@ -34,8 +34,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: 'John',
-        modelValue: null,
-      } as any,
+        modelValue: null
+      } as any
     })
 
     const input = wrapper.find('input')
@@ -49,8 +49,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: 'John',
-        modelValue: 'John',
-      } as any,
+        modelValue: 'John'
+      } as any
     })
 
     const ripple = wrapper.find('input')
@@ -64,9 +64,9 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         label: 'Label',
-        value: null,
+        value: null
       } as any,
-      attrs: {},
+      attrs: {}
     })
 
     const label = wrapper.find('label')
@@ -78,8 +78,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should render role and aria-checked attributes on input group', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: false,
-      } as any,
+        modelValue: false
+      } as any
     })
 
     const input = wrapper.find('input')
@@ -101,8 +101,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should toggle on keypress', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: false,
-      } as any,
+        modelValue: false
+      } as any
     })
 
     const input = wrapper.find('input')
@@ -123,8 +123,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         modelValue: false,
-        disabled: false,
-      } as any,
+        disabled: false
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -141,8 +141,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         modelValue: false,
-        ripple: false,
-      } as any,
+        ripple: false
+      } as any
     })
 
     const ripple = wrapper.findAll('.v-input--selection-controls__ripple')
@@ -153,8 +153,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should render ripple when ripple prop is true', () => {
     const wrapper = mountFunction({
       props: {
-        ripple: true,
-      } as any,
+        ripple: true
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -167,8 +167,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: { x: 1, y: 2 },
-        modelValue: null,
-      } as any,
+        modelValue: null
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -182,8 +182,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: [1, '2', { x: 1, y: 2 }],
-        modelValue: null,
-      } as any,
+        modelValue: null
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -197,8 +197,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: 'John',
-        modelValue: [],
-      } as any,
+        modelValue: []
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -212,8 +212,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: [1, 2, { x: 1, y: 2 }],
-        modelValue: ['Existing'],
-      } as any,
+        modelValue: ['Existing']
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -228,8 +228,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
       props: {
         multiple: false, // must use multiple flag for array values
         value: ['John'],
-        modelValue: ['John'],
-      } as any,
+        modelValue: ['John']
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -243,8 +243,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: 1,
-        modelValue: [1, 2, 1, 3],
-      } as any,
+        modelValue: [1, 2, 1, 3]
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -258,8 +258,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
     const wrapper = mountFunction({
       props: {
         value: { a: 1 },
-        modelValue: [{ a: 1 }, { b: 1 }, { a: 1 }, { c: 1 }],
-      } as any,
+        modelValue: [{ a: 1 }, { b: 1 }, { a: 1 }, { c: 1 }]
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -274,8 +274,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
       props: {
         trueValue: 'on',
         falseValue: 'off',
-        modelValue: null,
-      } as any,
+        modelValue: null
+      } as any
     })
 
     const ripple = wrapper.find('.v-input--selection-controls__ripple')
@@ -294,7 +294,7 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   // https://github.com/vuetifyjs/vuetify/issues/2119
   it('should put id on internal input', () => {
     const wrapper = mountFunction({
-      props: { id: 'foo' } as any,
+      props: { id: 'foo' } as any
     })
 
     const input = wrapper.find('input')
@@ -308,8 +308,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
         onIcon: 'foo',
         offIcon: 'bar',
         indeterminate: true,
-        value: 'fizz',
-      } as any,
+        value: 'fizz'
+      } as any
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -322,8 +322,8 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should render themed component', () => {
     const wrapper = mountFunction({
       props: {
-        light: true,
-      } as any,
+        light: true
+      } as any
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -331,7 +331,7 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
 
   it('should be disabled', () => {
     const wrapper = mountFunction({
-      props: { disabled: true } as any,
+      props: { disabled: true } as any
     })
     const input = wrapper.find('input')
 
@@ -340,7 +340,7 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
 
   it('should be render colored checkbox', () => {
     const wrapper = mountFunction({
-      props: { color: 'yellow' } as any,
+      props: { color: 'yellow' } as any
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -349,11 +349,11 @@ describe('VCheckbox.ts', () => { // eslint-disable-line max-statements
   it('should apply classes to root element', () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: true,
+        modelValue: true
       } as any,
       attrs: {
-        class: 'shrink mr-2 mt-0',
-      },
+        class: 'shrink mr-2 mt-0'
+      }
     })
 
     const rootElement = wrapper.element

package/src/components/VCheckbox/__tests__/VSimpleCheckbox.spec.ts

@@ -1,6 +1,6 @@
 import {
   mount,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 import VSimpleCheckbox from '../VSimpleCheckbox'
 
@@ -14,18 +14,18 @@ describe('VSimpleCheckbox.ts', () => {
         global: {
           stubs: {
             VIcon: {
-              template: '<span class="v-icon"></span>',
-            },
-          },
+              template: '<span class="v-icon"></span>'
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
 
   it('should render simple checkbox', () => {
     const wrapper = mountFunction({
-      props: { modelValue: false },
+      props: { modelValue: false }
     })
 
     expect(wrapper.find('.v-simple-checkbox').exists()).toBe(true)
@@ -34,7 +34,7 @@ describe('VSimpleCheckbox.ts', () => {
 
   it('should emit update:modelValue event on click', async () => {
     const wrapper = mountFunction({
-      props: { modelValue: false },
+      props: { modelValue: false }
     })
 
     const element = wrapper.find('.v-simple-checkbox')
@@ -46,7 +46,7 @@ describe('VSimpleCheckbox.ts', () => {
 
   it('should not emit update:modelValue when disabled', async () => {
     const wrapper = mountFunction({
-      props: { modelValue: false, disabled: true },
+      props: { modelValue: false, disabled: true }
     })
 
     const element = wrapper.find('.v-simple-checkbox')
@@ -57,7 +57,7 @@ describe('VSimpleCheckbox.ts', () => {
 
   it('should apply disabled class when disabled', () => {
     const wrapper = mountFunction({
-      props: { disabled: true },
+      props: { disabled: true }
     })
 
     expect(wrapper.find('.v-simple-checkbox--disabled').exists()).toBe(true)

package/src/components/VCheckbox/index.ts

@@ -5,6 +5,6 @@ export { VCheckbox, VSimpleCheckbox }
 export default {
   $_vuetify_subcomponents: {
     VCheckbox,
-    VSimpleCheckbox,
-  },
+    VSimpleCheckbox
+  }
 }

package/src/components/VChip/VChip.ts

@@ -20,7 +20,7 @@ import { breaking } from '../../util/console'
 import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
-import { PropValidator, PropType } from 'vue/types/options'
+import type { PropType } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -38,27 +38,27 @@ export default mixins(
   props: {
     active: {
       type: Boolean,
-      default: true,
+      default: true
     },
     activeClass: {
-      type: String,
-    } as any as PropValidator<string>,
+      type: String
+    } as any as PropType<string>,
     close: Boolean,
     onClick: Function as PropType<(e: MouseEvent) => void>,
     closeIcon: {
       type: String,
-      default: '$delete',
+      default: '$delete'
     },
     closeLabel: {
       type: String,
-      default: '$vuetify.close',
+      default: '$vuetify.close'
     },
     disabled: Boolean,
     draggable: Boolean,
     filter: Boolean,
     filterIcon: {
       type: String,
-      default: '$complete',
+      default: '$complete'
     },
     label: Boolean,
     link: Boolean,
@@ -66,14 +66,14 @@ export default mixins(
     pill: Boolean,
     tag: {
       type: String,
-      default: 'span',
+      default: 'span'
     },
     textColor: String,
-    modelValue: null as any as PropType<any>,
+    modelValue: null as any as PropType<any>
   },
 
   data: () => ({
-    proxyClass: 'v-chip--active',
+    proxyClass: 'v-chip--active'
   }),
 
   computed: {
@@ -100,7 +100,7 @@ export default mixins(
         'v-chip--removable': this.hasClose,
         ...this.themeClasses,
         ...this.sizeableClasses,
-        ...this.groupClasses,
+        ...this.groupClasses
       }
     },
     hasClose (): boolean {
@@ -111,7 +111,7 @@ export default mixins(
         Routable.computed.isClickable.call(this) ||
         this.chipGroup
       )
-    },
+    }
   },
 
   created () {
@@ -119,7 +119,7 @@ export default mixins(
       ['outline', 'outlined'],
       ['selected', 'input-value'],
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -144,12 +144,12 @@ export default mixins(
         children.push(
           h(VIcon, {
             class: 'v-chip__filter',
-            left: true,
-          }, this.filterIcon)
+            left: true
+          }, () => this.filterIcon)
         )
       }
 
-      return h(VExpandXTransition, children)
+      return h(VExpandXTransition, {}, () => children)
     },
     genClose (): VNode {
       return h(VIcon, {
@@ -163,18 +163,18 @@ export default mixins(
 
           this.$emit('click:close')
           this.$emit('update:modelValue', false)
-        },
-      }, this.closeIcon)
+        }
+      }, () => this.closeIcon)
     },
     genContent (): VNode {
       return h('span', {
-        class: 'v-chip__content',
+        class: 'v-chip__content'
       }, [
         this.filter && this.genFilter(),
         getSlot(this),
-        this.hasClose && this.genClose(),
+        this.hasClose && this.genClose()
       ])
-    },
+    }
   },
 
   render (): VNode {
@@ -184,21 +184,22 @@ export default mixins(
     data = {
       ...data,
       draggable: this.draggable ? 'true' : undefined,
-      tabindex: this.chipGroup && !this.disabled ? 0 : data.tabindex,
+      tabindex: this.chipGroup && !this.disabled ? 0 : data.tabindex
     }
 
     directives!.push([
       vShow,
-      this.active,
+      this.active
     ])
 
     data = this.setBackgroundColor(this.color, data)
 
     const color = this.textColor || (this.outlined && this.color)
+    const tagForH = typeof tag === 'string' ? getTagValue(tag) : tag
 
     return withDirectives(
-      h(getTagValue(tag), this.setTextColor(color, data), children),
+      h(tagForH as any, this.setTextColor(color, data), children),
       directives
     )
-  },
+  }
 })