feat: tabpane name support number type (#5915)

* feat: tabpane name support number type

* fix: update

packages/components/tabs/src/tab-nav.ts

@@ -38,13 +38,13 @@ export const tabNavProps = buildProps({
     default: () => mutable([] as const),
   },
   currentName: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
   editable: Boolean,
   onTabClick: {
     type: definePropType<
-      (tab: TabsPaneContext, tabName: string, ev: Event) => void
+      (tab: TabsPaneContext, tabName: string | number, ev: Event) => void
     >(Function),
     default: NOOP,
   },

packages/components/tabs/src/tab-pane.ts

@@ -7,7 +7,7 @@ export const tabPaneProps = buildProps({
     default: '',
   },
   name: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
   closable: Boolean,

packages/components/tabs/src/tabs.ts

@@ -42,7 +42,7 @@ export const tabsProps = buildProps({
   closable: Boolean,
   addable: Boolean,
   modelValue: {
-    type: String,
+    type: [String, Number],
     default: '',
   },
   editable: Boolean,
@@ -54,8 +54,8 @@ export const tabsProps = buildProps({
   beforeLeave: {
     type: definePropType<
       (
-        newTabName: string,
-        oldTabName: string
+        newTabName: string | number,
+        oldTabName: string | number
       ) => void | boolean | Promise<void | boolean>
     >(Function),
     default: () => true,
@@ -65,12 +65,15 @@ export const tabsProps = buildProps({
 export type TabsProps = ExtractPropTypes<typeof tabsProps>
 
 export const tabsEmits = {
-  [UPDATE_MODEL_EVENT]: (tabName: string) => typeof tabName === 'string',
-  [INPUT_EVENT]: (tabName: string) => typeof tabName === 'string',
+  [UPDATE_MODEL_EVENT]: (tabName: string | number) =>
+    typeof tabName === 'string' || typeof tabName === 'number',
+  [INPUT_EVENT]: (tabName: string | number) =>
+    typeof tabName === 'string' || typeof tabName === 'number',
   'tab-click': (pane: TabsPaneContext, ev: Event) => ev instanceof Event,
-  edit: (paneName: string | null, action: 'remove' | 'add') =>
+  edit: (paneName: string | number | null, action: 'remove' | 'add') =>
     action === 'remove' || action === 'add',
-  'tab-remove': (paneName: string) => typeof paneName === 'string',
+  'tab-remove': (paneName: string | number) =>
+    typeof paneName === 'string' || typeof paneName === 'number',
   'tab-add': () => true,
 }
 export type TabsEmits = typeof tabsEmits
@@ -134,13 +137,13 @@ export default defineComponent({
       }
     }
 
-    const changeCurrentName = (value: string) => {
+    const changeCurrentName = (value: string | number) => {
       currentName.value = value
       emit(INPUT_EVENT, value)
       emit(UPDATE_MODEL_EVENT, value)
     }
 
-    const setCurrentName = (value: string) => {
+    const setCurrentName = (value: string | number) => {
       // should do nothing.
       if (currentName.value === value) return
 
@@ -165,7 +168,7 @@ export default defineComponent({
 
     const handleTabClick = (
       tab: TabsPaneContext,
-      tabName: string,
+      tabName: string | number,
       event: Event
     ) => {
       if (tab.props.disabled) return

packages/tokens/tabs.ts

@@ -12,7 +12,7 @@ export type TabsPaneContext = UnwrapRef<{
   uid: number
   instance: ShallowReactive<ComponentInternalInstance>
   props: TabPaneProps
-  paneName: ComputedRef<string | undefined>
+  paneName: ComputedRef<string | number | undefined>
   active: ComputedRef<boolean>
   index: Ref<string | undefined>
   isClosable: ComputedRef<boolean>
@@ -20,7 +20,7 @@ export type TabsPaneContext = UnwrapRef<{
 
 export interface TabsRootContext {
   props: TabsProps
-  currentName: Ref<string>
+  currentName: Ref<string | number>
   updatePaneState: (pane: TabsPaneContext) => void
 }