refactor: collapse/CollapseContainer (#2569)

src/components/Container/src/collapse/CollapseContainer.vue

@@ -1,41 +1,14 @@
-<template>
-  <div :class="prefixCls">
-    <CollapseHeader v-bind="props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
-      <template #title>
-        <slot name="title"></slot>
-      </template>
-      <template #action>
-        <slot name="action"></slot>
-      </template>
-    </CollapseHeader>
-
-    <div class="p-2">
-      <CollapseTransition :enable="canExpan">
-        <Skeleton v-if="loading" :active="loading" />
-        <div :class="`${prefixCls}__body`" v-else v-show="show">
-          <slot></slot>
-        </div>
-      </CollapseTransition>
-    </div>
-    <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
-      <slot name="footer"></slot>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import type { PropType } from 'vue';
-  import { ref } from 'vue';
+<script lang="tsx">
+  import { ref, unref, defineComponent, type PropType, type ExtractPropTypes } from 'vue';
   import { isNil } from 'lodash-es';
-  // component
   import { Skeleton } from 'ant-design-vue';
   import { CollapseTransition } from '/@/components/Transition';
   import CollapseHeader from './CollapseHeader.vue';
   import { triggerWindowResize } from '/@/utils/event';
-  // hook
   import { useTimeoutFn } from '/@/hooks/core/useTimeout';
   import { useDesign } from '/@/hooks/web/useDesign';
 
-  const props = defineProps({
+  const collapseContainerProps = {
     title: { type: String, default: '' },
     loading: { type: Boolean },
     /**
@@ -58,27 +31,60 @@
      * Delayed loading time
      */
     lazyTime: { type: Number, default: 0 },
-  });
+  };
 
-  const show = ref(true);
+  export type CollapseContainerProps = ExtractPropTypes<typeof collapseContainerProps>;
 
-  const { prefixCls } = useDesign('collapse-container');
+  export default defineComponent({
+    name: 'CollapseContainer',
 
-  /**
-   * @description: Handling development events
-   */
-  function handleExpand(val: boolean) {
-    show.value = isNil(val) ? !show.value : val;
-    if (props.triggerWindowResize) {
-      // 200 milliseconds here is because the expansion has animation,
-      useTimeoutFn(triggerWindowResize, 200);
-    }
-  }
+    props: collapseContainerProps,
+
+    setup(props, { expose, slots }) {
+      const { prefixCls } = useDesign('collapse-container');
+
+      const show = ref(true);
+
+      const handleExpand = (val: boolean) => {
+        show.value = isNil(val) ? !show.value : val;
+        if (props.triggerWindowResize) {
+          // 200 milliseconds here is because the expansion has animation,
+          useTimeoutFn(triggerWindowResize, 200);
+        }
+      };
 
-  defineExpose({
-    handleExpand,
+      expose({ handleExpand });
+
+      return () => (
+        <div class={unref(prefixCls)}>
+          <CollapseHeader
+            {...props}
+            prefixCls={unref(prefixCls)}
+            onExpand={handleExpand}
+            show={show.value}
+            v-slots={{
+              title: slots.title,
+              action: slots.action,
+            }}
+          />
+
+          <div class="p-2">
+            <CollapseTransition enable={props.canExpan}>
+              {props.loading ? (
+                <Skeleton active={props.loading} />
+              ) : (
+                show.value && <div class={`${prefixCls}__body`}>{slots.default?.()}</div>
+              )}
+            </CollapseTransition>
+          </div>
+
+          {slots.footer && <div class={`${prefixCls}__footer`}>{slots.footer()}</div>}
+        </div>
+      );
+    },
   });
 </script>
+
 <style lang="less">
   @prefix-cls: ~'@{namespace}-collapse-container';