feat(Collapse): sfc changed to tsx

src/collapse/collapse-panel-props.ts

@@ -16,7 +16,7 @@ export default {
   default: {
     type: [String, Function] as PropType<TdCollapsePanelProps['default']>,
   },
-  /** 当前面板处理折叠状态时，是否销毁面板内容 */
+  /** 【暂不支持】当前面板处理折叠状态时，是否销毁面板内容 */
   destroyOnCollapse: Boolean,
   /** 禁止当前面板展开，优先级大于 Collapse 的同名属性 */
   disabled: {

src/collapse/collapse-panel.tsx

@@ -0,0 +1,128 @@
+import { ref, computed, nextTick, watch, onMounted, inject, defineComponent, getCurrentInstance } from 'vue';
+import { ChevronDownIcon, ChevronUpIcon } from 'tdesign-icons-vue-next';
+import TCell from '../cell';
+import props from './collapse-panel-props';
+import config from '../config';
+import { findIndex } from './util';
+import { useTNodeJSX, useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import { CollapseProvide } from './collapse';
+
+const { prefix } = config;
+const name = `${prefix}-collapse-panel`;
+
+export default defineComponent({
+  name,
+  components: { TCell },
+  props,
+  setup(props, { slots }) {
+    const renderTNodeJSX = useTNodeJSX();
+    const renderContent = useContent();
+
+    const componentName = usePrefixClass('collapse-panel');
+
+    const parent = inject<CollapseProvide>('collapse');
+    const renderParentTNode: Function = inject('renderParentTNode');
+
+    const disabled = computed(() => parent?.disabled.value || props.disabled);
+    const rootClass = computed(() => ({
+      [`${componentName.value}`]: true,
+      [`${componentName.value}--${props.placement}`]: true,
+      [`${componentName.value}--active`]: isActive.value,
+      [`${componentName.value}--disabled`]: disabled.value,
+    }));
+    const isActive = computed(() => findIndex(props.value, parent?.activeValue.value) > -1);
+    const updatePanelValue = (args?: any) => {
+      if (props.value != null) {
+        parent?.onPanelChange(props.value, args);
+      }
+    };
+
+    const handleClick = (e: MouseEvent) => {
+      e?.stopPropagation();
+      if (disabled.value) {
+        return;
+      }
+      updatePanelValue({ e });
+    };
+
+    // 设置折叠/展开高度过渡
+    const bodyRef = ref();
+    const wrapRef = ref();
+    const headRef = ref();
+    const wrapperHeight = ref('');
+    const updatePanelState = () => {
+      nextTick(() => {
+        if (!wrapRef.value) {
+          return;
+        }
+        const { height: headHeight } = headRef.value.getBoundingClientRect();
+        if (!isActive.value) {
+          wrapperHeight.value = `${headHeight}px`;
+          return;
+        }
+        const { height: bodyHeight } = bodyRef.value.getBoundingClientRect();
+        const height = headHeight + bodyHeight;
+        wrapperHeight.value = `${height}px`;
+      });
+    };
+
+    watch(
+      isActive,
+      () => {
+        nextTick(() => updatePanelState());
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    onMounted(() => {
+      if (parent?.defaultExpandAll) {
+        updatePanelValue();
+      }
+    });
+
+    const renderDefaultIcon = () => {
+      if (props.placement === 'bottom') {
+        return isActive.value ? <ChevronUpIcon /> : <ChevronDownIcon />;
+      }
+      return isActive.value ? <ChevronDownIcon /> : <ChevronUpIcon />;
+    };
+    const panelExpandIcon = computed(() => slots.expandIcon || props.expandIcon);
+    const renderRightIcon = () => {
+      const tNodeRender = panelExpandIcon.value === undefined ? renderParentTNode : renderTNodeJSX;
+      return <div class={`${componentName.value}__header-icon`}>{tNodeRender('expandIcon', renderDefaultIcon())}</div>;
+    };
+
+    return () => {
+      const panelContent = renderContent('default', 'content');
+      const headerContent = renderTNodeJSX('header');
+      const noteContent = renderTNodeJSX('headerRightContent');
+      const leftIcon = renderTNodeJSX('headerLeftIcon');
+
+      return (
+        <div ref={wrapRef} class={rootClass.value} style={{ height: wrapperHeight.value }}>
+          <div ref={headRef} class={`${componentName.value}__title`} onClick={handleClick}>
+            <TCell
+              class={[
+                `${componentName.value}__header`,
+                `${componentName.value}__header--${props.placement}`,
+                { [`${componentName.value}__header--expanded`]: isActive.value },
+              ]}
+              v-slots={{
+                leftIcon: () => leftIcon,
+                title: () => headerContent,
+                note: () => noteContent,
+                rightIcon: () => renderRightIcon(),
+              }}
+            ></TCell>
+          </div>
+          <div ref={bodyRef} class={`${componentName.value}__content`}>
+            {panelContent}
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/collapse/collapse.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Collapse Props
 
 name | type | default | description | required
@@ -20,6 +21,7 @@ name | params | description
 -- | -- | --
 change | `(value: CollapseValue, context: { e: MouseEvent })` | \-
 
+
 ### CollapsePanel Props
 
 name | type | default | description | required
@@ -35,8 +37,8 @@ headerRightContent | String / Slot / Function | - | Typescript：`string \| TNod
 placement | String | bottom | options: bottom/top | N
 value | String / Number | - | \- | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -49,4 +51,4 @@ Name | Default Value | Description
 --td-collapse-header-text-color | @font-gray-1 | - 
 --td-collapse-header-text-disabled-color | @font-gray-4 | - 
 --td-collapse-panel-bg-color | @bg-color-container | - 
---td-collapse-title-font-size | @font-size-m | - 
+--td-collapse-title-font-size | @font-size-m | -

src/collapse/collapse.md

@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Collapse Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 defaultExpandAll | Boolean | false | 默认是否展开全部 | N
 disabled | Boolean | - | 是否禁用面板展开/收起操作 | N
@@ -20,9 +21,10 @@ onChange | Function |  | TS 类型：`(value: CollapseValue, context: { e: Mouse
 -- | -- | --
 change | `(value: CollapseValue, context: { e: MouseEvent })` | 切换面板时触发，返回变化的值
 
+
 ### CollapsePanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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
@@ -35,8 +37,8 @@ headerRightContent | String / Slot / Function | - | 面板头的右侧区域，
 placement | String | bottom | 选项卡内容的位置。可选项：bottom/top | N
 value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -49,4 +51,4 @@ value | String / Number | - | 当前面板唯一标识，如果值为空则取
 --td-collapse-header-text-color | @font-gray-1 | - 
 --td-collapse-header-text-disabled-color | @font-gray-4 | - 
 --td-collapse-panel-bg-color | @bg-color-container | - 
---td-collapse-title-font-size | @font-size-m | - 
+--td-collapse-title-font-size | @font-size-m | -