feat(CheckboxGroup): toggleAll support skipDisabled option (#7644)

src/checkbox-group/index.js

@@ -27,16 +27,19 @@ export default createComponent({
 
   methods: {
     // @exposed-api
-    toggleAll(checked) {
-      if (checked === false) {
-        this.$emit('input', []);
-        return;
+    toggleAll(options = {}) {
+      if (typeof options === 'boolean') {
+        options = { checked: options };
       }
 
-      let { children } = this;
-      if (!checked) {
-        children = children.filter((item) => !item.checked);
-      }
+      const { checked, skipDisabled } = options;
+
+      const children = this.children.filter((item) => {
+        if (item.disabled && skipDisabled) {
+          return item.checked;
+        }
+        return checked ?? !item.checked;
+      });
 
       const names = children.map((item) => item.name);
       this.$emit('input', names);

src/checkbox/README.md

@@ -259,7 +259,30 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
-| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
+| toggleAll | Toggle check status of all checkboxes | _options?: boolean \| object_ | - |
+
+### toggleAll Usage
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// Toggle all
+checkboxGroup.toggleAll();
+// Select all
+checkboxGroup.toggleAll(true);
+// Unselect all
+checkboxGroup.toggleAll(false);
+
+// Toggle all, skip disabled
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// Select all, skip disabled
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox Methods
 

src/checkbox/README.zh-CN.md

@@ -242,7 +242,7 @@ export default {
 | disabled        | 是否禁用复选框            | _boolean_          | `false`   |
 | label-disabled  | 是否禁用复选框文本点击    | _boolean_          | `false`   |
 | label-position  | 文本位置，可选值为 `left` | _string_           | `right`   |
-| icon-size       | 图标大小，默认单位为`px`  | _number \| string_ | `20px`    |
+| icon-size       | 图标大小，默认单位为 `px` | _number \| string_ | `20px`    |
 | checked-color   | 选中状态颜色              | _string_           | `#1989fa` |
 | bind-group      | 是否与复选框组绑定        | _boolean_          | `true`    |
 
@@ -253,8 +253,8 @@ export default {
 | v-model (value) | 所有选中项的标识符 | _any[]_ | - |
 | disabled | 是否禁用所有复选框 | _boolean_ | `false` |
 | max | 最大可选数，`0`为无限制 | _number \| string_ | `0` |
-| direction `v2.5.0` | 排列方向，可选值为`horizontal` | _string_ | `vertical` |
-| icon-size | 所有复选框的图标大小，默认单位为`px` | _number \| string_ | `20px` |
+| direction `v2.5.0` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
+| icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
 | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` |
 
 ### Checkbox Events
@@ -283,7 +283,30 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+| toggleAll | 切换所有复选框，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - |
+
+### toggleAll 方法示例
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// 全部反选
+checkboxGroup.toggleAll();
+// 全部选中
+checkboxGroup.toggleAll(true);
+// 全部取消
+checkboxGroup.toggleAll(false);
+
+// 全部反选，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// 全部选中，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox 方法
 
@@ -291,7 +314,7 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+| toggle | 切换选中状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _checked?: boolean_ | - |
 
 ### 样式变量
 

src/checkbox/test/index.spec.js

@@ -160,7 +160,7 @@ test('toggleAll method', async () => {
       <van-checkbox-group v-model="result" ref="group">
         <van-checkbox name="a" />
         <van-checkbox name="b" />
-        <van-checkbox name="c" />
+        <van-checkbox name="c" disabled />
       </van-checkbox-group>
     `,
     data() {
@@ -186,4 +186,12 @@ test('toggleAll method', async () => {
   wrapper.vm.toggleAll(true);
   await later();
   expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
+
+  wrapper.vm.toggleAll({ skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['c']);
+
+  wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
 });

types/checkbox-group.d.ts

@@ -1,5 +1,10 @@
 import { VanComponent } from './component';
 
+export type ToggleAllOptions = {
+  checked?: boolean;
+  skipDisabled?: boolean;
+};
+
 export class CheckboxGroup extends VanComponent {
-  toggleAll(checked?: boolean): void;
+  toggleAll(options?: boolean | ToggleAllOptions): void;
 }