Group.js 4.7 KB

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