vant 3.4.5 → 4.0.0-alpha.1

package/lib/index-bar/IndexBar.js

@@ -65,6 +65,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       children,
       linkChildren
     } = (0, import_use.useChildren)(INDEX_BAR_KEY);
+    let selectActiveIndex;
     linkChildren({
       props
     });
@@ -92,6 +93,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       return -1;
     };
+    const getMatchAnchor = (index) => children.find((item) => String(item.index) === index);
     const onScroll = () => {
       if ((0, import_utils.isHidden)(root)) {
         return;
@@ -103,7 +105,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const scrollTop = (0, import_utils.getScrollTop)(scrollParent.value);
       const scrollParentRect = (0, import_use.useRect)(scrollParent);
       const rects = children.map((item) => item.getRect(scrollParent.value, scrollParentRect));
-      const active = getActiveAnchor(scrollTop, rects);
+      let active = -1;
+      if (selectActiveIndex) {
+        const match = getMatchAnchor(selectActiveIndex);
+        if (match) {
+          const rect = match.getRect(scrollParent.value, scrollParentRect);
+          active = getActiveAnchor(rect.top, rects);
+        }
+      } else {
+        active = getActiveAnchor(scrollTop, rects);
+      }
       activeAnchor.value = indexList[active];
       if (sticky) {
         children.forEach((item, index) => {
@@ -122,7 +133,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           if (index === active) {
             state.active = true;
             state.top = Math.max(props.stickyOffsetTop, rects[index].top - scrollTop) + scrollParentRect.top;
-          } else if (index === active - 1) {
+          } else if (index === active - 1 && selectActiveIndex === "") {
             const activeItemTop = rects[active].top - scrollTop;
             state.active = activeItemTop > 0;
             state.top = activeItemTop + scrollParentRect.top - rects[index].height;
@@ -131,6 +142,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           }
         });
       }
+      selectActiveIndex = "";
     };
     const init = () => {
       (0, import_vue2.nextTick)(onScroll);
@@ -156,9 +168,18 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }, [index]);
     });
     const scrollTo = (index) => {
-      index = String(index);
-      const match = children.find((item) => String(item.index) === index);
+      selectActiveIndex = String(index);
+      const match = getMatchAnchor(selectActiveIndex);
       if (match) {
+        const scrollTop = (0, import_utils.getScrollTop)(scrollParent.value);
+        const scrollParentRect = (0, import_use.useRect)(scrollParent);
+        const {
+          offsetHeight
+        } = document.documentElement;
+        if (scrollTop === offsetHeight - scrollParentRect.height) {
+          onScroll();
+          return;
+        }
         match.$el.scrollIntoView();
         if (props.sticky && props.stickyOffsetTop) {
           (0, import_utils.setRootScrollTop)((0, import_utils.getRootScrollTop)() - props.stickyOffsetTop);

package/lib/index-bar/index.css

@@ -1 +1 @@
-:root{--van-index-bar-sidebar-z-index: 2;--van-index-bar-index-font-size: var(--van-font-size-xs);--van-index-bar-index-line-height: var(--van-line-height-xs);--van-index-bar-index-active-color: var(--van-danger-color)}.van-index-bar__sidebar{position:fixed;top:50%;right:0;z-index:var(--van-index-bar-sidebar-z-index);display:flex;flex-direction:column;text-align:center;transform:translateY(-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.van-index-bar__index{padding:0 var(--van-padding-xs) 0 var(--van-padding-md);font-weight:var(--van-font-weight-bold);font-size:var(--van-index-bar-index-font-size);line-height:var(--van-index-bar-index-line-height)}.van-index-bar__index--active{color:var(--van-index-bar-index-active-color)}
+body{--van-index-bar-sidebar-z-index: 2;--van-index-bar-index-font-size: var(--van-font-size-xs);--van-index-bar-index-line-height: var(--van-line-height-xs);--van-index-bar-index-active-color: var(--van-primary-color)}.van-index-bar__sidebar{position:fixed;top:50%;right:0;z-index:var(--van-index-bar-sidebar-z-index);display:flex;flex-direction:column;text-align:center;transform:translateY(-50%);cursor:pointer;-webkit-user-select:none;user-select:none}.van-index-bar__index{padding:0 var(--van-padding-xs) 0 var(--van-padding-md);font-weight:var(--van-font-bold);font-size:var(--van-index-bar-index-font-size);line-height:var(--van-index-bar-index-line-height)}.van-index-bar__index--active{color:var(--van-index-bar-index-active-color);font-weight:700}

package/lib/index-bar/index.less

@@ -1,10 +1,8 @@
-@import './var.less';
-
-:root {
-  --van-index-bar-sidebar-z-index: @index-bar-sidebar-z-index;
-  --van-index-bar-index-font-size: @index-bar-index-font-size;
-  --van-index-bar-index-line-height: @index-bar-index-line-height;
-  --van-index-bar-index-active-color: @index-bar-index-active-color;
+body {
+  --van-index-bar-sidebar-z-index: 2;
+  --van-index-bar-index-font-size: var(--van-font-size-xs);
+  --van-index-bar-index-line-height: var(--van-line-height-xs);
+  --van-index-bar-index-active-color: var(--van-primary-color);
 }
 
 .van-index-bar {
@@ -23,12 +21,13 @@
 
   &__index {
     padding: 0 var(--van-padding-xs) 0 var(--van-padding-md);
-    font-weight: var(--van-font-weight-bold);
+    font-weight: var(--van-font-bold);
     font-size: var(--van-index-bar-index-font-size);
     line-height: var(--van-index-bar-index-line-height);
 
     &--active {
       color: var(--van-index-bar-index-active-color);
+      font-weight: bold;
     }
   }
 }