refactor(overlay): sfc to tsx

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

@@ -25,8 +25,7 @@ exports[`Overlay > Overlay baseVue demo works fine 1`] = `
     class="t-overlay"
     style="z-index: 1000; transition-duration: 300ms; display: none;"
   >
-    
-    
+    <!---->
   </div>
   
 </div>
@@ -91,8 +90,7 @@ exports[`Overlay > Overlay mobileVue demo works fine 1`] = `
           class="t-overlay"
           style="z-index: 1000; transition-duration: 300ms; display: none;"
         >
-          
-          
+          <!---->
         </div>
         
       </div>

src/overlay/__test__/index.test.jsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from 'vitest';
-import Overlay from '../overlay.vue';
+import Overlay from '../overlay';
 import { mount } from '@vue/test-utils';
 
 describe('Overlay', () => {

src/overlay/index.ts

@@ -1,5 +1,5 @@
 import { withInstall, WithInstallType } from '../shared';
-import _Overlay from './overlay.vue';
+import _Overlay from './overlay';
 
 import './style';
 

src/overlay/overlay.en-US.md

@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Overlay Props
 
 name | type | default | description | required
@@ -19,11 +20,11 @@ name | params | description
 -- | -- | --
 click | `(context: { e: MouseEvent })` | \-
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
 --td-overlay-bg-color | @font-gray-1 | - 
 --td-overlay-transition-duration | 300ms | - 
---td-overlay-zindex | 1000 | - 
+--td-overlay-zindex | 1000 | -

src/overlay/overlay.md

@@ -1,11 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Overlay Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-backgroundColor | String | - | 遮罩层的背景色	 | N
+backgroundColor | String | - | 遮罩层的背景色 | N
 customStyle | String | - | 遮罩层自定义样式。优先级低于其他属性 | N
 duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
 preventScrollThrough | Boolean | true | 是否阻止背景滚动，阻止时蒙层里的内容也将无法滚动 | N
@@ -19,11 +20,11 @@ onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>
 -- | -- | --
 click | `(context: { e: MouseEvent })` | 遮罩层的点击事件
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-overlay-bg-color | @font-gray-1 | - 
 --td-overlay-transition-duration | 300ms | - 
---td-overlay-zindex | 1000 | - 
+--td-overlay-zindex | 1000 | -

src/overlay/overlay.vue → src/overlay/overlay.tsx

@@ -1,30 +1,26 @@
-<template>
-  <Transition :name="name">
-    <div v-show="visible" :class="classes" :style="rootStyles" @click="handleClick" @touchmove="handleTouchMove">
-      <slot />
-    </div>
-  </Transition>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+import { Transition, computed, defineComponent } from 'vue';
 import { preventDefault } from '../shared/dom';
 import config from '../config';
-import props from './props';
+import OverlayProps from './props';
+import { usePrefixClass } from '../hooks/useClass';
+import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
 const name = `${prefix}-overlay`;
 
 export default defineComponent({
   name,
-  props,
+  props: OverlayProps,
   setup(props) {
-    const classes = computed(() => ({
-      [`${name}`]: true,
-      [`${name}--active`]: props.visible,
+    const renderTNodeJSX = useTNodeJSX();
+    const overlayClass = usePrefixClass('overlay');
+
+    const overlayClasses = computed(() => ({
+      [`${overlayClass.value}`]: true,
+      [`${overlayClass.value}--active`]: props.visible,
     }));
 
-    const rootStyles = computed(() => {
+    const overlayStyles = computed(() => {
       const arr = [];
 
       if (props.customStyle) {
@@ -51,13 +47,18 @@ export default defineComponent({
       props.onClick?.({ e });
     };
 
-    return {
-      name,
-      classes,
-      rootStyles,
-      handleClick,
-      handleTouchMove,
-    };
+    return () => (
+      <Transition name={name}>
+        <div
+          v-show={props.visible}
+          class={overlayClasses.value}
+          style={overlayStyles.value}
+          onClick={handleClick}
+          onTouchmove={handleTouchMove}
+        >
+          {renderTNodeJSX('default')}
+        </div>
+      </Transition>
+    );
   },
 });
-</script>

src/overlay/props.ts

@@ -8,7 +8,7 @@ import { TdOverlayProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 遮罩层的背景色	 */
+  /** 遮罩层的背景色 */
   backgroundColor: {
     type: String,
     default: '',
@@ -23,7 +23,7 @@ export default {
     type: Number,
     default: 300,
   },
-  /** 防止滚动穿透，即不允许点击和滚动 */
+  /** 是否阻止背景滚动，阻止时蒙层里的内容也将无法滚动 */
   preventScrollThrough: {
     type: Boolean,
     default: true,

src/overlay/type.ts

@@ -21,7 +21,7 @@ export interface TdOverlayProps {
    */
   duration?: number;
   /**
-   * 防止滚动穿透，即不允许点击和滚动
+   * 是否阻止背景滚动，阻止时蒙层里的内容也将无法滚动
    * @default true
    */
   preventScrollThrough?: boolean;