123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- /**
- * 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]);
- }
- };
- };
|