139 lines
3.7 KiB
JavaScript
139 lines
3.7 KiB
JavaScript
/**
|
|
* Common part of Checkbox & Radio
|
|
*/
|
|
import Icon from '../icon';
|
|
import { FieldMixin } from './field';
|
|
import { ChildrenMixin } from './relation';
|
|
import { addUnit } from '../utils';
|
|
export var CheckboxMixin = function CheckboxMixin(_ref) {
|
|
var parent = _ref.parent,
|
|
bem = _ref.bem,
|
|
role = _ref.role;
|
|
return {
|
|
mixins: [ChildrenMixin(parent), FieldMixin],
|
|
props: {
|
|
name: null,
|
|
value: null,
|
|
disabled: Boolean,
|
|
iconSize: [Number, String],
|
|
checkedColor: String,
|
|
labelPosition: String,
|
|
labelDisabled: Boolean,
|
|
shape: {
|
|
type: String,
|
|
default: 'round'
|
|
},
|
|
bindGroup: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
computed: {
|
|
disableBindRelation: function disableBindRelation() {
|
|
return !this.bindGroup;
|
|
},
|
|
isDisabled: function isDisabled() {
|
|
return this.parent && this.parent.disabled || this.disabled;
|
|
},
|
|
direction: function direction() {
|
|
return this.parent && this.parent.direction || null;
|
|
},
|
|
iconStyle: function iconStyle() {
|
|
var checkedColor = this.checkedColor || this.parent && this.parent.checkedColor;
|
|
|
|
if (checkedColor && this.checked && !this.isDisabled) {
|
|
return {
|
|
borderColor: checkedColor,
|
|
backgroundColor: checkedColor
|
|
};
|
|
}
|
|
},
|
|
tabindex: function tabindex() {
|
|
if (this.isDisabled || role === 'radio' && !this.checked) {
|
|
return -1;
|
|
}
|
|
|
|
return 0;
|
|
}
|
|
},
|
|
methods: {
|
|
onClick: function onClick(event) {
|
|
var _this = this;
|
|
|
|
var target = event.target;
|
|
var icon = this.$refs.icon;
|
|
var iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
|
|
|
|
if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
|
|
this.toggle(); // wait for toggle method to complete
|
|
// so we can get the changed value in the click event listener
|
|
|
|
setTimeout(function () {
|
|
_this.$emit('click', event);
|
|
});
|
|
} else {
|
|
this.$emit('click', event);
|
|
}
|
|
},
|
|
genIcon: function genIcon() {
|
|
var h = this.$createElement;
|
|
var checked = this.checked;
|
|
var iconSize = this.iconSize || this.parent && this.parent.iconSize;
|
|
return h("div", {
|
|
"ref": "icon",
|
|
"class": bem('icon', [this.shape, {
|
|
disabled: this.isDisabled,
|
|
checked: checked
|
|
}]),
|
|
"style": {
|
|
fontSize: addUnit(iconSize)
|
|
}
|
|
}, [this.slots('icon', {
|
|
checked: checked
|
|
}) || h(Icon, {
|
|
"attrs": {
|
|
"name": "success"
|
|
},
|
|
"style": this.iconStyle
|
|
})]);
|
|
},
|
|
genLabel: function genLabel() {
|
|
var h = this.$createElement;
|
|
var slot = this.slots();
|
|
|
|
if (slot) {
|
|
return h("span", {
|
|
"class": bem('label', [this.labelPosition, {
|
|
disabled: this.isDisabled
|
|
}])
|
|
}, [slot]);
|
|
}
|
|
}
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
var Children = [this.genIcon()];
|
|
|
|
if (this.labelPosition === 'left') {
|
|
Children.unshift(this.genLabel());
|
|
} else {
|
|
Children.push(this.genLabel());
|
|
}
|
|
|
|
return h("div", {
|
|
"attrs": {
|
|
"role": role,
|
|
"tabindex": this.tabindex,
|
|
"aria-checked": String(this.checked)
|
|
},
|
|
"class": bem([{
|
|
disabled: this.isDisabled,
|
|
'label-disabled': this.labelDisabled
|
|
}, this.direction]),
|
|
"on": {
|
|
"click": this.onClick
|
|
}
|
|
}, [Children]);
|
|
}
|
|
};
|
|
}; |