Collapse: collapse item can be disabled (#15076)

examples/docs/en-US/collapse.md

@@ -126,5 +126,6 @@ Besides using the `title` attribute, you can customize panel title with named sl
 ### Collapse Item Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | unique identification of the panel | string/number | — | — |
-| title | title of the panel | string | — | — |
+| name      | unique identification of the panel | string/number | — | — |
+| title     | title of the panel                 | string        | — | — |
+| disabled  | disable the collapse item          | boolean       | — | — |

examples/docs/es/collapse.md

@@ -128,4 +128,5 @@ Además de usar el atributo `title`, se puede personalizar el título del panel
 | Atributo | Descripción                   | Tipo          | Valores aceptados | Por defecto |
 | -------- | ----------------------------- | ------------- | ----------------- | ----------- |
 | name     | identificador único del panel | string/number | —                 | —           |
-| title    | título del panel              | string        | —                 | —           |
+| title    | título del panel              | string        | —                 | —           |
+| disabled | disable the collapse item     | boolean       | —                 | —           |

examples/docs/fr-FR/collapse.md

@@ -126,5 +126,6 @@ En plus de l'utilisation de l'attribut `title`, vous pouvez configurer les titre
 ### Attributs de Collapse-Item
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | Identifiant unique du panneau. | string/number | — | — |
-| title | Titre du panneau. | string | — | — |
+| name      | Identifiant unique du panneau. | string/number | — | — |
+| title     | Titre du panneau.              | string        | — | — |
+| disabled  | disable the collapse item      | boolean       | — | — |

examples/docs/zh-CN/collapse.md

@@ -126,5 +126,6 @@
 ### Collapse Item Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| name | 唯一标志符 | string/number | — | — |
-| title | 面板标题 | string | — | — |
+| name      | 唯一标志符      | string/number | —     | —    |
+| title     | 面板标题        | string        | —     | —    |
+| disabled  | 是否禁用        | boolean       | —     | —    |

packages/collapse/src/collapse-item.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="el-collapse-item" :class="{'is-active': isActive}">
+  <div class="el-collapse-item"
+    :class="{'is-active': isActive, 'is-disabled': disabled }">
     <div
       role="tab"
       :aria-expanded="isActive"
@@ -11,7 +12,7 @@
         @click="handleHeaderClick"
         role="button"
         :id="`el-collapse-head-${id}`"
-        tabindex="0"
+        :tabindex="disabled ? undefined : 0"
         @keyup.space.enter.stop="handleEnterClick"
         :class="{
           'focusing': focusing,
@@ -65,7 +66,8 @@
         },
         contentHeight: 0,
         focusing: false,
-        isClick: false
+        isClick: false,
+        id: generateId()
       };
     },
 
@@ -78,15 +80,13 @@
         default() {
           return this._uid;
         }
-      }
+      },
+      disabled: Boolean
     },
 
     computed: {
       isActive() {
         return this.collapse.activeNames.indexOf(this.name) > -1;
-      },
-      id() {
-        return generateId();
       }
     },
 
@@ -101,6 +101,7 @@
         }, 50);
       },
       handleHeaderClick() {
+        if (this.disabled) return;
         this.dispatch('ElCollapse', 'item-click', this);
         this.focusing = false;
         this.isClick = true;

packages/theme-chalk/src/collapse.scss

@@ -7,6 +7,12 @@
   border-bottom: 1px solid $--collapse-border-color;
 }
 @include b(collapse-item) {
+  @include when(disabled) {
+    .el-collapse-item__header {
+      color: $--font-color-disabled-base;
+      cursor: not-allowed;
+    }
+  }
   @include e(header) {
     display: flex;
     align-items: center;

types/collapse-item.d.ts

@@ -20,4 +20,7 @@ export declare class ElCollapseItem extends ElementUIComponent {
   title: string
 
   $slots: CollapseItemSlots
+
+  /** Disable the collapse item */
+  disabled: boolean
 }