feat(Calendar): add safe-area-inset-top prop (#10358)

packages/vant/src/calendar/Calendar.tsx

@@ -79,6 +79,7 @@ const calendarProps = {
   showRangePrompt: truthProp,
   confirmDisabledText: String,
   closeOnClickOverlay: truthProp,
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: truthProp,
   minDate: {
     type: Date,
@@ -565,6 +566,7 @@ export default defineComponent({
             closeable={props.showTitle || props.showSubtitle}
             teleport={props.teleport}
             closeOnPopstate={props.closeOnPopstate}
+            safeAreaInsetTop={props.safeAreaInsetTop}
             closeOnClickOverlay={props.closeOnClickOverlay}
             onUpdate:show={updateShow}
           />

packages/vant/src/calendar/README.md

@@ -279,6 +279,7 @@ Following props are supported when the poppable is true
 | round | Whether to show round corner | _boolean_ | `true` |
 | close-on-popstate | Whether to close when popstate | _boolean_ | `true` |
 | close-on-click-overlay | Whether to close when overlay is clicked | _boolean_ | `true` |
+| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `true` |
 | teleport | Specifies a target element where Calendar will be mounted | _string \| Element_ | - |
 

packages/vant/src/calendar/README.zh-CN.md

@@ -283,6 +283,7 @@ export default {
 | round | 是否显示圆角弹窗 | _boolean_ | `true` |
 | close-on-popstate | 是否在页面回退时自动关闭 | _boolean_ | `true` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
+| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `true` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
 

packages/vant/src/nav-bar/NavBar.tsx

@@ -82,8 +82,11 @@ export default defineComponent({
           ref={navBarRef}
           style={style}
           class={[
-            bem({ fixed, 'safe-area-inset-top': props.safeAreaInsetTop }),
-            { [BORDER_BOTTOM]: border },
+            bem({ fixed }),
+            {
+              [BORDER_BOTTOM]: border,
+              'van-safe-area-top': props.safeAreaInsetTop,
+            },
           ]}
         >
           <div class={bem('content')}>

packages/vant/src/nav-bar/test/index.spec.ts

@@ -74,7 +74,7 @@ test('should have safe-area-inset-top class when using safe-area-inset-top prop'
     },
   });
 
-  expect(wrapper.classes()).toContain('van-nav-bar--safe-area-inset-top');
+  expect(wrapper.classes()).toContain('van-safe-area-top');
 });
 
 test('should change z-index when using z-index prop', () => {

packages/vant/src/popup/Popup.tsx

@@ -48,6 +48,7 @@ const popupProps = extend({}, popupSharedProps, {
   iconPrefix: String,
   closeOnPopstate: Boolean,
   closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
+  safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean,
 });
 
@@ -177,7 +178,7 @@ export default defineComponent({
     const onKeydown = (event: KeyboardEvent) => emit('keydown', event);
 
     const renderPopup = lazyRender(() => {
-      const { round, position, safeAreaInsetBottom } = props;
+      const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props;
 
       return (
         <div
@@ -189,7 +190,10 @@ export default defineComponent({
               round,
               [position]: position,
             }),
-            { 'van-safe-area-bottom': safeAreaInsetBottom },
+            {
+              'van-safe-area-top': safeAreaInsetTop,
+              'van-safe-area-bottom': safeAreaInsetBottom,
+            },
           ]}
           onKeydown={onKeydown}
           {...attrs}

packages/vant/src/popup/README.md

@@ -125,6 +125,7 @@ Use `teleport` prop to specify mount location.
 | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
 | transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
 | teleport | Specifies a target element where Popup will be mounted | _string \| Element_ | - |
+| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
 
 ### Events

packages/vant/src/popup/README.zh-CN.md

@@ -131,6 +131,7 @@ export default {
 | transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
 | transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
 | teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
+| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 | safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
 
 ### Events

packages/vant/src/popup/test/index.spec.jsx

@@ -259,3 +259,27 @@ test('should not call before-close when show prop becomes false', async () => {
   await wrapper.setProps({ show: false });
   expect(beforeClose).toHaveBeenCalledTimes(0);
 });
+
+test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => {
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      safeAreaInsetTop: true,
+    },
+  });
+
+  expect(wrapper.find('.van-popup').classes()).toContain('van-safe-area-top');
+});
+
+test('should have safe-area-inset-bottom class when using safe-area-inset-bottom prop', () => {
+  const wrapper = mount(Popup, {
+    props: {
+      show: true,
+      safeAreaInsetBottom: true,
+    },
+  });
+
+  expect(wrapper.find('.van-popup').classes()).toContain(
+    'van-safe-area-bottom'
+  );
+});

packages/vant/src/style/README.md

@@ -49,11 +49,15 @@ Add 1px border under the Retina screen for the element, based on a pseudo elemen
 <div class="van-hairline--surround"></div>
 ```
 
-### Safe Area Bottom
+### Safe Area
 
-Enable safe area inset bottom.
+Enable safe area.
 
 ```html
+<!-- top -->
+<div class="van-safe-area-top"></div>
+
+<!-- bottom -->
 <div class="van-safe-area-bottom"></div>
 ```
 

packages/vant/src/style/README.zh-CN.md

@@ -47,11 +47,15 @@ Vant 中默认包含了一些常用样式，可以直接通过 className 的方
 <div class="van-hairline--surround"></div>
 ```
 
-### 底部安全区
+### 安全区
 
-为元素添加底部安全区适配。
+为元素添加安全区适配。
 
 ```html
+<!-- 顶部安全区 -->
+<div class="van-safe-area-top"></div>
+
+<!-- 底部安全区 -->
 <div class="van-safe-area-bottom"></div>
 ```
 

packages/vant/src/style/base.less

@@ -26,6 +26,11 @@
   .multi-ellipsis(3);
 }
 
+.van-safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
 .van-safe-area-bottom {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);