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

src/collapse-item/CollapseItem.tsx

@@ -2,7 +2,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
 
 // Utils
 import { cellProps } from '../cell/Cell';
-import { createNamespace } from '../utils';
+import { createNamespace, pick } from '../utils';
 import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
 
 // Composables
@@ -22,6 +22,7 @@ export default defineComponent({
     ...cellProps,
     name: [Number, String],
     disabled: Boolean,
+    readonly: Boolean,
     isLink: {
       type: Boolean,
       default: true,
@@ -94,13 +95,24 @@ export default defineComponent({
     };
 
     const onClickTitle = () => {
-      if (!props.disabled) {
+      if (!props.disabled && !props.readonly) {
         toggle();
       }
     };
 
     const renderTitle = () => {
-      const { border, disabled } = props;
+      const { border, disabled, readonly } = props;
+      const attrs = pick(
+        props,
+        Object.keys(cellProps) as Array<keyof typeof cellProps>
+      );
+
+      if (readonly) {
+        attrs.isLink = false;
+      }
+      if (disabled || readonly) {
+        attrs.clickable = false;
+      }
 
       return (
         <Cell
@@ -116,10 +128,9 @@ export default defineComponent({
             expanded: expanded.value,
             borderless: !border,
           })}
-          tabindex={disabled ? -1 : 0}
           aria-expanded={String(expanded.value)}
           onClick={onClickTitle}
-          {...props}
+          {...attrs}
         />
       );
     };

src/collapse-item/index.less

@@ -44,10 +44,6 @@
       & .van-cell__right-icon {
         color: @collapse-item-title-disabled-color;
       }
-
-      &:active {
-        background-color: @white;
-      }
     }
   }
 

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();
+});

src/utils/base.ts

@@ -38,6 +38,8 @@ export function get(object: any, path: string): any {
   return result;
 }
 
+type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
 export function pick<T, U extends keyof T>(
   obj: T,
   keys: ReadonlyArray<U>,
@@ -48,5 +50,5 @@ export function pick<T, U extends keyof T>(
       ret[key] = obj[key];
     }
     return ret;
-  }, {} as Pick<T, U>);
+  }, {} as Writeable<Pick<T, U>>);
 }