feat(Tabs): extract the remove event and add TabPanel onRemove event (#5853)

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

* refactor(tabs): inline removeBtn function for cleaner code

* chore: stash changelog [ci skip]

* chore: update CHANGELOG

* fix(tabs): correct class assignment for remove button icon

* feat(tabs): 添加 panel `onRemove` 方法触发，添加相关测试

* chore: update common

* fix(tabs): 修正 onTabPanelRemoveFn 的命名一致性

* chore: stash changelog [ci skip]

---------

Co-authored-by: tdesign-bot <[email protected]>
Co-authored-by: wū yāng <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 4 people

packages/common

@@ -111,15 +111,16 @@ describe('Tabs', () => {
     });
 
     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>
@@ -129,7 +130,12 @@ describe('Tabs', () => {
       await nextTick();
       const tabs = wrapper.findComponent(Tabs);
       tabs.vm.$el.getElementsByClassName('remove-btn')[0].dispatchEvent(new Event('click'));
-      expect(tabs.props('onRemove')).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) });
     });
   });
 });

packages/components/tabs/__tests__/tabs.test.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, ref, PropType } from 'vue';
 import { CloseIcon as TdCloseIcon } from 'tdesign-icons-vue-next';
 import tabProps from './props';
 import tabPanelProps from './tab-panel-props';
+import { TdTabsProps, TdTabPanelProps } from './type';
 
 // hooks
 import { useRipple, useGlobalIcon, usePrefixClass, useCommonClassName } from '@tdesign/shared-hooks';
@@ -23,7 +24,8 @@ export default defineComponent({
     removable: tabPanelProps.removable,
     value: tabPanelProps.value,
     onClick: Function as PropType<Function>,
-    onRemove: Function as PropType<Function>,
+    onTabRemove: Function as PropType<TdTabsProps['onRemove']>,
+    onTabPanelRemove: Function as PropType<TdTabPanelProps['onRemove']>,
   },
 
   setup(props) {
@@ -37,7 +39,8 @@ export default defineComponent({
 
     const removeBtnClick = ({ e }: { e: MouseEvent }) => {
       if (e) e.stopPropagation();
-      props.onRemove({ e, value: props.value, index: props.index });
+      props.onTabRemove({ e, value: props.value, index: props.index });
+      props.onTabPanelRemove({ e, value: props.value });
     };
     const onClickNav = (e: MouseEvent) => {
       if (props.disabled) return;
@@ -57,11 +60,18 @@ export default defineComponent({
       };
     });
 
+    const removeBtn = () =>
+      props.removable && !props.disabled ? (
+        <span onClick={(e) => removeBtnClick({ e })} class="remove-btn">
+          <CloseIcon />
+        </span>
+      ) : null;
+
     const renderCardItem = () => {
       return (
         <div class={navItemClass.value} onClick={onClickNav} ref={itemRef}>
           <span class={`${COMPONENT_NAME.value}-text-wrapper`}>{props.label}</span>
-          {props.removable && !props.disabled ? <CloseIcon class="remove-btn" onClick={removeBtnClick} /> : null}
+          {removeBtn()}
         </div>
       );
     };
@@ -80,7 +90,7 @@ export default defineComponent({
           >
             <span class={`${COMPONENT_NAME.value}-text-wrapper`}>{props.label}</span>
           </div>
-          {props.removable && !props.disabled ? <CloseIcon class="remove-btn" onClick={removeBtnClick} /> : null}
+          {removeBtn()}
         </div>
       );
     };

packages/components/tabs/tab-nav-item.tsx

@@ -191,7 +191,7 @@ export default defineComponent({
       }
       props.onChange(value);
     };
-    const removeBtnClick = ({ e, value, index }: Parameters<TdTabsProps['onRemove']>[0]) => {
+    const onTabRemove = ({ e, value, index }: Parameters<TdTabsProps['onRemove']>[0]) => {
       props.onRemove({ e, value, index });
     };
     const setActiveTab = (ref: any) => {
@@ -239,7 +239,8 @@ export default defineComponent({
             removable={panel.removable}
             value={panel.value}
             onClick={(e: MouseEvent) => tabClick(e, panel)}
-            onRemove={removeBtnClick}
+            onTabRemove={onTabRemove}
+            onTabPanelRemove={panel.onRemove}
           />
         );
       });

packages/components/tabs/tab-nav.tsx

@@ -0,0 +1,7 @@
+---
+pr_number: 5853
+contributor: RSS1102
+---
+
+- feat(Tabs): 将 remove 事件从删除图标移至外层容器, 保证替换图标功能正常使用，有覆盖删除图标样式请注意此变更 ⚠️ @RSS1102 ([#5853](https://github.com/Tencent/tdesign-vue-next/pull/5853))
+- feat(TabPanel): 新增 `remove` 事件，方便独立Panel 处理移除后的相关逻辑 @RSS1102 ([#5853](https://github.com/Tencent/tdesign-vue-next/pull/5853))