Group.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  3. import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
  4. import { createVNode as _createVNode } from "vue";
  5. import { computed, ref, watch, defineComponent, provide } from 'vue';
  6. import Checkbox from './Checkbox';
  7. import { useInjectFormItemContext } from '../form/FormItemContext';
  8. import useConfigInject from '../_util/hooks/useConfigInject';
  9. import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
  10. export default defineComponent({
  11. compatConfig: {
  12. MODE: 3
  13. },
  14. name: 'ACheckboxGroup',
  15. props: checkboxGroupProps(),
  16. // emits: ['change', 'update:value'],
  17. setup: function setup(props, _ref) {
  18. var slots = _ref.slots,
  19. emit = _ref.emit,
  20. expose = _ref.expose;
  21. var formItemContext = useInjectFormItemContext();
  22. var _useConfigInject = useConfigInject('checkbox', props),
  23. prefixCls = _useConfigInject.prefixCls,
  24. direction = _useConfigInject.direction;
  25. var mergedValue = ref((props.value === undefined ? props.defaultValue : props.value) || []);
  26. watch(function () {
  27. return props.value;
  28. }, function () {
  29. mergedValue.value = props.value || [];
  30. });
  31. var options = computed(function () {
  32. return props.options.map(function (option) {
  33. if (typeof option === 'string' || typeof option === 'number') {
  34. return {
  35. label: option,
  36. value: option
  37. };
  38. }
  39. return option;
  40. });
  41. });
  42. var triggerUpdate = ref(Symbol());
  43. var registeredValuesMap = ref(new Map());
  44. var cancelValue = function cancelValue(id) {
  45. registeredValuesMap.value.delete(id);
  46. triggerUpdate.value = Symbol();
  47. };
  48. var registerValue = function registerValue(id, value) {
  49. registeredValuesMap.value.set(id, value);
  50. triggerUpdate.value = Symbol();
  51. };
  52. var registeredValues = ref(new Map());
  53. watch(triggerUpdate, function () {
  54. var valuseMap = new Map();
  55. var _iterator = _createForOfIteratorHelper(registeredValuesMap.value.values()),
  56. _step;
  57. try {
  58. for (_iterator.s(); !(_step = _iterator.n()).done;) {
  59. var value = _step.value;
  60. valuseMap.set(value, true);
  61. }
  62. } catch (err) {
  63. _iterator.e(err);
  64. } finally {
  65. _iterator.f();
  66. }
  67. registeredValues.value = valuseMap;
  68. });
  69. var toggleOption = function toggleOption(option) {
  70. var optionIndex = mergedValue.value.indexOf(option.value);
  71. var value = _toConsumableArray(mergedValue.value);
  72. if (optionIndex === -1) {
  73. value.push(option.value);
  74. } else {
  75. value.splice(optionIndex, 1);
  76. }
  77. if (props.value === undefined) {
  78. mergedValue.value = value;
  79. }
  80. var val = value.filter(function (val) {
  81. return registeredValues.value.has(val);
  82. }).sort(function (a, b) {
  83. var indexA = options.value.findIndex(function (opt) {
  84. return opt.value === a;
  85. });
  86. var indexB = options.value.findIndex(function (opt) {
  87. return opt.value === b;
  88. });
  89. return indexA - indexB;
  90. });
  91. emit('update:value', val);
  92. emit('change', val);
  93. formItemContext.onFieldChange();
  94. };
  95. provide(CheckboxGroupContextKey, {
  96. cancelValue: cancelValue,
  97. registerValue: registerValue,
  98. toggleOption: toggleOption,
  99. mergedValue: mergedValue,
  100. name: computed(function () {
  101. return props.name;
  102. }),
  103. disabled: computed(function () {
  104. return props.disabled;
  105. })
  106. });
  107. expose({
  108. mergedValue: mergedValue
  109. });
  110. return function () {
  111. var _slots$default;
  112. var _props$id = props.id,
  113. id = _props$id === void 0 ? formItemContext.id.value : _props$id;
  114. var children = null;
  115. var groupPrefixCls = "".concat(prefixCls.value, "-group");
  116. if (options.value && options.value.length > 0) {
  117. children = options.value.map(function (option) {
  118. var _slots$label;
  119. return _createVNode(Checkbox, {
  120. "prefixCls": prefixCls.value,
  121. "key": option.value.toString(),
  122. "disabled": 'disabled' in option ? option.disabled : props.disabled,
  123. "indeterminate": option.indeterminate,
  124. "value": option.value,
  125. "checked": mergedValue.value.indexOf(option.value) !== -1,
  126. "onChange": option.onChange,
  127. "class": "".concat(groupPrefixCls, "-item")
  128. }, {
  129. default: function _default() {
  130. return [option.label === undefined ? (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.call(slots, option) : option.label];
  131. }
  132. });
  133. });
  134. }
  135. return _createVNode("div", {
  136. "class": [groupPrefixCls, _defineProperty({}, "".concat(groupPrefixCls, "-rtl"), direction.value === 'rtl')],
  137. "id": id
  138. }, [children || ((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots))]);
  139. };
  140. }
  141. });