feat(CollapseItem): add toggle method (#7281)

* feat(CollapseItem): add toggle method

* chore: update doc

src/address-edit/README.md

@@ -112,7 +112,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call instance methods.
 
 | Name             | Description        | Attribute             | Return value |
 | ---------------- | ------------------ | --------------------- | ------------ |

src/address-edit/README.zh-CN.md

@@ -112,7 +112,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 AddressEdit 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名           | 说明         | 参数                  | 返回值 |
 | ---------------- | ------------ | --------------------- | ------ |

src/area/README.md

@@ -89,7 +89,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Area instance and call instance methods.
 
 | Name  | Description               | Attribute     | Return value |
 | ----- | ------------------------- | ------------- | ------------ |

src/area/README.zh-CN.md

@@ -89,7 +89,7 @@ Vue.use(Area);
 
 ### 方法
 
-通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Area 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/calendar/README.md

@@ -312,7 +312,7 @@ Following props are supported when the type is multiple
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call instance methods.
 
 | Name  | Description                         | Attribute | Return value |
 | ----- | ----------------------------------- | --------- | ------------ |

src/calendar/README.zh-CN.md

@@ -316,7 +316,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Calendar 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明                   | 参数 | 返回值 |
 | ------ | ---------------------- | ---- | ------ |

src/checkbox/README.md

@@ -255,7 +255,7 @@ export default {
 
 ### CheckboxGroup Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
@@ -263,7 +263,7 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call
 
 ### Checkbox Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call instance methods.
 
 | Name   | Description         | Attribute           | Return value |
 | ------ | ------------------- | ------------------- | ------------ |

src/checkbox/README.zh-CN.md

@@ -275,7 +275,7 @@ export default {
 
 ### CheckboxGroup 方法
 
-通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
@@ -283,7 +283,7 @@ export default {
 
 ### Checkbox 方法
 
-通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/collapse-item/index.js

@@ -105,15 +105,17 @@ export default createComponent({
 
   methods: {
     onClick() {
-      if (this.disabled) {
-        return;
+      if (!this.disabled) {
+        this.toggle();
       }
+    },
 
+    // @exposed-api
+    toggle(expanded = !this.expanded) {
       const { parent, currentName } = this;
       const close = parent.accordion && currentName === parent.value;
       const name = close ? '' : currentName;
-
-      parent.switch(name, !this.expanded);
+      this.parent.switch(name, expanded);
     },
 
     onTransitionEnd() {

src/collapse/README.md

@@ -126,3 +126,11 @@ export default {
 | icon       | Custom icon       |
 | title      | Custom title      |
 | right-icon | Custom right icon |
+
+### CollapseItem Methods
+
+Use [ref](https://vuejs.org/v2/api/#ref) to get CollapseItem instance and call instance methods.
+
+| Name | Description | Attribute | Return value |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |

src/collapse/README.zh-CN.md

@@ -117,10 +117,18 @@ export default {
 
 ### CollapseItem Slots
 
-| 名称       | 说明                          |
-| ---------- | ----------------------------- |
-| default    | 面板内容                      |
-| value      | 自定义显示内容                |
-| icon       | 自定义`icon`                  |
-| title      | 自定义`title`                 |
-| right-icon | 自定义右侧按钮，默认是`arrow` |
+| 名称       | 说明                           |
+| ---------- | ------------------------------ |
+| default    | 面板内容                       |
+| value      | 自定义显示内容                 |
+| icon       | 自定义 `icon`                  |
+| title      | 自定义 `title`                 |
+| right-icon | 自定义右侧按钮，默认是 `arrow` |
+
+### CollapseItem 方法
+
+通过 ref 可以获取到 CollapseItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
+
+| 方法名 | 说明 | 参数 | 返回值 |
+| --- | --- | --- | --- |
+| toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |

src/collapse/test/index.spec.js

@@ -144,3 +144,61 @@ test('warn when value type is incorrect', () => {
   expect(error).toHaveBeenCalledTimes(1);
   console.error = originConsoleError;
 });
+
+test('toggle method', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" >
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: [] };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual(['a', 'b']);
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual(['a']);
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual([]);
+
+      done();
+    },
+  });
+});
+
+test('toggle method in accordion mode', (done) => {
+  mount({
+    template: `
+    <van-collapse v-model="active" accordion>
+      <van-collapse-item name="a" ref="a" />
+      <van-collapse-item name="b" ref="b" />
+    </van-collapse>
+  `,
+    data() {
+      return { active: '' };
+    },
+    mounted() {
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      this.$refs.b.toggle();
+      expect(this.active).toEqual('b');
+
+      this.$refs.b.toggle(false);
+      expect(this.active).toEqual('');
+
+      this.$refs.a.toggle();
+      expect(this.active).toEqual('a');
+
+      done();
+    },
+  });
+});

src/count-down/README.md

@@ -156,7 +156,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call instance methods.
 
 | Name  | Description      | Attribute | Return value |
 | ----- | ---------------- | --------- | ------------ |

src/count-down/README.zh-CN.md

@@ -166,7 +166,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/datetime-picker/README.md

@@ -294,7 +294,7 @@ Following props are supported when the type is time
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods.
 
 | Name               | Description         | Attribute | Return value |
 | ------------------ | ------------------- | --------- | ------------ |

src/datetime-picker/README.zh-CN.md

@@ -303,7 +303,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/dropdown-menu/README.md

@@ -163,11 +163,11 @@ Use `active-color` prop to custom active color of the title and options.
 
 ### DropdownItem Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call instance methods.
 
-| Name   | Description    | Attribute     | Return value |
-| ------ | -------------- | ------------- | ------------ |
-| toggle | Toggle display | show: boolean | -            |
+| Name   | Description    | Attribute       | Return value |
+| ------ | -------------- | --------------- | ------------ |
+| toggle | Toggle display | _show: boolean_ | -            |
 
 ### Data Structure of Option
 

src/dropdown-menu/README.zh-CN.md

@@ -167,11 +167,11 @@ export default {
 
 ### DropdownItem 方法
 
-通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - |
+| toggle | 切换菜单展示状态，传 `true` 为显示，`false` 为隐藏，不传参为取反 | _show?: boolean_ | - |
 
 ### Option 数据结构
 

src/field/README.md

@@ -270,7 +270,7 @@ Field support all native events of input tag
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance methods.
 
 | Name  | Description         | Attribute | Return value |
 | ----- | ------------------- | --------- | ------------ |

src/field/README.zh-CN.md

@@ -295,7 +295,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Field 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明           | 参数 | 返回值 |
 | ------ | -------------- | ---- | ------ |

src/form/README.md

@@ -467,7 +467,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Form instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/form/README.zh-CN.md

@@ -508,7 +508,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Form 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/list/README.md

@@ -162,7 +162,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance methods.
 
 | Name  | Description           | Attribute | Return value |
 | ----- | --------------------- | --------- | ------------ |

src/list/README.zh-CN.md

@@ -177,7 +177,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 List 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/picker/README.md

@@ -287,7 +287,7 @@ Picker events will pass different parameters according to the columns are single
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/picker/README.zh-CN.md

@@ -312,7 +312,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Picker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/sku/README.md

@@ -157,7 +157,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Sku instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/sku/README.zh-CN.md

@@ -162,7 +162,7 @@ export default {
 
 ### 方法
 
-通过 ref 可以获取到 Sku 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Sku 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名                    | 说明                   | 参数 | 返回值  |
 | ------------------------- | ---------------------- | ---- | ------- |

src/swipe-cell/README.md

@@ -131,7 +131,7 @@ export default {
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call instance methods.
 
 | Name  | Description     | Attribute                | Return value |
 | ----- | --------------- | ------------------------ | ------------ |

src/swipe-cell/README.zh-CN.md

@@ -141,7 +141,7 @@ beforeClose 的第一个参数为对象，对象中包含以下属性：
 
 ### 方法
 
-通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 SwipeCell 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明             | 参数                     | 返回值 |
 | ------ | ---------------- | ------------------------ | ------ |

src/swipe/README.md

@@ -187,7 +187,7 @@ export default {
 
 ### Swipe Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods.
+Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance methods..
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/swipe/README.zh-CN.md

@@ -193,7 +193,7 @@ export default {
 
 ### Swipe 方法
 
-通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
+通过 ref 可以获取到 Swipe 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/tab/README.md

@@ -265,7 +265,7 @@ export default {
 
 ### Tabs Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/tab/README.zh-CN.md

@@ -273,7 +273,7 @@ export default {
 
 ### Tabs 方法
 
-通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Tabs 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

src/uploader/README.md

@@ -253,7 +253,7 @@ Use `disabled` prop to disable uploader.
 
 ### Methods
 
-Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods
+Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call instance methods.
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |

src/uploader/README.zh-CN.md

@@ -281,7 +281,7 @@ before-read、after-read、before-delete 执行时会传递以下回调参数：
 
 ### 方法
 
-通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)
+通过 ref 可以获取到 Uploader 实例并调用实例方法，详见[组件实例方法](#/zh-CN/quickstart#zu-jian-shi-li-fang-fa)。
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |

types/collapse-item.d.ts

@@ -0,0 +1,5 @@
+import { VanComponent } from './component';
+
+export class CollapseItem extends VanComponent {
+  toggle(expanded?: boolean): void;
+}

types/index.d.ts

@@ -6,6 +6,7 @@ import { Area } from './area';
 import { Calendar } from './calendar';
 import { Checkbox } from './checkbox';
 import { CheckboxGroup } from './checkbox-group';
+import { CollapseItem } from './collapse-item';
 import { CountDown } from './count-down';
 import { DatetimePicker } from './datetime-picker';
 import { Dialog } from './dialog';
@@ -37,7 +38,6 @@ export class CellGroup extends VanComponent {}
 export class Circle extends VanComponent {}
 export class Col extends VanComponent {}
 export class Collapse extends VanComponent {}
-export class CollapseItem extends VanComponent {}
 export class ContactCard extends VanComponent {}
 export class ContactEdit extends VanComponent {}
 export class ContactList extends VanComponent {}
@@ -97,6 +97,7 @@ export {
   Calendar,
   Checkbox,
   CheckboxGroup,
+  CollapseItem,
   CountDown,
   DatetimePicker,
   Dialog,