feat(Popup): add safe-area-inset-top prop (#10357)

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'
+  );
+});