feat(tabs): extract the remove event to outside the remove-icon-btn (#3686)

* refactor(tabs): extract the remove event to outside the remove-icon-btn

* fix(tab-nav-item): remove redundant class from CloseIcon component

* chore: update common

* test(tabs): enhance @remove event handling with separate callbacks for Tabs and TabPanel

* fix(tabs): improve `@remove` event handling by separating event data for Tabs and TabPanel

* fix(tabs): import missing TdTabPanelProps for proper type handling

* chore: update common

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: RSS1102

src/tabs/__tests__/index.test.jsx

@@ -174,16 +174,18 @@ describe('Tabs', () => {
       tabs.vm.$el.getElementsByClassName('t-tabs__nav-item')[0].click();
       expect(tabs.emitted().change).toBeTruthy();
     });
+
     it('@remove', async () => {
-      const fn = vi.fn();
+      const onTabRemoveFn = vi.fn();
+      const onTabPanelRemoveFn = vi.fn();
       const wrapper = mount({
         render() {
           return (
-            <Tabs theme={'card'} onRemove={fn} value={2}>
-              <TabPanel value={1} label={'1'} removable={true}>
+            <Tabs theme={'card'} onRemove={onTabRemoveFn} value={2}>
+              <TabPanel value={1} label={'1'} removable={true} onRemove={onTabPanelRemoveFn}>
                 1
               </TabPanel>
-              <TabPanel value={2} label={'2'} removable={true}>
+              <TabPanel value={2} label={'2'} removable={true} onRemove={onTabPanelRemoveFn}>
                 2
               </TabPanel>
             </Tabs>
@@ -193,7 +195,12 @@ describe('Tabs', () => {
       await Vue.nextTick();
       const tabs = wrapper.findComponent(Tabs);
       tabs.vm.$el.getElementsByClassName('remove-btn')[0].dispatchEvent(new Event('click'));
-      expect(tabs.emitted().remove).toBeTruthy();
+
+      expect(onTabRemoveFn).toHaveBeenCalledTimes(1);
+      expect(onTabPanelRemoveFn).toHaveBeenCalledTimes(1);
+
+      expect(onTabRemoveFn).toHaveBeenCalledWith({ value: 1, e: expect.any(Event), index: 0 });
+      expect(onTabPanelRemoveFn).toHaveBeenCalledWith({ value: 1, e: expect.any(Event) });
     });
   });
 

src/tabs/tab-nav-item.tsx

@@ -56,21 +56,24 @@ export default mixins(keepAnimationMixins, classPrefixMixins, getGlobalIconMixin
       e.stopPropagation();
       emitEvent<Parameters<(e: MouseEvent) => void>>(this, 'click', e);
     },
-    renderCardItem(): VNode {
+    removeBtn(): VNode {
       const { CloseIcon } = this.useGlobalIcon({ CloseIcon: TdCloseIcon });
 
+      return this.removable && !this.disabled ? (
+        <span onClick={(e: MouseEvent) => this.removeBtnClick(e)} class="remove-btn">
+          <CloseIcon />
+        </span>
+      ) : null;
+    },
+    renderCardItem(): VNode {
       return (
         <div class={this.navItemClass} onClick={this.onClickNav} v-ripple={this.keepAnimation.ripple}>
           <span class={`${this.classPrefix}-tabs__nav-item-text-wrapper`}>{this.label}</span>
-          {this.removable && !this.disabled ? (
-            <CloseIcon class="remove-btn" nativeOnClick={this.removeBtnClick} />
-          ) : null}
+          {this.removeBtn()}
         </div>
       );
     },
     renderNormalItem(): VNode {
-      const { CloseIcon } = this.useGlobalIcon({ CloseIcon: TdCloseIcon });
-
       return (
         <div class={this.navItemClass} onClick={this.onClickNav}>
           <div
@@ -85,9 +88,7 @@ export default mixins(keepAnimationMixins, classPrefixMixins, getGlobalIconMixin
           >
             <span class={`${this.classPrefix}-tabs__nav-item-text-wrapper`}>{this.label}</span>
           </div>
-          {this.removable && !this.disabled ? (
-            <CloseIcon class="remove-btn" nativeOnClick={this.removeBtnClick} />
-          ) : null}
+          {this.removeBtn()}
         </div>
       );
     },

src/tabs/tabs.tsx

@@ -3,7 +3,7 @@ import { getVNodeComponentName, getVueComponentName } from '../utils/helper';
 import props from './props';
 import TTabPanel from './tab-panel';
 import TTabNav from './tab-nav';
-import { TabValue, TdTabsProps } from './type';
+import { TabValue, TdTabPanelProps, TdTabsProps } from './type';
 import { emitEvent } from '../utils/event';
 import { getClassPrefixMixins } from '../config-provider/config-receiver';
 import mixins from '../utils/mixins';
@@ -85,14 +85,16 @@ export default mixins(Vue as VueConstructor<TabParentInjectVue>, classPrefixMixi
 
     onRemoveTab({ e, value, index }: Parameters<TdTabsProps['onRemove']>[0]) {
       const panel = this.panels[index];
-      const eventData = {
+      emitEvent<Parameters<TdTabsProps['onRemove']>>(this, 'remove', {
         value,
         index,
         e,
-      };
-      emitEvent<Parameters<TdTabsProps['onRemove']>>(this, 'remove', eventData);
+      });
       if (!panel) return;
-      emitEvent<Parameters<TdTabsProps['onRemove']>>(panel, 'remove', eventData);
+      emitEvent<Parameters<TdTabPanelProps['onRemove']>>(panel, 'remove', {
+        value,
+        e,
+      });
     },
     renderHeader() {
       const onDragSort = (context: Parameters<TdTabsProps['onDragSort']>[0]) => {