types(Sidebar): use tsx (#8121)

package.json

@@ -60,7 +60,7 @@
     "@vant/icons": "^1.5.2",
     "@vant/lazyload": "^1.0.2",
     "@vant/popperjs": "^1.0.2",
-    "@vant/use": "^1.0.2"
+    "@vant/use": "^1.0.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

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,
     });
 

yarn.lock

@@ -1981,10 +1981,10 @@
   resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8"
   integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ==
 
-"@vant/use@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.npm.taobao.org/@vant/use/download/@vant/use-1.0.2.tgz?cache=0&sync_timestamp=1609472383302&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.0.2.tgz#75486aedf3539382baa922c77eeb8a2e2394a948"
-  integrity sha1-dUhq7fNTk4K6qSLHfuuKLiOUqUg=
+"@vant/use@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@vant/use/-/use-1.0.3.tgz#ec3f82c30b883b1ceb36e49b60882e332ea04bf4"
+  integrity sha512-tnR6mdsjnN2mmiBznn8FNueyZYSFBavlOPNZd3Nf9SRP4QLPeHeebGSxWqYpFf6jpjYqOy0HHgtXz2Gu8dLeaw==
   dependencies:
     "@babel/runtime" "7.x"