Group.js 4.7 KB

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