@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-alpha21

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -2,8 +2,7 @@ import './VSimpleCheckbox.sass'
 
 import Ripple from '../../directives/ripple'
 
-import { VNode, VNodeDirective, h } from 'vue'
-import {defineComponent} from 'vue'
+import { VNode, h, defineComponent, withDirectives } from 'vue'
 
 import { VIcon } from '../VIcon'
 
@@ -18,8 +17,6 @@ import { wrapInArray } from '../../util/helpers'
 export default defineComponent({
   name: 'v-simple-checkbox',
 
-  functional: true,
-
   directives: {
     Ripple,
   },
@@ -32,7 +29,7 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
-    value: Boolean,
+    modelValue: Boolean,
     indeterminate: Boolean,
     indeterminateIcon: {
       type: String,
@@ -48,49 +45,94 @@ export default defineComponent({
     },
   },
 
+  emits: ['input', 'update:modelValue'],
+
+  methods: {
+    getIcon (): string {
+      const { indeterminate, modelValue, indeterminateIcon, onIcon, offIcon } = this.$props
+
+      if (indeterminate) return indeterminateIcon
+      if (modelValue) return onIcon
+      return offIcon
+    },
+
+    createIcon (): VNode {
+      const { modelValue, disabled, dark, light, color } = this.$props
+
+      return h(
+        VIcon,
+        Colorable.methods.setTextColor(modelValue && color, {
+          disabled,
+          dark,
+          light,
+        }),
+        () => this.getIcon()
+      )
+    },
+
+    createRipple (): VNode | null {
+      const { ripple, disabled, color } = this.$props
+
+      if (!ripple || disabled) return null
+
+      return withDirectives(
+        h(
+          'div',
+          Colorable.methods.setTextColor(color, {
+            class: 'v-input--selection-controls__ripple',
+          })
+        ),
+        [
+          [Ripple, { center: true }],
+        ]
+      )
+    },
+
+    handleClick (e: MouseEvent): void {
+      e.stopPropagation()
+
+      if (this.$props.disabled) return
+
+      const newValue = !this.modelValue
+      const attrs = this.$attrs
+
+
+      this.$emit("input", newValue);
+      this.$emit('update:modelValue', newValue)
+    },
+
+    createChildren (): VNode[] {
+      const children = [this.createIcon()]
+
+      const ripple = this.createRipple()
+      if (ripple) {
+        children.push(ripple)
+      }
+
+      return children
+    },
+  },
+
   render (): VNode {
-    const props = this.$props
+    const { disabled } = this.$props
     const data = this.$attrs
 
-    const children = []
-    let icon = props.offIcon
-    if (props.indeterminate) icon = props.indeterminateIcon
-    else if (props.value) icon = props.onIcon
-
-    children.push(h(VIcon, Colorable.methods.setTextColor(props.value && props.color, {
-      disabled: props.disabled,
-      dark: props.dark,
-      light: props.light
-    }), icon))
-
-    if (props.ripple && !props.disabled) {
-      const ripple = h('div', Colorable.methods.setTextColor(props.color, {
-        class: 'v-input--selection-controls__ripple',
-        directives: [{
-          def: Ripple,
-          name: 'ripple',
-          value: { center: true },
-        }] as VNodeDirective[],
-      }))
-
-      children.push(ripple)
-    }
-
-    return h('div',
+    return h(
+      'div',
       mergeData(data, {
         class: {
           'v-simple-checkbox': true,
-          'v-simple-checkbox--disabled': props.disabled,
-        },
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-
-          if (data.on && data.on.input && !props.disabled) {
-            data.onInput && data.onInput(!props.value)
-          }
+          'v-simple-checkbox--disabled': disabled,
         },
-      }), [
-        h('div', { class: 'v-input--selection-controls__input' }, children),
-      ])
+        onClick: this.handleClick,
+      }),
+      [
+        h(
+          'div',
+          { class: 'v-input--selection-controls__input' },
+          this.createChildren()
+        )
+      ]
+    )
   },
 })

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

@@ -1,32 +1,65 @@
 import {
   mount,
-  Wrapper,
-  MountOptions,
+  VueWrapper,
 } from '@vue/test-utils'
 import VSimpleCheckbox from '../VSimpleCheckbox'
 
 describe('VSimpleCheckbox.ts', () => {
   type Instance = InstanceType<typeof VSimpleCheckbox>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
-      return mount(VSimpleCheckbox, options)
+    mountFunction = (options = {}) => {
+      return mount(VSimpleCheckbox, {
+        global: {
+          stubs: {
+            VIcon: {
+              template: '<span class="v-icon"></span>',
+            },
+          },
+        },
+        ...options,
+      })
     }
   })
 
-  it('should pass down listeners', () => {
-    const mouseleave = jest.fn()
+  it('should render simple checkbox', () => {
     const wrapper = mountFunction({
-      propsData: { disabled: true },
-      listeners: {
-        mouseleave,
-      },
+      props: { modelValue: false },
+    })
+
+    expect(wrapper.find('.v-simple-checkbox').exists()).toBe(true)
+    expect(wrapper.find('.v-input--selection-controls__input').exists()).toBe(true)
+  })
+
+  it('should emit update:modelValue event on click', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: false },
     })
 
     const element = wrapper.find('.v-simple-checkbox')
+    await element.trigger('click')
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true])
+  })
 
-    element.trigger('mouseleave')
+  it('should not emit update:modelValue when disabled', async () => {
+    const wrapper = mountFunction({
+      props: { modelValue: false, disabled: true },
+    })
+
+    const element = wrapper.find('.v-simple-checkbox')
+    await element.trigger('click')
+
+    expect(wrapper.emitted()['update:modelValue']).toBeFalsy()
+  })
+
+  it('should apply disabled class when disabled', () => {
+    const wrapper = mountFunction({
+      props: { disabled: true },
+    })
 
-    expect(mouseleave).toHaveBeenCalledTimes(1)
+    expect(wrapper.find('.v-simple-checkbox--disabled').exists()).toBe(true)
   })
 })

package/src/components/VColorPicker/VColorPicker.ts

@@ -50,7 +50,7 @@ export default mixins(Elevatable, Themeable).extend({
       type: [Number, String],
       default: 150,
     },
-    value: {
+    modelValue: {
       type: [Object, String],
     },
     width: {
@@ -65,9 +65,9 @@ export default mixins(Elevatable, Themeable).extend({
 
   computed: {
     hideAlpha (): boolean {
-      if (!this.value) return false
+      if (!this.modelValue) return false
 
-      return !hasAlpha(this.value)
+      return !hasAlpha(this.modelValue)
     },
   },
 
@@ -83,10 +83,10 @@ export default mixins(Elevatable, Themeable).extend({
   methods: {
     updateColor (color: VColorPickerColor) {
       this.internalValue = color
-      const value = extractColor(this.internalValue, this.value)
+      const value = extractColor(this.internalValue, this.modelValue)
 
-      if (!deepEqual(value, this.value)) {
-        this.$emit('input', value)
+      if (!deepEqual(value, this.modelValue)) {
+        this.$emit('update:modelValue', value)
         this.$emit('update:color', this.internalValue)
       }
     },

package/src/components/VData/VData.ts

@@ -203,7 +203,15 @@ export default defineComponent({
         this.$emit('update:options', options)
       },
       deep: true,
-      immediate: true,
+      /*
+        In Vue 3 this watcher fires even before created hook and
+        if mounting fails and the consumer code relies on update:options event to fetch data
+        it causes infinite loop because each data update triggers an attempt to render a table,
+        but because mounting constantly fails(for example, due to error in slot) it never happens.
+        Previously, in Vue 2 slot errors didn't cause mounting failure, we had partially rendered component.
+        This immediate prop is compensated by firing event in mounted hook.
+      */
+      // immediate: true,
     },
     page (page: number) {
       this.updateOptions({ page })
@@ -378,4 +386,7 @@ export default defineComponent({
   render (): VNode {
     return this.$slots.default && this.$slots.default(this.scopedProps)[0] as any
   },
+  mounted() {
+    this.$emit('update:options', this.internalOptions)
+  },
 })

package/src/components/VDataIterator/VDataIterator.ts

@@ -88,8 +88,10 @@ export default mixins(
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value: any[]) {
+        if(!value) return
+
         this.selection = value.reduce((selection, item) => {
           selection[getObjectValueByPath(item, this.itemKey)] = item
           return selection
@@ -100,7 +102,7 @@ export default mixins(
     selection (value: Record<string, boolean>, old: Record<string, boolean>) {
       if (deepEqual(Object.keys(value), Object.keys(old))) return
 
-      this.$emit('input', Object.values(value))
+      this.$emit('update:modelValue', Object.values(value))
     },
     expanded: {
       handler (value: any[]) {
@@ -154,7 +156,7 @@ export default mixins(
     window.addEventListener('keydown', this.onKeyDown)
     window.addEventListener('keyup', this.onKeyUp)
   },
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('keydown', this.onKeyDown)
     window.removeEventListener('keyup', this.onKeyUp)
   },

package/src/components/VDataTable/VDataTable.ts

@@ -241,7 +241,7 @@ export default mixins(
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (this.calculateWidths) {
       window.removeEventListener('resize', this.calcWidths)
     }
@@ -511,7 +511,7 @@ export default mixins(
           isMobile: this.isMobile,
         }) : () => h(VSimpleCheckbox, {
           class: 'v-data-table__checkbox',
-          value: data.isSelected,
+          modelValue: data.isSelected,
           disabled: !this.isSelectable(item),
           color: this.checkboxColor ?? '',
           onInput: (val: boolean) => data.select(val),

package/src/components/VDataTable/VDataTableHeader.ts

@@ -20,8 +20,6 @@ import {defineComponent, h} from 'vue'
 export default defineComponent({
   name: 'v-data-table-header',
 
-  functional: true,
-
   props: {
     ...header.props,
     mobile: Boolean,
@@ -29,12 +27,15 @@ export default defineComponent({
 
   render () {
     const props = this.$props
-    let data = this.$attrs
+    let data = {
+      ...this.$attrs,
+      ...props,
+    }
 
     // dedupeModelListeners(data)
     const children = rebuildSlots(this.$slots, h)
 
-    if (this.mobile) {
+    if (props.mobile) {
       return h(VDataTableHeaderMobile, data, children)
     } else {
       return h(VDataTableHeaderDesktop, data, children)

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -110,7 +110,7 @@ export default mixins(header).extend({
     return h('thead', {
       class: 'v-data-table-header',
     }, [
-      h('tr', this.headers.map(header => this.genHeader(header))),
+      h('tr', this.headers?.map(header => this.genHeader(header)) || []),
     ])
   },
 })

package/src/components/VDataTable/VVirtualTable.ts

@@ -98,7 +98,7 @@ export default baseMixins.extend({
     this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
   },
 

package/src/components/VDataTable/mixins/header.ts

@@ -3,18 +3,18 @@ import VIcon from '../../VIcon'
 import VSimpleCheckbox from '../../VCheckbox/VSimpleCheckbox'
 import ripple from '../../../directives/ripple'
 
-import {defineComponent, h} from 'vue'
+import { defineComponent, h } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import mixins from '../../../util/mixins'
 import { DataOptions, DataTableHeader } from 'vuetify/types'
 
 type VDataTableInstance = InstanceType<typeof VDataTable>
 
-interface options extends Vue {
+interface HeaderOptions {
   dataTable: VDataTableInstance
 }
 
-export default mixins<options>().extend({
+export default mixins<HeaderOptions>().extend({
   // https://github.com/vuejs/vue/issues/6872
   directives: {
     ripple,
@@ -53,10 +53,10 @@ export default mixins<options>().extend({
   methods: {
     genSelectAll () {
       const data = {
-        value: this.everyItem,
+        modelValue: this.everyItem,
         indeterminate: !this.everyItem && this.someItems,
-        color: this.checkboxColor ?? ''
-        onInput: (v: boolean) => this.$emit('toggle-select-all', v),
+        color: this.checkboxColor ?? '',
+        onInput: (v: boolean) => this.$emit('toggle-select-all', v)
       }
 
       if (this.$slots['data-table-select']) {

package/src/components/VDatePicker/VDatePicker.ts

@@ -290,7 +290,7 @@ export default mixins(
         const output = this.multipleValue
           .map((val: string) => sanitizeDateString(val, type))
           .filter(this.isDateAllowed)
-        this.$emit('input', this.isMultiple ? output : output[0])
+        this.$emit('update:modelValue', this.isMultiple ? output : output[0])
       }
     },
   },
@@ -308,10 +308,10 @@ export default mixins(
     emitInput (newInput: string) {
       if (this.range) {
         if (this.multipleValue.length !== 1) {
-          this.$emit('input', [newInput])
+          this.$emit('update:modelValue', [newInput])
         } else {
           const output = [this.multipleValue[0], newInput]
-          this.$emit('input', output)
+          this.$emit('update:modelValue', output)
           this.$emit('change', output)
         }
         return
@@ -325,7 +325,7 @@ export default mixins(
         )
         : newInput
 
-      this.$emit('input', output)
+      this.$emit('update:modelValue', output)
       this.multiple || this.$emit('change', newInput)
     },
     checkMultipleProp () {
@@ -348,7 +348,7 @@ export default mixins(
       }
       this.internalActivePicker = 'MONTH'
       if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
-        this.$emit('input', this.inputDate)
+        this.$emit('update:modelValue', this.inputDate)
       }
     },
     monthClick (value: string) {
@@ -365,7 +365,7 @@ export default mixins(
         this.tableDate = value
         this.internalActivePicker = 'DATE'
         if (this.reactive && !this.readonly && !this.isMultiple && this.isDateAllowed(this.inputDate)) {
-          this.$emit('input', this.inputDate)
+          this.$emit('update:modelValue', this.inputDate)
         }
       } else {
         this.emitInput(this.inputDate)

package/src/components/VDialog/VDialog.ts

@@ -137,7 +137,7 @@ export default baseMixins.extend({
     })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (typeof window !== 'undefined') this.unbind()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -55,7 +55,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerContent(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterContent()
   },
 

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -72,7 +72,7 @@ export default baseMixins.extend({
     this.expansionPanel.registerHeader(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.expansionPanel.unregisterHeader()
   },
 

package/src/components/VForm/VForm.ts

@@ -62,12 +62,12 @@ export default mixins(
     watchInput (input: any): Watchers {
       const watcher = (input: any): (() => void) => {
         return input.$watch('hasError', (val: boolean) => {
-          this.errorBag[input._uid] = val
+          this.errorBag[input.$.uid] = val
         }, { immediate: true })
       }
 
       const watchers: Watchers = {
-        _uid: input._uid,
+        _uid: input.$.uid,
         valid: () => {},
         shouldValidate: () => {},
       }
@@ -78,7 +78,7 @@ export default mixins(
           if (!val) return
 
           // Only watch if we're not already doing it
-          if (this.errorBag.hasOwnProperty(input._uid)) return
+          if (this.errorBag.hasOwnProperty(input.$.uid)) return
 
           watchers.valid = watcher(input)
         })
@@ -115,19 +115,19 @@ export default mixins(
       this.watchers.push(this.watchInput(input))
     },
     unregister (input: VInputInstance) {
-      const found = this.inputs.find(i => i._uid === input._uid)
+      const found = this.inputs.find(i => i.$.uid === input.$.uid)
 
       if (!found) return
 
-      const unwatch = this.watchers.find(i => i._uid === found._uid)
+      const unwatch = this.watchers.find(i => i._uid === found.$.uid)
       if (unwatch) {
         unwatch.valid()
         unwatch.shouldValidate()
       }
 
-      this.watchers = this.watchers.filter(i => i._uid !== found._uid)
-      this.inputs = this.inputs.filter(i => i._uid !== found._uid)
-      this.$delete(this.errorBag, found._uid)
+      this.watchers = this.watchers.filter(i => i._uid !== found.$.uid)
+      this.inputs = this.inputs.filter(i => i.$.uid !== found.$.uid)
+      delete this.errorBag[found.$.uid]
     },
   },
 

package/src/components/VGrid/VCol.ts

@@ -68,7 +68,7 @@ const cache = new Map<string, any[]>()
 
 export default defineComponent({
   name: 'v-col',
-  functional: true,
+  inheritAttrs: false,
   props: {
     cols: {
       type: [Boolean, String, Number],
@@ -134,6 +134,6 @@ export default defineComponent({
       cache.set(cacheKey, classList)
     }
 
-    return h(props.tag, mergeData(data, { class: classList }), children)
+    return h(props.tag, mergeData({ class: classList }, data), children)
   },
 })

package/src/components/VGrid/VContainer.ts

@@ -60,7 +60,7 @@ export default defineComponent({
           'container--fluid': this.fluid,
         }).concat(classes || []).concat('container'),
       }),
-      this.$slots.default()
+      this.$slots.default?.()
     )
   },
 })

package/src/components/VImg/VImg.ts

@@ -244,7 +244,7 @@ export default mixins(
       let content: VNode = VResponsive.methods.genContent.call(this)
 
       if (this.naturalWidth) {
-        content = h(content.type, mergeProps(content.data!, {
+        content = h(content.type, mergeProps(content.props, {
           style: { width: `${this.naturalWidth}px` },
         }), content.children)
       }

package/src/components/VInput/VInput.ts

@@ -134,7 +134,7 @@ export default baseMixins.extend({
   },
 
   watch: {
-    value (val) {
+    modelValue (val) {
       this.lazyValue = val
     },
   },