feat(collapse): support header-left-icon

src/collapse/__test__/__snapshots__/demo.test.jsx.snap

@@ -8,7 +8,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
 
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -77,7 +76,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -146,7 +144,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -215,7 +212,6 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -294,7 +290,6 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
 
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -372,7 +367,6 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
 
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -451,7 +445,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
 
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -520,7 +513,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -589,7 +581,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -658,7 +649,6 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
   </div>
   <div
     class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"
@@ -771,7 +761,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
 
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -866,7 +855,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
 
         <div
           class="t-collapse-panel t-collapse-panel--top"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -957,7 +945,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
 
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1053,7 +1040,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
 
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1122,7 +1108,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1191,7 +1176,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1260,7 +1244,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1361,7 +1344,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
 
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--active"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1430,7 +1412,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1499,7 +1480,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1568,7 +1548,6 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
         </div>
         <div
           class="t-collapse-panel t-collapse-panel--bottom t-collapse-panel--disabled"
-          style="height: 0px;"
         >
           <div
             class="t-collapse-panel__title"
@@ -1651,7 +1630,6 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
 
   <div
     class="t-collapse-panel t-collapse-panel--top"
-    style="height: 0px;"
   >
     <div
       class="t-collapse-panel__title"

src/collapse/collapse-panel-props.ts

@@ -32,6 +32,10 @@ export default {
   header: {
     type: [String, Function] as PropType<TdCollapsePanelProps['header']>,
   },
+  /** 面板头左侧图标 */
+  headerLeftIcon: {
+    type: [String, Function] as PropType<TdCollapsePanelProps['headerLeftIcon']>,
+  },
   /** 面板头的右侧区域，一般用于呈现面板操作 */
   headerRightContent: {
     type: [String, Function] as PropType<TdCollapsePanelProps['headerRightContent']>,

src/collapse/collapse-panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapRef" :class="rootClass">
+  <div ref="wrapRef" :class="rootClass" :style="{ height: wrapperHeight }">
     <div ref="headRef" :class="`${name}__title`" @click="handleClick">
       <t-cell
         :class="[`${name}__header`, `${name}__header--${placement}`, { [`${name}__header--expanded`]: isActive }]"
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts">
-import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance, h } from 'vue';
+import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
 import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
 import isFunction from 'lodash/isFunction';
 import TCell from '../cell';
@@ -91,18 +91,19 @@ export default defineComponent({
     const bodyRef = ref();
     const wrapRef = ref();
     const headRef = ref();
+    const wrapperHeight = ref('');
     const updatePanelState = () => {
       if (!wrapRef.value) {
         return;
       }
       const { height: headHeight } = headRef.value.getBoundingClientRect();
       if (!isActive.value) {
-        wrapRef.value.style.height = `${headHeight}px`;
+        wrapperHeight.value = `${headHeight}px`;
         return;
       }
       const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
       const height = headHeight + bodyHeight;
-      wrapRef.value.style.height = `${height}px`;
+      wrapperHeight.value = `${height}px`;
     };
 
     watch(isActive, () => {
@@ -131,6 +132,7 @@ export default defineComponent({
       panelContent,
       headerContent,
       noteContent,
+      wrapperHeight,
     };
   },
 });

src/collapse/collapse.en-US.md

@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Collapse Props
 
 name | type | default | description | required
@@ -10,7 +9,7 @@ defaultExpandAll | Boolean | false | \- | N
 disabled | Boolean | - | \- | N
 expandIcon | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 expandMutex | Boolean | false | \- | N
-theme | String | default | options：default/card | N
+theme | String | default | options: default/card | N
 value | Array | [] | `v-model` and `v-model:value` is supported。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 defaultValue | Array | [] | uncontrolled property。Typescript：`CollapseValue` `type CollapseValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/collapse/type.ts) | N
 onChange | Function |  | Typescript：`(value: CollapseValue, context: { e: MouseEvent }) => void`<br/> | N
@@ -31,8 +30,9 @@ destroyOnCollapse | Boolean | false | \- | N
 disabled | Boolean | undefined | \- | N
 expandIcon | Boolean / Slot / Function | undefined | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-placement | String | bottom | options：bottom/top | N
+placement | String | bottom | options: bottom/top | N
 value | String / Number | - | \- | N
 
 

src/collapse/collapse.md

@@ -26,10 +26,11 @@ change | `(value: CollapseValue, context: { e: MouseEvent })` | 切换面板时
 -- | -- | -- | -- | --
 content | String / Slot / Function | - | 折叠面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 default | String / Slot / Function | - | 折叠面板内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N
+destroyOnCollapse | Boolean | false | 【暂不支持】当前面板处理折叠状态时，是否销毁面板内容 | N
 disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N
 expandIcon | Boolean / Slot / Function | undefined | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 header | String / Slot / Function | - | 面板头内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+headerLeftIcon | String / Slot / Function | - | 面板头左侧图标。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 headerRightContent | String / Slot / Function | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N

src/collapse/type.ts

@@ -78,6 +78,10 @@ export interface TdCollapsePanelProps {
    * 面板头内容
    */
   header?: string | TNode;
+  /**
+   * 面板头左侧图标
+   */
+  headerLeftIcon?: string | TNode;
   /**
    * 面板头的右侧区域，一般用于呈现面板操作
    */

src/common.ts

@@ -78,7 +78,7 @@ export interface KeysType {
 }
 
 export interface HTMLElementAttributes {
-  [css: string]: string;
+  [attribute: string]: string;
 }
 
 export interface TScroll {
@@ -121,3 +121,7 @@ export interface ScrollToElementParams {
   time?: number;
   behavior?: 'auto' | 'smooth';
 }
+
+export interface ComponentScrollToElementParams extends ScrollToElementParams {
+  key: string | number;
+}