checkbox.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /**
  2. * Common part of Checkbox & Radio
  3. */
  4. import Icon from '../icon';
  5. import { FieldMixin } from './field';
  6. import { ChildrenMixin } from './relation';
  7. import { addUnit } from '../utils';
  8. export var CheckboxMixin = function CheckboxMixin(_ref) {
  9. var parent = _ref.parent,
  10. bem = _ref.bem,
  11. role = _ref.role;
  12. return {
  13. mixins: [ChildrenMixin(parent), FieldMixin],
  14. props: {
  15. name: null,
  16. value: null,
  17. disabled: Boolean,
  18. iconSize: [Number, String],
  19. checkedColor: String,
  20. labelPosition: String,
  21. labelDisabled: Boolean,
  22. shape: {
  23. type: String,
  24. default: 'round'
  25. },
  26. bindGroup: {
  27. type: Boolean,
  28. default: true
  29. }
  30. },
  31. computed: {
  32. disableBindRelation: function disableBindRelation() {
  33. return !this.bindGroup;
  34. },
  35. isDisabled: function isDisabled() {
  36. return this.parent && this.parent.disabled || this.disabled;
  37. },
  38. direction: function direction() {
  39. return this.parent && this.parent.direction || null;
  40. },
  41. iconStyle: function iconStyle() {
  42. var checkedColor = this.checkedColor || this.parent && this.parent.checkedColor;
  43. if (checkedColor && this.checked && !this.isDisabled) {
  44. return {
  45. borderColor: checkedColor,
  46. backgroundColor: checkedColor
  47. };
  48. }
  49. },
  50. tabindex: function tabindex() {
  51. if (this.isDisabled || role === 'radio' && !this.checked) {
  52. return -1;
  53. }
  54. return 0;
  55. }
  56. },
  57. methods: {
  58. onClick: function onClick(event) {
  59. var _this = this;
  60. var target = event.target;
  61. var icon = this.$refs.icon;
  62. var iconClicked = icon === target || (icon == null ? void 0 : icon.contains(target));
  63. if (!this.isDisabled && (iconClicked || !this.labelDisabled)) {
  64. this.toggle(); // wait for toggle method to complete
  65. // so we can get the changed value in the click event listener
  66. setTimeout(function () {
  67. _this.$emit('click', event);
  68. });
  69. } else {
  70. this.$emit('click', event);
  71. }
  72. },
  73. genIcon: function genIcon() {
  74. var h = this.$createElement;
  75. var checked = this.checked;
  76. var iconSize = this.iconSize || this.parent && this.parent.iconSize;
  77. return h("div", {
  78. "ref": "icon",
  79. "class": bem('icon', [this.shape, {
  80. disabled: this.isDisabled,
  81. checked: checked
  82. }]),
  83. "style": {
  84. fontSize: addUnit(iconSize)
  85. }
  86. }, [this.slots('icon', {
  87. checked: checked
  88. }) || h(Icon, {
  89. "attrs": {
  90. "name": "success"
  91. },
  92. "style": this.iconStyle
  93. })]);
  94. },
  95. genLabel: function genLabel() {
  96. var h = this.$createElement;
  97. var slot = this.slots();
  98. if (slot) {
  99. return h("span", {
  100. "class": bem('label', [this.labelPosition, {
  101. disabled: this.isDisabled
  102. }])
  103. }, [slot]);
  104. }
  105. }
  106. },
  107. render: function render() {
  108. var h = arguments[0];
  109. var Children = [this.genIcon()];
  110. if (this.labelPosition === 'left') {
  111. Children.unshift(this.genLabel());
  112. } else {
  113. Children.push(this.genLabel());
  114. }
  115. return h("div", {
  116. "attrs": {
  117. "role": role,
  118. "tabindex": this.tabindex,
  119. "aria-checked": String(this.checked)
  120. },
  121. "class": bem([{
  122. disabled: this.isDisabled,
  123. 'label-disabled': this.labelDisabled
  124. }, this.direction]),
  125. "on": {
  126. "click": this.onClick
  127. }
  128. }, [Children]);
  129. }
  130. };
  131. };