Group.js 4.3 KB

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