checkbox.js 4.0 KB

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