Group.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. import _toConsumableArray from 'babel-runtime/helpers/toConsumableArray';
  2. import _extends from 'babel-runtime/helpers/extends';
  3. import PropTypes from '../_util/vue-types';
  4. import Checkbox from './Checkbox';
  5. import hasProp from '../_util/props-util';
  6. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  7. function noop() {}
  8. export default {
  9. name: 'ACheckboxGroup',
  10. model: {
  11. prop: 'value'
  12. },
  13. props: {
  14. name: PropTypes.string,
  15. prefixCls: PropTypes.string,
  16. defaultValue: PropTypes.array,
  17. value: PropTypes.array,
  18. options: PropTypes.array.def([]),
  19. disabled: PropTypes.bool
  20. },
  21. provide: function provide() {
  22. return {
  23. checkboxGroupContext: this
  24. };
  25. },
  26. inject: {
  27. configProvider: { 'default': function _default() {
  28. return ConfigConsumerProps;
  29. } }
  30. },
  31. data: function data() {
  32. var value = this.value,
  33. defaultValue = this.defaultValue;
  34. return {
  35. sValue: value || defaultValue || [],
  36. registeredValues: []
  37. };
  38. },
  39. watch: {
  40. value: function value(val) {
  41. this.sValue = val || [];
  42. }
  43. },
  44. methods: {
  45. getOptions: function getOptions() {
  46. var options = this.options,
  47. $scopedSlots = this.$scopedSlots;
  48. return options.map(function (option) {
  49. if (typeof option === 'string') {
  50. return {
  51. label: option,
  52. value: option
  53. };
  54. }
  55. var label = option.label;
  56. if (label === undefined && $scopedSlots.label) {
  57. label = $scopedSlots.label(option);
  58. }
  59. return _extends({}, option, { label: label });
  60. });
  61. },
  62. cancelValue: function cancelValue(value) {
  63. this.registeredValues = this.registeredValues.filter(function (val) {
  64. return val !== value;
  65. });
  66. },
  67. registerValue: function registerValue(value) {
  68. this.registeredValues = [].concat(_toConsumableArray(this.registeredValues), [value]);
  69. },
  70. toggleOption: function toggleOption(option) {
  71. var registeredValues = this.registeredValues;
  72. var optionIndex = this.sValue.indexOf(option.value);
  73. var value = [].concat(_toConsumableArray(this.sValue));
  74. if (optionIndex === -1) {
  75. value.push(option.value);
  76. } else {
  77. value.splice(optionIndex, 1);
  78. }
  79. if (!hasProp(this, 'value')) {
  80. this.sValue = value;
  81. }
  82. var options = this.getOptions();
  83. var val = value.filter(function (val) {
  84. return registeredValues.indexOf(val) !== -1;
  85. }).sort(function (a, b) {
  86. var indexA = options.findIndex(function (opt) {
  87. return opt.value === a;
  88. });
  89. var indexB = options.findIndex(function (opt) {
  90. return opt.value === b;
  91. });
  92. return indexA - indexB;
  93. });
  94. this.$emit('input', val);
  95. this.$emit('change', val);
  96. }
  97. },
  98. render: function render() {
  99. var h = arguments[0];
  100. var props = this.$props,
  101. state = this.$data,
  102. $slots = this.$slots;
  103. var customizePrefixCls = props.prefixCls,
  104. options = props.options;
  105. var getPrefixCls = this.configProvider.getPrefixCls;
  106. var prefixCls = getPrefixCls('checkbox', customizePrefixCls);
  107. var children = $slots['default'];
  108. var groupPrefixCls = prefixCls + '-group';
  109. if (options && options.length > 0) {
  110. children = this.getOptions().map(function (option) {
  111. return h(
  112. Checkbox,
  113. {
  114. attrs: {
  115. prefixCls: prefixCls,
  116. disabled: 'disabled' in option ? option.disabled : props.disabled,
  117. indeterminate: option.indeterminate,
  118. value: option.value,
  119. checked: state.sValue.indexOf(option.value) !== -1
  120. },
  121. key: option.value.toString(), on: {
  122. 'change': option.onChange || noop
  123. },
  124. 'class': groupPrefixCls + '-item'
  125. },
  126. [option.label]
  127. );
  128. });
  129. }
  130. return h(
  131. 'div',
  132. { 'class': groupPrefixCls },
  133. [children]
  134. );
  135. }
  136. };