feat(CollapseItem): add readonly prop (#8445)

src/collapse/README.md

@@ -132,6 +132,7 @@ export default {
 | label | Description below the title | _string_ | - |
 | border | Whether to show inner border | _boolean_ | `true` |
 | disabled | Whether to disabled collapse | _boolean_ | `false` |
+| readonly `v3.0.12` | Whether to be readonly | _boolean_ | `false` |
 | is-link | Whether to show link icon | _boolean_ | `true` |
 | title-class | Title className | _string_ | - |
 | value-class | Value className | _string_ | - |

src/collapse/README.zh-CN.md

@@ -135,6 +135,7 @@ export default {
 | border | 是否显示内边框 | _boolean_ | `true` |
 | is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` |
 | disabled | 是否禁用面板 | _boolean_ | `false` |
+| readonly `v3.0.12` | 是否为只读状态，只读状态下无法操作面板 | _boolean_ | `false` |
 | title-class | 左侧标题额外类名 | _string_ | - |
 | value-class | 右侧内容额外类名 | _string_ | - |
 | label-class | 描述信息额外类名 | _string_ | - |

src/collapse/test/__snapshots__/demo.spec.ts.snap

@@ -8,7 +8,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="true"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -29,7 +28,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -45,7 +43,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -65,7 +62,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="true"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -86,7 +82,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -102,7 +97,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -122,7 +116,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           <span>
@@ -134,11 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-collapse-item van-collapse-item--border">
-      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
+      <div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
            role="button"
-           tabindex="-1"
            aria-expanded="false"
-           disabled="true"
       >
         <div class="van-cell__title">
           <span>
@@ -150,11 +141,9 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
     </div>
     <div class="van-collapse-item van-collapse-item--border">
-      <div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
+      <div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
            role="button"
-           tabindex="-1"
            aria-expanded="false"
-           disabled="true"
       >
         <div class="van-cell__title">
           <span>
@@ -174,7 +163,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <div class="van-cell__title">
           Title1
@@ -190,7 +178,6 @@ exports[`should render demo and match snapshot 1`] = `
            role="button"
            tabindex="0"
            aria-expanded="false"
-           disabled="false"
       >
         <i class="van-badge__wrapper van-icon van-icon-shop-o van-cell__left-icon">
         </i>

src/collapse/test/__snapshots__/index.spec.tsx.snap

@@ -7,7 +7,6 @@ exports[`should render slots of CollapseItem correctly 1`] = `
          role="button"
          tabindex="0"
          aria-expanded="false"
-         disabled="false"
     >
       this is icon
       <div class="van-cell__title">

src/collapse/test/index.spec.tsx

@@ -207,3 +207,31 @@ test('should toggle collapse after calling the toggle method in accordion mode',
   wrapper.vm.itemA.toggle();
   expect(wrapper.vm.active).toEqual('a');
 });
+
+test('should be readonly when using readonly prop', async () => {
+  const wrapper = mount({
+    data() {
+      return {
+        active: [],
+      };
+    },
+    render() {
+      return (
+        <Collapse v-model={this.active}>
+          <CollapseItem title="a" readonly>
+            content
+          </CollapseItem>
+        </Collapse>
+      );
+    },
+  });
+
+  const titles = wrapper.findAll('.van-collapse-item__title');
+  await titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual([]);
+  expect(wrapper.find('.van-collapse-item__title').classes()).not.toContain(
+    'van-cell--clickable'
+  );
+
+  wrapper.unmount();
+});