fix(Tabbar): incorrect active tab when name is zero (#8125)

src/cell/index.tsx

@@ -33,7 +33,7 @@ export const cellProps = {
     default: true,
   },
   clickable: {
-    type: Boolean,
+    type: Boolean as PropType<boolean | null>,
     default: null,
   },
 };

src/notice-bar/index.tsx

@@ -26,7 +26,7 @@ export default createComponent({
     wrapable: Boolean,
     background: String,
     scrollable: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | null>,
       default: null,
     },
     delay: {

src/tabbar-item/index.tsx

@@ -1,8 +1,8 @@
 import { computed, getCurrentInstance } from 'vue';
-import { TABBAR_KEY } from '../tabbar';
+import { TABBAR_KEY, TabbarProvide } from '../tabbar';
 
 // Utils
-import { createNamespace, isObject, isDef } from '../utils';
+import { createNamespace, isObject } from '../utils';
 
 // Composition
 import { useParent } from '@vant/use';
@@ -28,8 +28,15 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const route = useRoute();
-    const vm = getCurrentInstance().proxy;
+    const vm = getCurrentInstance()!.proxy!;
-    const { parent, index } = useParent(TABBAR_KEY);
+    const { parent, index } = useParent<TabbarProvide>(TABBAR_KEY);
+
+    if (!parent) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error('[Vant] TabbarItem must be a child component of Tabbar.');
+      }
+      return;
+    }
 
     const active = computed(() => {
       const { route, modelValue } = parent.props;
@@ -39,7 +46,7 @@ export default createComponent({
         const { to } = props;
         const config = isObject(to) ? to : { path: to };
         const pathMatched = config.path === $route.path;
-        const nameMatched = isDef(config.name) && config.name === $route.name;
+        const nameMatched = 'name' in config && config.name === $route.name;
 
         return pathMatched || nameMatched;
       }
@@ -47,8 +54,8 @@ export default createComponent({
       return (props.name || index.value) === modelValue;
     });
 
-    const onClick = (event) => {
+    const onClick = (event: MouseEvent) => {
-      parent.setActive(props.name || index.value);
+      parent.setActive(props.name ?? index.value);
       emit('click', event);
       route();
     };

src/tabbar/index.tsx

@@ -1,9 +1,9 @@
-import { ref } from 'vue';
+import { ref, PropType } from 'vue';
 
 // Utils
-import { createNamespace, isDef } from '../utils';
+import { createNamespace } from '../utils';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
-import { callInterceptor } from '../utils/interceptor';
+import { callInterceptor, Interceptor } from '../utils/interceptor';
 
 // Composition
 import { useChildren } from '@vant/use';
@@ -13,13 +13,23 @@ const [createComponent, bem] = createNamespace('tabbar');
 
 export const TABBAR_KEY = 'vanTabbar';
 
+export type TabbarProvide = {
+  props: {
+    route?: boolean;
+    modelValue: number | string;
+    activeColor?: string;
+    inactiveColor?: string;
+  };
+  setActive: (active: number | string) => void;
+};
+
 export default createComponent({
   props: {
     route: Boolean,
     zIndex: [Number, String],
     placeholder: Boolean,
     activeColor: String,
-    beforeChange: Function,
+    beforeChange: Function as PropType<Interceptor>,
     inactiveColor: String,
     modelValue: {
       type: [Number, String],
@@ -34,7 +44,7 @@ export default createComponent({
       default: true,
     },
     safeAreaInsetBottom: {
-      type: Boolean,
+      type: Boolean as PropType<boolean | null>,
       default: null,
     },
   },
@@ -42,12 +52,12 @@ export default createComponent({
   emits: ['change', 'update:modelValue'],
 
   setup(props, { emit, slots }) {
-    const root = ref();
+    const root = ref<HTMLElement>();
     const { linkChildren } = useChildren(TABBAR_KEY);
     const renderPlaceholder = usePlaceholder(root, bem);
 
     const isUnfit = () => {
-      if (isDef(props.safeAreaInsetBottom)) {
+      if (props.safeAreaInsetBottom !== null) {
         return !props.safeAreaInsetBottom;
       }
       // enable safe-area-inset-bottom by default when fixed
@@ -56,19 +66,21 @@ export default createComponent({
 
     const renderTabbar = () => {
       const { fixed, zIndex, border } = props;
-      const unfit = isUnfit();
       return (
         <div
           ref={root}
-          style={{ zIndex }}
+          style={{ zIndex: zIndex !== undefined ? +zIndex : undefined }}
-          class={[bem({ unfit, fixed }), { [BORDER_TOP_BOTTOM]: border }]}
+          class={[
+            bem({ unfit: isUnfit(), fixed }),
+            { [BORDER_TOP_BOTTOM]: border },
+          ]}
         >
           {slots.default?.()}
         </div>
       );
     };
 
-    const setActive = (active) => {
+    const setActive = (active: number | string) => {
       if (active !== props.modelValue) {
         callInterceptor({
           interceptor: props.beforeChange,