chore(tabs): improve type def (#2788)

jdf2e · Dec 21, 2023 · 5e68145 · 5e68145
1 parent 0b22304
commit 5e68145
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/src/packages/__VUE/tabs/index.taro.vue b/src/packages/__VUE/tabs/index.taro.vue
@@ -48,17 +48,29 @@
   </view>
 </template>
 <script lang="ts">
-import { createComponent } from '@/packages/utils/create';
+import Taro from '@tarojs/taro';
+import {
+  onMounted,
+  provide,
+  VNode,
+  ref,
+  Ref,
+  computed,
+  onActivated,
+  watch,
+  nextTick,
+  CSSProperties,
+  PropType
+} from 'vue';
+import NutScrollView from '../scroll-view/index.taro.vue';
 import { JoySmile } from '@nutui/icons-vue-taro';
+import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { TypeOfFun } from '@/packages/utils/util';
-import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch, nextTick, CSSProperties } from 'vue';
 import raf from '@/packages/utils/raf';
-import Taro from '@tarojs/taro';
-import type { RectItem } from './types';
 import { useTabContentTouch } from './hooks';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-import NutScrollView from '../scroll-view/index.taro.vue';
+import type { RectItem, TabsDirection, TabsSize, TabsType } from './types';
 
 export class Title {
   title = '';
@@ -67,8 +79,9 @@ export class Title {
   disabled = false;
   constructor() {}
 }
-export type TabsSize = 'large' | 'normal' | 'small';
+
 const { create } = createComponent('tabs');
+
 export default create({
   components: {
     JoySmile,
@@ -84,16 +97,16 @@ export default create({
       default: ''
     },
     direction: {
-      type: String,
-      default: 'horizontal' //vertical
+      type: String as PropType<TabsDirection>,
+      default: 'horizontal'
     },
     size: {
-      type: String as import('vue').PropType<TabsSize>,
+      type: String as PropType<TabsSize>,
       default: 'normal'
     },
     type: {
-      type: String,
-      default: 'line' //card、line、smile
+      type: String as PropType<TabsType>,
+      default: 'line'
     },
     titleScroll: {
       type: Boolean,

diff --git a/src/packages/__VUE/tabs/index.vue b/src/packages/__VUE/tabs/index.vue
@@ -69,24 +69,39 @@
   </view>
 </template>
 <script lang="ts">
+import {
+  onMounted,
+  provide,
+  VNode,
+  ref,
+  Ref,
+  computed,
+  onActivated,
+  watch,
+  nextTick,
+  CSSProperties,
+  PropType
+} from 'vue';
+import NutSticky from '../sticky/index.vue';
+import { JoySmile } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { TypeOfFun } from '@/packages/utils/util';
 import { useRect } from '@/packages/utils/useRect';
-import { onMounted, provide, VNode, ref, Ref, computed, onActivated, watch, nextTick, CSSProperties } from 'vue';
 import raf from '@/packages/utils/raf';
+import { useTabContentTouch } from './hooks';
+import type { TabsDirection, TabsSize, TabsType } from './types';
+
 export class Title {
   title = '';
   titleSlot?: VNode[];
   paneKey = '';
   disabled = false;
   constructor() {}
 }
-export type TabsSize = 'large' | 'normal' | 'small';
-import NutSticky from '../sticky/index.vue';
+
 const { create } = createComponent('tabs');
-import { JoySmile } from '@nutui/icons-vue';
-import { useTabContentTouch } from './hooks';
+
 export default create({
   components: { NutSticky, JoySmile },
   props: {
@@ -99,16 +114,16 @@ export default create({
       default: ''
     },
     direction: {
-      type: String,
-      default: 'horizontal' //vertical
+      type: String as PropType<TabsDirection>,
+      default: 'horizontal'
     },
     size: {
-      type: String as import('vue').PropType<TabsSize>,
+      type: String as PropType<TabsSize>,
       default: 'normal'
     },
     type: {
-      type: String,
-      default: 'line' //card、line、smile
+      type: String as PropType<TabsType>,
+      default: 'line'
     },
     titleScroll: {
       type: Boolean,

diff --git a/src/packages/__VUE/tabs/types.ts b/src/packages/__VUE/tabs/types.ts
@@ -8,3 +8,6 @@ export type RectItem = {
   top: number;
   width: number;
 };
+export type TabsDirection = 'horizontal' | 'vertical';
+export type TabsSize = 'large' | 'normal' | 'small';
+export type TabsType = 'line' | 'smile';