refactor(tabs): sfc to tsx

src/tabs/__test__/index.test.jsx

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect, vi } from 'vitest';
 import { ref } from 'vue';
 import { Tabs, TabPanel } from '../index';
-import TTabNav from '../tab-nav-item.vue';
+import TTabNav from '../tab-nav-item';
 import { sleep } from '../../shared/util';
 import Sticky from '../../sticky/index';
 import { trigger } from '../../image-viewer/__test__/touch';

src/tabs/demos/content.vue

@@ -16,17 +16,17 @@ const list = [
   {
     value: '1',
     label: '选项',
-    panel: '内容区',
+    panel: '内容区1',
   },
   {
     value: '2',
     label: '选项',
-    panel: '内容区',
+    panel: '内容区2',
   },
   {
     value: '3',
     label: '上限六个文字',
-    panel: '内容区',
+    panel: '内容区3',
   },
 ];
 

src/tabs/index.ts

@@ -1,5 +1,5 @@
-import LocalTabs from './tabs.vue';
-import LocalTabPanel from './tab-panel.vue';
+import LocalTabs from './tabs';
+import LocalTabPanel from './tab-panel';
 import { withInstall, WithInstallType } from '../shared';
 
 import './style';

src/tabs/props.ts

@@ -12,6 +12,15 @@ export default {
   animation: {
     type: Object as PropType<TdTabsProps['animation']>,
   },
+  /** 激活下划线的模式 */
+  bottomLineMode: {
+    type: String as PropType<TdTabsProps['bottomLineMode']>,
+    default: 'fixed' as TdTabsProps['bottomLineMode'],
+    validator(val: TdTabsProps['bottomLineMode']): boolean {
+      if (!val) return true;
+      return ['fixed', 'auto', 'full'].includes(val);
+    },
+  },
   /** 选项卡列表 */
   list: {
     type: Array as PropType<TdTabsProps['list']>,
@@ -21,15 +30,6 @@ export default {
     type: Boolean,
     default: true,
   },
-  /** 激活下划线的模式*/
-  bottomLineMode: {
-    type: String as PropType<TdTabsProps['bottomLineMode']>,
-    default: 'fixed' as TdTabsProps['bottomLineMode'],
-    validator(val: TdTabsProps['theme']): boolean {
-      if (!val) return true;
-      return ['fixed', 'auto', 'full'].includes(val);
-    },
-  },
   /** 组件尺寸 */
   size: {
     type: String as PropType<TdTabsProps['size']>,

src/tabs/tab-nav-item.tsx

@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue';
+import config from '../config';
+import TabPanelProps from './tab-panel-props';
+import { useContent } from '../hooks/tnode';
+
+const { prefix } = config;
+
+export default defineComponent({
+  name: `${prefix}-tab-nav`,
+  props: {
+    label: TabPanelProps.label,
+  },
+  setup(props) {
+    const renderTNodeContent = useContent();
+
+    return () => <div>{renderTNodeContent('default', 'label')}</div>;
+  },
+});

src/tabs/tab-panel-props.ts

@@ -23,6 +23,8 @@ export default {
   label: {
     type: [String, Function] as PropType<TdTabPanelProps['label']>,
   },
+  /** 是否启用选项卡懒加载 */
+  lazy: Boolean,
   /** 用于自定义选项卡面板内容 */
   panel: {
     type: [String, Function] as PropType<TdTabPanelProps['panel']>,

src/tabs/tab-panel.tsx

@@ -0,0 +1,47 @@
+import { defineComponent, inject, Ref, computed, ref, watch } from 'vue';
+import config from '../config';
+import props from './tab-panel-props';
+import { useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import { TabValue } from '.';
+
+const { prefix } = config;
+const name = `${prefix}-tab-panel`;
+
+export default defineComponent({
+  name,
+  props,
+  setup(props) {
+    const renderTNodeContent = useContent();
+    const tabPanelClass = usePrefixClass('tab-panel');
+    const tabsClass = usePrefixClass('tabs');
+    const currentValue = inject<Ref<TabValue>>('currentValue');
+    const isActive = computed(() => currentValue.value === props.value);
+    const tabPanelClasses = computed(() => [`${tabPanelClass.value}`, `${tabsClass.value}__panel`]);
+    const isMount = ref(props.lazy ? isActive.value : true);
+
+    watch(
+      isActive,
+      () => {
+        if (isActive.value) {
+          if (!isMount.value) {
+            isMount.value = true;
+          }
+        } else if (props.destroyOnHide) {
+          isMount.value = false;
+        }
+      },
+      { immediate: true },
+    );
+
+    return () => {
+      if (!isMount.value) return null;
+
+      return (
+        <div v-show={isActive.value} class={tabPanelClasses.value}>
+          {renderTNodeContent('default', 'panel')}
+        </div>
+      );
+    };
+  },
+});

src/tabs/tabs.en-US.md

@@ -1,20 +1,21 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
+bottomLineMode | String | fixed | options: fixed/auto/full | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
 showBottomLine | Boolean | true | \- | N
-bottomLineMode | String | fixed | options：fixed/auto/full ｜ N
-size | String | medium | options：medium/large | N
+size | String | medium | options: medium/large | N
 spaceEvenly | Boolean | true | \- | N
 sticky | Boolean | false | \- | N
 stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | \- | N
-theme | String | line | options：line/tag/card | N
+theme | String | line | options: line/tag/card | N
 value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 onChange | Function |  | Typescript：`(value: TabValue, label: string) => void`<br/> | N
@@ -29,19 +30,21 @@ change | `(value: TabValue, label: string)` | \-
 click | `(value: TabValue, label: string)` | \-
 scroll | `(scrollTop: number, isFixed: boolean)` | \-
 
+
 ### TabPanel Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-badgeProps | Object | null | \- | N
+badgeProps | Object | - | \- | N
 destroyOnHide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | Typescript：`TabValue` | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -61,4 +64,4 @@ Name | Default Value | Description
 --td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
 --td-tab-item-tag-height | 32px | - 
 --td-tab-item-vertical-height | 54px | - 
---td-tab-item-vertical-width | 104px | - 
+--td-tab-item-vertical-width | 104px | -

src/tabs/tabs.md

@@ -1,14 +1,15 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Tabs Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
+bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
 showBottomLine | Boolean | true | 是否展示底部激活线条 | N
-bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full ｜ N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
@@ -29,19 +30,21 @@ change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时
 click | `(value: TabValue, label: string)` | 点击选项卡时触发
 scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
 
+
 ### TabPanel Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-badgeProps | Object | null | 透传至 Badge 组件 | N
+badgeProps | Object | - | 透传至 Badge 组件 | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -61,4 +64,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
 --td-tab-item-tag-bg | @bg-color-secondarycontainer | - 
 --td-tab-item-tag-height | 32px | - 
 --td-tab-item-vertical-height | 54px | - 
---td-tab-item-vertical-width | 104px | - 
+--td-tab-item-vertical-width | 104px | -