types(Sidebar): use tsx (#8121)

src/action-bar-button/index.tsx

@@ -29,14 +29,14 @@ export default createComponent({
 
     const isFirst = computed(() => {
       if (parent) {
-        const prev = parent.children[index!.value - 1];
+        const prev = parent.children[index.value - 1];
         return !(prev && 'isButton' in prev);
       }
     });
 
     const isLast = computed(() => {
       if (parent) {
-        const next = parent.children[index!.value + 1];
+        const next = parent.children[index.value + 1];
         return !(next && 'isButton' in next);
       }
     });

src/col/index.tsx

@@ -28,8 +28,8 @@ export default createComponent({
 
       const { spaces } = parent;
 
-      if (spaces && spaces.value && spaces.value[index!.value]) {
-        const { left, right } = spaces.value[index!.value];
+      if (spaces && spaces.value && spaces.value[index.value]) {
+        const { left, right } = spaces.value[index.value];
         return {
           paddingLeft: left ? `${left}px` : null,
           paddingRight: right ? `${right}px` : null,

src/sidebar-item/index.tsx

@@ -1,7 +1,7 @@
 import { createNamespace } from '../utils';
 import { useParent } from '@vant/use';
 import { useRoute, routeProps } from '../composables/use-route';
-import { SIDEBAR_KEY } from '../sidebar';
+import { SIDEBAR_KEY, SidebarProvide } from '../sidebar';
 import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
@@ -19,7 +19,16 @@ export default createComponent({
 
   setup(props, { emit, slots }) {
     const route = useRoute();
-    const { parent, index } = useParent(SIDEBAR_KEY);
+    const { parent, index } = useParent<SidebarProvide>(SIDEBAR_KEY);
+
+    if (!parent) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          '[Vant] SidebarItem must be a child component of Sidebar.'
+        );
+      }
+      return;
+    }
 
     const onClick = () => {
       if (props.disabled) {
@@ -27,14 +36,13 @@ export default createComponent({
       }
 
       emit('click', index.value);
-      parent.emit('update:modelValue', index.value);
       parent.setActive(index.value);
       route();
     };
 
     return () => {
       const { dot, badge, title, disabled } = props;
-      const selected = index.value === parent.active();
+      const selected = index.value === parent.getActive();
 
       return (
         <a class={bem({ select: selected, disabled })} onClick={onClick}>

src/sidebar/README.md

@@ -90,9 +90,9 @@ export default {
 
 ### Sidebar Events
 
-| Event  | Description                      | Arguments                    |
-| ------ | -------------------------------- | ---------------------------- |
-| change | Emitted when chosen item changed | index: index of current item |
+| Event  | Description                      | Arguments       |
+| ------ | -------------------------------- | --------------- |
+| change | Emitted when chosen item changed | _index: number_ |
 
 ### SidebarItem Props
 
@@ -108,9 +108,9 @@ export default {
 
 ### SidebarItem Events
 
-| Event | Description                     | Arguments                    |
-| ----- | ------------------------------- | ---------------------------- |
-| click | Emitted when an item is clicked | index: index of current item |
+| Event | Description                     | Arguments       |
+| ----- | ------------------------------- | --------------- |
+| click | Emitted when an item is clicked | _index: number_ |
 
 ### SidebarItem Slots
 

src/sidebar/README.zh-CN.md

@@ -98,9 +98,9 @@ export default {
 
 ### Sidebar Events
 
-| 事件名 | 说明             | 回调参数                |
-| ------ | ---------------- | ----------------------- |
-| change | 切换导航项时触发 | index: 当前导航项的索引 |
+| 事件名 | 说明             | 回调参数        |
+| ------ | ---------------- | --------------- |
+| change | 切换导航项时触发 | _index: number_ |
 
 ### SidebarItem Props
 
@@ -116,9 +116,9 @@ export default {
 
 ### SidebarItem Events
 
-| 事件名 | 说明       | 回调参数                |
-| ------ | ---------- | ----------------------- |
-| click  | 点击时触发 | index: 当前导航项的索引 |
+| 事件名 | 说明       | 回调参数        |
+| ------ | ---------- | --------------- |
+| click  | 点击时触发 | _index: number_ |
 
 ### SidebarItem Slots
 

src/sidebar/index.tsx

@@ -1,4 +1,3 @@
-import { watch } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -6,6 +5,11 @@ const [createComponent, bem] = createNamespace('sidebar');
 
 export const SIDEBAR_KEY = 'vanSidebar';
 
+export type SidebarProvide = {
+  getActive: () => number;
+  setActive: (value: number) => void;
+};
+
 export default createComponent({
   props: {
     modelValue: {
@@ -19,19 +23,17 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(SIDEBAR_KEY);
 
-    const active = () => +props.modelValue;
+    const getActive = () => +props.modelValue;
 
-    const setActive = (value) => {
-      if (value !== active()) {
+    const setActive = (value: number) => {
+      if (value !== getActive()) {
+        emit('update:modelValue', value);
         emit('change', value);
       }
     };
 
-    watch(active, setActive);
-
     linkChildren({
-      emit,
-      active,
+      getActive,
       setActive,
     });