Merge branch '2.x' into dev

src/icon/README.md

@@ -58,6 +58,8 @@ Icon uses font file in `yzcdn.cn` by default，if you want to use the local font
 import 'vant/lib/icon/local.css';
 ```
 
+> Tips: Starting from version 2.10.13, Vant will use local font files in woff2 format by default
+
 ### Add custom iconfont
 
 ```css

src/icon/README.zh-CN.md

@@ -60,6 +60,8 @@ Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载
 import 'vant/lib/icon/local.css';
 ```
 
+> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。
+
 ### 自定义图标
 
 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。

src/nav-bar/README.md

@@ -64,6 +64,7 @@ export default {
 | fixed | Whether to fixed top | _boolean_ | `false` |
 | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` |
 | z-index | Z-index | _number \| string_ | `1` |
+| safe-area-inset-top `v2.10.13` | Whether to enable top safe area adaptation | _boolean_ | `false` |
 
 ### Slots
 

src/nav-bar/README.zh-CN.md

@@ -65,7 +65,8 @@ export default {
 | border | 是否显示下边框 | _boolean_ | `true` |
 | fixed | 是否固定在顶部 | _boolean_ | `false` |
 | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` |
-| z-index | 元素 z-index | _number \| string_ | `1` |
+| z-index | 导航栏 z-index | _number \| string_ | `1` |
+| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` |
 
 ### Slots
 

src/nav-bar/index.less

@@ -1,25 +1,12 @@
 @import '../style/var';
 
 .van-nav-bar {
-  position: relative;
   z-index: @nav-bar-z-index;
-  display: flex;
-  align-items: center;
-  height: @nav-bar-height;
-  line-height: 1.5;
+  line-height: @line-height-lg;
   text-align: center;
   background-color: @nav-bar-background-color;
   user-select: none;
 
-  .van-icon {
-    color: @nav-bar-icon-color;
-  }
-
-  &__arrow {
-    margin-right: @padding-base;
-    font-size: @nav-bar-arrow-size;
-  }
-
   &--fixed {
     position: fixed;
     top: 0;
@@ -27,6 +14,27 @@
     width: 100%;
   }
 
+  &--safe-area-inset-top {
+    padding-top: constant(safe-area-inset-bottom);
+    padding-top: env(safe-area-inset-bottom);
+  }
+
+  .van-icon {
+    color: @nav-bar-icon-color;
+  }
+
+  &__content {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: @nav-bar-height;
+  }
+
+  &__arrow {
+    margin-right: @padding-base;
+    font-size: @nav-bar-arrow-size;
+  }
+
   &__title {
     max-width: 60%;
     margin: 0 auto;

src/nav-bar/index.tsx

@@ -21,6 +21,7 @@ export default createComponent({
     rightText: String,
     leftArrow: Boolean,
     placeholder: Boolean,
+    safeAreaInsetTop: Boolean,
     border: {
       type: Boolean,
       default: true,
@@ -75,21 +76,26 @@ export default createComponent({
         <div
           ref={navBarRef}
           style={style}
-          class={[bem({ fixed }), { [BORDER_BOTTOM]: border }]}
+          class={[
+            bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
+            { [BORDER_BOTTOM]: border },
+          ]}
         >
-          {hasLeft && (
-            <div class={bem('left')} onClick={onClickLeft}>
-              {renderLeft()}
+          <div class={bem('content')}>
+            {hasLeft && (
+              <div class={bem('left')} onClick={onClickLeft}>
+                {renderLeft()}
+              </div>
+            )}
+            <div class={[bem('title'), 'van-ellipsis']}>
+              {slots.title ? slots.title() : title}
             </div>
-          )}
-          <div class={[bem('title'), 'van-ellipsis']}>
-            {slots.title ? slots.title() : title}
+            {hasRight && (
+              <div class={bem('right')} onClick={onClickRight}>
+                {renderRight()}
+              </div>
+            )}
           </div>
-          {hasRight && (
-            <div class={bem('right')} onClick={onClickRight}>
-              {renderRight()}
-            </div>
-          )}
         </div>
       );
     };

src/nav-bar/test/__snapshots__/demo.legacy.js.snap

@@ -4,19 +4,23 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-nav-bar van-hairline--bottom">
-      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
-          <!----></i><span class="van-nav-bar__text">返回</span></div>
-      <div class="van-nav-bar__title van-ellipsis">标题</div>
-      <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
+      <div class="van-nav-bar__content">
+        <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+            <!----></i><span class="van-nav-bar__text">返回</span></div>
+        <div class="van-nav-bar__title van-ellipsis">标题</div>
+        <div class="van-nav-bar__right"><span class="van-nav-bar__text">按钮</span></div>
+      </div>
     </div>
   </div>
   <div>
     <div class="van-nav-bar van-hairline--bottom">
-      <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
-          <!----></i><span class="van-nav-bar__text">返回</span></div>
-      <div class="van-nav-bar__title van-ellipsis">标题</div>
-      <div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
-          <!----></i></div>
+      <div class="van-nav-bar__content">
+        <div class="van-nav-bar__left"><i class="van-icon van-icon-arrow-left van-nav-bar__arrow">
+            <!----></i><span class="van-nav-bar__text">返回</span></div>
+        <div class="van-nav-bar__title van-ellipsis">标题</div>
+        <div class="van-nav-bar__right"><i class="van-icon van-icon-search" style="font-size: 18px;">
+            <!----></i></div>
+      </div>
     </div>
   </div>
 </div>

src/nav-bar/test/__snapshots__/index.legacy.js.snap

@@ -1,23 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`placeholder prop 1`] = `
-<div class="van-nav-bar__placeholder" style="height: 50px;">
-  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+exports[`should render left/right slot and match snapshot 1`] = `
+<div class="van-nav-bar van-hairline--bottom">
+  <div class="van-nav-bar__content">
+    <div class="van-nav-bar__left">Custom Left</div>
     <div class="van-nav-bar__title van-ellipsis"></div>
+    <div class="van-nav-bar__right">Custom Right</div>
   </div>
 </div>
 `;
 
-exports[`render left & right slot 1`] = `
-<div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__left">Custom Left</div>
-  <div class="van-nav-bar__title van-ellipsis"></div>
-  <div class="van-nav-bar__right">Custom Right</div>
+exports[`should render placeholder element when using placeholder prop 1`] = `
+<div class="van-nav-bar__placeholder" style="height: 50px;">
+  <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
+    <div class="van-nav-bar__content">
+      <div class="van-nav-bar__title van-ellipsis"></div>
+    </div>
+  </div>
 </div>
 `;
 
-exports[`render title slot 1`] = `
+exports[`should render title slot and match snapshot 1`] = `
 <div class="van-nav-bar van-hairline--bottom">
-  <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+  <div class="van-nav-bar__content">
+    <div class="van-nav-bar__title van-ellipsis">Custom Title</div>
+  </div>
 </div>
 `;

src/nav-bar/test/index.legacy.js

@@ -1,7 +1,7 @@
 import NavBar from '..';
 import { mount, mockGetBoundingClientRect } from '../../../test';
 
-test('render left & right slot', () => {
+test('should render left/right slot and match snapshot', () => {
   const wrapper = mount(NavBar, {
     scopedSlots: {
       left: () => 'Custom Left',
@@ -12,7 +12,7 @@ test('render left & right slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('render title slot', () => {
+test('should render title slot and match snapshot', () => {
   const wrapper = mount(NavBar, {
     scopedSlots: {
       title: () => 'Custom Title',
@@ -22,7 +22,7 @@ test('render title slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('placeholder prop', () => {
+test('should render placeholder element when using placeholder prop', () => {
   const restore = mockGetBoundingClientRect({ height: 50 });
 
   const wrapper = mount(NavBar, {
@@ -37,7 +37,7 @@ test('placeholder prop', () => {
   restore();
 });
 
-test('click-left event', () => {
+test('should emit click-left event when clicking left text', () => {
   const wrapper = mount(NavBar, {
     propsData: {
       leftText: 'left',
@@ -48,7 +48,7 @@ test('click-left event', () => {
   expect(wrapper.emitted('click-left')).toBeTruthy();
 });
 
-test('click-right event', () => {
+test('should emit click-right event when clicking right text', () => {
   const wrapper = mount(NavBar, {
     propsData: {
       rightText: 'right',
@@ -58,3 +58,13 @@ test('click-right event', () => {
   wrapper.find('.van-nav-bar__right').trigger('click');
   expect(wrapper.emitted('click-right')).toBeTruthy();
 });
+
+test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => {
+  const wrapper = mount(NavBar, {
+    propsData: {
+      safeAreaInsetTop: true,
+    },
+  });
+
+  expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy();
+});

src/notice-bar/index.js

@@ -1,8 +1,8 @@
-import { ref, watch, reactive, nextTick, onActivated } from 'vue';
+import { ref, watch, reactive, onActivated } from 'vue';
 import { isDef, createNamespace } from '../utils';
 
 // Composition
-import { useRect, doubleRaf, useEventListener } from '@vant/use';
+import { raf, useRect, doubleRaf, useEventListener } from '@vant/use';
 
 // Components
 import Icon from '../icon';
@@ -94,7 +94,8 @@ export default createComponent({
       state.duration = 0;
 
       // wait for Vue to render offset
-      nextTick(() => {
+      // using nextTick won't work in iOS14
+      raf(() => {
         // use double raf to ensure animation can start
         doubleRaf(() => {
           state.offset = -contentWidth;