feat(Collapse): collapse add toggleAll method for issues #10818 (#10837)

* feat(Collapse): collapse add toggleAll method for issues #10818

* docs: fix some problems

Co-authored-by: 骆沛 <luopei@11.com>

packages/vant/src/checkbox/README.zh-CN.md

@@ -192,7 +192,6 @@ export default {
   setup() {
     const checked = ref([]);
     const checkboxGroup = ref(null);
-
     const checkAll = () => {
       checkboxGroup.value.toggleAll(true);
     }

packages/vant/src/collapse-item/CollapseItem.tsx

@@ -161,7 +161,7 @@ export default defineComponent({
       </div>
     ));
 
-    useExpose({ toggle });
+    useExpose({ toggle, expanded, itemName: name });
 
     return () => (
       <div class={[bem({ border: index.value && props.border })]}>

packages/vant/src/collapse/Collapse.tsx

@@ -3,6 +3,7 @@ import {
   type PropType,
   type InjectionKey,
   type ExtractPropTypes,
+  type ComponentPublicInstance,
 } from 'vue';
 import {
   truthProp,
@@ -11,6 +12,7 @@ import {
   type Numeric,
 } from '../utils';
 import { useChildren } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
 
 const [name, bem] = createNamespace('collapse');
 
@@ -19,6 +21,13 @@ export type CollapseProvide = {
   isExpanded: (name: Numeric) => boolean;
 };
 
+export type CollapseToggleAllOptions =
+  | boolean
+  | {
+      expanded?: boolean;
+      skipDisabled?: boolean;
+    };
+
 export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol(name);
 
 const collapseProps = {
@@ -32,6 +41,10 @@ const collapseProps = {
 
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
 
+export type CollapseInstance = ComponentPublicInstance<{
+  toggleAll: (options?: boolean | CollapseToggleAllOptions) => void;
+}>;
+
 function validateModelValue(
   modelValue: Numeric | Numeric[],
   accordion: boolean
@@ -59,7 +72,7 @@ export default defineComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const { linkChildren } = useChildren(COLLAPSE_KEY);
+    const { linkChildren, children } = useChildren(COLLAPSE_KEY);
 
     const updateName = (name: Numeric | Numeric[]) => {
       emit('change', name);
@@ -68,7 +81,6 @@ export default defineComponent({
 
     const toggle = (name: Numeric, expanded: boolean) => {
       const { accordion, modelValue } = props;
-
       if (accordion) {
         updateName(name === modelValue ? '' : name);
       } else if (expanded) {
@@ -80,6 +92,24 @@ export default defineComponent({
       }
     };
 
+    const toggleAll = (options: boolean | CollapseToggleAllOptions = {}) => {
+      if (props.accordion) {
+        return;
+      }
+      if (typeof options === 'boolean') {
+        options = { expanded: options };
+      }
+      const { expanded, skipDisabled } = options!;
+      const expandedChildren = children.filter((item: any) => {
+        if (item.disabled && skipDisabled) {
+          return item.expanded.value;
+        }
+        return expanded ?? !item.expanded.value;
+      });
+      const names = expandedChildren.map((item) => item.itemName.value);
+      updateName(names);
+    };
+
     const isExpanded = (name: Numeric) => {
       const { accordion, modelValue } = props;
 
@@ -94,7 +124,7 @@ export default defineComponent({
         ? modelValue === name
         : (modelValue as Numeric[]).includes(name);
     };
-
+    useExpose({ toggleAll });
     linkChildren({ toggle, isExpanded });
 
     return () => (

packages/vant/src/collapse/README.md

@@ -108,6 +108,46 @@ export default {
 };
 ```
 
+### Toggle All
+
+通过 `Collapse` 实例上的 `toggleAll` 方法可以实现全选与反选。
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
+  <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
+  <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
+</van-collapse>
+
+<van-button type="primary" @click="openAll">openAll</van-button>
+<van-button type="primary" @click="toggleAll">toggleAll</van-button>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const activeNames = ref(['1']);
+    const collapse = ref(null);
+
+    const openAll = () => {
+      collapse.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      collapse.value.toggleAll();
+    },
+
+    return {
+      activeNames,
+      openAll,
+      toggleAll,
+      collapse,
+    };
+  },
+};
+```
+
 ## API
 
 ### Collapse Props
@@ -143,6 +183,37 @@ export default {
 | value-class | Value className | _string_ | - |
 | label-class | Label className | _string_ | - |
 
+### Collapse Methods
+
+Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collapse instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| toggleAll | Toggle expanded status of all collapses | _options?: boolean \| object_ | - |
+
+### toggleAll Usage
+
+```js
+const { collapse } = this.$refs;
+
+// Toggle all
+collapse.toggleAll();
+// Expand all
+collapse.toggleAll(true);
+// UnExpand all
+collapse.toggleAll(false);
+
+// Toggle all, skip disabled
+collapse.toggleAll({
+  skipDisabled: true,
+});
+// Expand all, skip disabled
+collapse.toggleAll({
+  expanded: true,
+  skipDisabled: true,
+});
+```
+
 ### CollapseItem Methods
 
 Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CollapseItem instance and call instance methods.
@@ -160,6 +231,7 @@ import type {
   CollapseProps,
   CollapseItemProps,
   CollapseItemInstance,
+  CollapseToggleAllOptions,
 } from 'vant';
 ```
 

packages/vant/src/collapse/README.zh-CN.md

@@ -124,6 +124,52 @@ export default {
 };
 ```
 
+### 全部展开与全部切换
+
+通过 `Collapse` 实例上的 `toggleAll` 方法可以实现全部展开与全部切换。
+
+```html
+<van-collapse v-model="activeNames">
+  <van-collapse-item title="标题1" name="1">
+    代码是写出来给人看的，附带能在机器上运行。
+  </van-collapse-item>
+  <van-collapse-item title="标题2" name="2">
+    技术无非就是那些开发它的人的共同灵魂。
+  </van-collapse-item>
+  <van-collapse-item title="标题3" name="3">
+    在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
+  </van-collapse-item>
+</van-collapse>
+
+<van-button type="primary" @click="openAll">全部展开</van-button>
+<van-button type="primary" @click="toggleAll">全部切换</van-button>
+```
+
+```js
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const activeNames = ref(['1']);
+    const collapse = ref(null);
+
+    const openAll = () => {
+      collapse.value.toggleAll(true);
+    }
+    const toggleAll = () => {
+      collapse.value.toggleAll();
+    },
+
+    return {
+      activeNames,
+      openAll,
+      toggleAll,
+      collapse,
+    };
+  },
+};
+```
+
 ## API
 
 ### Collapse Props
@@ -159,6 +205,37 @@ export default {
 | value-class | 右侧内容额外类名 | _string_ | - |
 | label-class | 描述信息额外类名 | _string_ | - |
 
+### Collapse 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggleAll | 切换所有面板展开状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - |
+
+### toggleAll 方法示例
+
+```js
+const { collapse } = this.$refs;
+
+// 全部切换
+collapse.toggleAll();
+// 全部展开
+collapse.toggleAll(true);
+// 全部收起
+collapse.toggleAll(false);
+
+// 全部全部切换，并跳过禁用的复选框
+collapse.toggleAll({
+  skipDisabled: true,
+});
+// 全部选中，并跳过禁用的复选框
+collapse.toggleAll({
+  expanded: true,
+  skipDisabled: true,
+});
+```
+
 ### CollapseItem 方法
 
 通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
@@ -176,6 +253,7 @@ import type {
   CollapseProps,
   CollapseItemProps,
   CollapseItemInstance,
+  CollapseToggleAllOptions,
 } from 'vant';
 ```
 

packages/vant/src/collapse/demo/index.vue

@@ -2,8 +2,10 @@
 import VanCollapse from '..';
 import VanCollapseItem from '../../collapse-item';
 import VanIcon from '../../icon';
+import VanButton from '../../button';
 import { ref } from 'vue';
 import { useTranslate } from '../../../docs/site';
+import type { CollapseInstance } from '../Collapse';
 
 const t = useTranslate({
   'zh-CN': {
@@ -12,6 +14,9 @@ const t = useTranslate({
     text3: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
     accordion: '手风琴',
     titleSlot: '自定义标题内容',
+    toggleAll: '全部展开与全部切换',
+    openAll: '全部展开',
+    inverse: '全部切换',
   },
   'en-US': {
     text1: 'Content 1',
@@ -19,6 +24,9 @@ const t = useTranslate({
     text3: 'Content 3',
     accordion: 'Accordion',
     titleSlot: 'Custom title',
+    toggleAll: 'Toggle All',
+    openAll: 'Open All',
+    inverse: 'Toggle All',
   },
 });
 
@@ -26,6 +34,16 @@ const active1 = ref([0]);
 const active2 = ref(0);
 const active3 = ref([]);
 const active4 = ref([]);
+const active5 = ref(['1']);
+
+const collapse = ref<CollapseInstance>();
+
+const openAll = () => {
+  collapse.value?.toggleAll?.(true);
+};
+const toggleAll = () => {
+  collapse.value?.toggleAll?.();
+};
 </script>
 
 <template>
@@ -88,6 +106,29 @@ const active4 = ref([]);
       </van-collapse-item>
     </van-collapse>
   </demo-block>
+
+  <demo-block :title="t('toggleAll')">
+    <van-collapse v-model="active5" ref="collapse">
+      <van-collapse-item :title="t('title') + 1" name="1">
+        {{ t('text1') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 2" name="2">
+        {{ t('text2') }}
+      </van-collapse-item>
+      <van-collapse-item :title="t('title') + 3" name="3">
+        {{ t('text3') }}
+      </van-collapse-item>
+    </van-collapse>
+
+    <div class="demo-collapse-buttons">
+      <van-button type="primary" @click="openAll">
+        {{ t('openAll') }}
+      </van-button>
+      <van-button type="primary" @click="toggleAll">
+        {{ t('inverse') }}
+      </van-button>
+    </div>
+  </demo-block>
 </template>
 
 <style lang="less">
@@ -98,5 +139,13 @@ const active4 = ref([]);
     font-size: 15px;
     vertical-align: -3px;
   }
+
+  &-buttons {
+    margin-top: var(--van-padding-md);
+
+    .van-button {
+      margin-left: var(--van-padding-md);
+    }
+  }
 }
 </style>

packages/vant/src/collapse/index.ts

@@ -3,7 +3,7 @@ import _Collapse from './Collapse';
 
 export const Collapse = withInstall(_Collapse);
 export default Collapse;
-export type { CollapseProps } from './Collapse';
+export type { CollapseProps, CollapseToggleAllOptions } from './Collapse';
 
 declare module 'vue' {
   export interface GlobalComponents {