import classNames from 'classnames' import hasProp, { getClass, getStyle } from '../_util/props-util' import PropTypes from '../_util/vue-types' export default { inheritAttrs: false, name: 'ACheckbox', props: { prefixCls: { default: 'ant-checkbox', type: String, }, defaultChecked: Boolean, checked: { type: Boolean, default: undefined }, disabled: Boolean, isGroup: Boolean, value: [String, Number, Boolean], name: String, indeterminate: Boolean, type: PropTypes.string.def('checkbox'), autoFocus: Boolean, }, model: { prop: 'checked', }, inject: { checkboxGroupContext: { default: null }, }, mounted () { this.$nextTick(() => { if (this.autoFocus) { this.$refs.input.focus() } }) }, data () { const { checkboxGroupContext, checked, defaultChecked, value } = this let sChecked if (checkboxGroupContext) { sChecked = checkboxGroupContext.sValue.indexOf(value) !== -1 } else { sChecked = !hasProp(this, 'checked') ? defaultChecked : checked } return { sChecked, } }, computed: { checkboxClass () { const { prefixCls, indeterminate, sChecked, $props, checkboxGroupContext } = this let disabled = $props.disabled if (checkboxGroupContext) { disabled = disabled || checkboxGroupContext.disabled } return { [`${prefixCls}`]: true, [`${prefixCls}-checked`]: sChecked, [`${prefixCls}-disabled`]: disabled, [`${prefixCls}-indeterminate`]: indeterminate, } }, }, methods: { handleChange (event) { const targetChecked = event.target.checked this.$emit('input', targetChecked) const { checked, checkboxGroupContext } = this if ((checked === undefined && !checkboxGroupContext) || (checkboxGroupContext && checkboxGroupContext.sValue === undefined)) { this.sChecked = targetChecked } const target = { ...this.$props, checked: targetChecked, } this.$emit('change', { target, stopPropagation () { event.stopPropagation() }, preventDefault () { event.preventDefault() }, }) }, onMouseEnter (e) { this.$emit('mouseenter', e) }, onMouseLeave (e) { this.$emit('mouseleave', e) }, focus () { this.$refs.input.focus() }, blur () { this.$refs.input.blur() }, onFocus (e) { this.$emit('focus', e) }, onBlur (e) { this.$emit('blur', e) }, }, watch: { checked (val) { this.sChecked = val }, 'checkboxGroupContext.sValue': function (val) { this.sChecked = val.indexOf(this.value) !== -1 }, }, render () { const { $props: props, checkboxGroupContext, checkboxClass, name, $slots, sChecked, onFocus, onBlur, } = this const { prefixCls, } = props let disabled = props.disabled let onChange = this.handleChange if (checkboxGroupContext) { onChange = () => checkboxGroupContext.toggleOption({ value: props.value }) disabled = props.disabled || checkboxGroupContext.disabled } const classString = classNames(getClass(this), { [`${prefixCls}-wrapper`]: true, }) return ( ) }, }