chore(Tabs): add deprecation warning (#9129)

* chore(Tabs): add deprecation warning

* chore: upd

* chore: upd

src/cascader/Cascader.tsx

@@ -6,6 +6,9 @@ import { Tab } from '../tab';
 import { Tabs } from '../tabs';
 import { Icon } from '../icon';
 
+// Types
+import type { TabsClickTabEventParams } from '../tabs/Tabs';
+
 const [name, bem, t] = createNamespace('cascader');
 
 export type CascaderOption = {
@@ -187,9 +190,8 @@ export default defineComponent({
 
     const onClose = () => emit('close');
 
-    const onClickTab = (tabIndex: number, title: string) => {
+    const onClickTab = ({ name, title }: TabsClickTabEventParams) =>
-      emit('click-tab', tabIndex, title);
+      emit('click-tab', name, title);
-    };
 
     const renderHeader = () => (
       <div class={bem('header')}>
@@ -279,7 +281,7 @@ export default defineComponent({
         color={props.activeColor}
         swipeThreshold={0}
         swipeable={props.swipeable}
-        onClick={onClickTab}
+        onClickTab={onClickTab}
       >
         {state.tabs.map(renderTab)}
       </Tabs>

src/composables/use-tab-status.ts

@@ -3,6 +3,4 @@ import { inject, ComputedRef, InjectionKey } from 'vue';
 // eslint-disable-next-line
 export const TAB_STATUS_KEY: InjectionKey<ComputedRef<boolean>> = Symbol();
 
-export function useTabStatus() {
+export const useTabStatus = () => inject(TAB_STATUS_KEY, null);
-  return inject(TAB_STATUS_KEY, null);
-}

src/tab/test/index.spec.tsx

@@ -2,27 +2,6 @@ import { mount, later } from '../../../test';
 import { Tab } from '..';
 import { Tabs } from '../../tabs';
 
-test('should emit click event when tab is clicked', async () => {
-  const onClick = jest.fn();
-
-  const wrapper = mount({
-    render() {
-      return (
-        <Tabs onClick={onClick}>
-          <Tab title="title1">1</Tab>
-          <Tab title="title2">2</Tab>
-        </Tabs>
-      );
-    },
-  });
-
-  await later();
-  const tabs = wrapper.findAll('.van-tab');
-
-  await tabs[0].trigger('click');
-  expect(onClick).toHaveBeenCalledWith(0, 'title1');
-});
-
 test('should emit click-tab event when tab is clicked', async () => {
   const onClickTab = jest.fn();
 

src/tabs/Tabs.tsx

@@ -11,6 +11,7 @@ import {
   CSSProperties,
   defineComponent,
   ExtractPropTypes,
+  getCurrentInstance,
   ComponentPublicInstance,
 } from 'vue';
 
@@ -54,6 +55,13 @@ const [name, bem] = createNamespace('tabs');
 
 export type TabsType = 'line' | 'card';
 
+export type TabsClickTabEventParams = {
+  name: string | number;
+  title: string;
+  event: MouseEvent;
+  disabled: boolean;
+};
+
 const props = {
   color: String,
   border: Boolean,
@@ -117,6 +125,20 @@ export default defineComponent({
   ],
 
   setup(props, { emit, slots }) {
+    if (process.env.NODE_ENV !== 'production') {
+      const props = getCurrentInstance()?.vnode?.props;
+      if (props && 'onClick' in props) {
+        console.warn(
+          '[Vant] Tabs: "click" event is deprecated, using "click-tab" instead.'
+        );
+      }
+      if (props && 'onDisabled' in props) {
+        console.warn(
+          '[Vant] Tabs: "disabled" event is deprecated, using "click-tab" instead.'
+        );
+      }
+    }
+
     let tabHeight: number;
     let lockScroll: boolean;
     let stickyFixed: boolean;

src/vue-tsx-shim.d.ts

@@ -32,6 +32,7 @@ declare module 'vue' {
     onPreview?: EventHandler;
     onKeypress?: EventHandler;
     onTouchend?: EventHandler;
+    onClickTab?: EventHandler;
     onClickStep?: EventHandler;
     onTouchmove?: EventHandler;
     onTouchstart?: EventHandler;