Merge pull request #4 from VladimirIvanin/fix-simple-checkbox

фикс чекбокса

Author: dimailn

packages/vuetify/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()
+        )
+      ]
+    )
   },
 })

packages/vuetify/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)
   })
 })

packages/vuetify/src/components/VDataTable/VDataTable.ts

@@ -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),

packages/vuetify/src/components/VDataTable/VDataTableHeader.ts

@@ -20,21 +20,22 @@ import {defineComponent, h} from 'vue'
 export default defineComponent({
   name: 'v-data-table-header',
 
-  functional: true,
-
   props: {
     ...header.props,
     mobile: Boolean,
   },
 
   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)

packages/vuetify/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)) || []),
     ])
   },
 })

packages/vuetify/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,7 +53,7 @@ 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)

packages/vuetify/src/components/VSelect/VSelectList.ts

@@ -90,7 +90,7 @@ export default mixins(Colorable, Themeable).extend({
       return h(VListItemAction, [
         h(VSimpleCheckbox, {
           color: this.color,
-          value: inputValue,
+          modelValue: inputValue,
           ripple: false,
           onInput: () => this.$emit('select', item)
         }),

packages/vuetify/src/mixins/selectable/index.ts

@@ -7,10 +7,12 @@ import Comparable from '../comparable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import {h} from 'vue'
+import { h } from 'vue'
 
 export function prevent (e: Event) {
   e.preventDefault()
+  // всплытие провоцирует двойной onChange
+  e.stopPropagation()
 }
 
 /* @vue/component */