chore: merge src and src-next

src/popup/README.md

@@ -15,7 +15,7 @@ Vue.use(Popup);
 
 ```html
 <van-cell is-link @click="showPopup">Show Popup</van-cell>
-<van-popup v-model="show">Content</van-popup>
+<van-popup v-model:show="show">Content</van-popup>
 ```
 
 ```js
@@ -39,21 +39,21 @@ export default {
 Use `position` prop to set popup display position
 
 ```html
-<van-popup v-model="show" position="top" :style="{ height: '30%' }" />
+<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
 ```
 
 ### Close Icon
 
 ```html
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   position="bottom"
   :style="{ height: '30%' }"
 />
 <!-- Custom Icon -->
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   close-icon="close"
   position="bottom"
@@ -61,7 +61,7 @@ Use `position` prop to set popup display position
 />
 <!-- Icon Position -->
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   close-icon-position="top-left"
   position="bottom"
@@ -72,7 +72,7 @@ Use `position` prop to set popup display position
 ### Round Corner
 
 ```html
-<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" />
+<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
 ```
 
 ### Get Container
@@ -81,13 +81,13 @@ Use `get-container` prop to specify mount location
 
 ```html
 <!-- mount to body -->
-<van-popup v-model="show" get-container="body" />
+<van-popup v-model:show="show" get-container="body" />
 
 <!-- mount to #app -->
-<van-popup v-model="show" get-container="#app" />
+<van-popup v-model:show="show" get-container="#app" />
 
 <!-- Specify the mount location by function -->
-<van-popup v-model="show" :get-container="getContainer" />
+<van-popup v-model:show="show" :get-container="getContainer" />
 ```
 
 ```js
@@ -108,7 +108,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model (value) | Whether to show popup | _boolean_ | `false` |
+| v-model:show | Whether to show popup | _boolean_ | `false` |
 | overlay | Whether to show overlay | _boolean_ | `true` |
 | position | Can be set to `top` `bottom` `right` `left` | _string_ | `center` |
 | overlay-class | Custom overlay class | _string_ | - |

src/popup/README.zh-CN.md

@@ -17,11 +17,11 @@ Vue.use(Popup);
 
 ### 基础用法
 
-通过`v-model`控制弹出层是否展示
+通过 `v-model:show` 控制弹出层是否展示
 
 ```html
 <van-cell is-link @click="showPopup">展示弹出层</van-cell>
-<van-popup v-model="show">内容</van-popup>
+<van-popup v-model:show="show">内容</van-popup>
 ```
 
 ```js
@@ -45,7 +45,7 @@ export default {
 通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`
 
 ```html
-<van-popup v-model="show" position="top" :style="{ height: '30%' }" />
+<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />
 ```
 
 ### 关闭图标
@@ -54,14 +54,14 @@ export default {
 
 ```html
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   position="bottom"
   :style="{ height: '30%' }"
 />
 <!-- 自定义图标 -->
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   close-icon="close"
   position="bottom"
@@ -69,7 +69,7 @@ export default {
 />
 <!-- 图标位置 -->
 <van-popup
-  v-model="show"
+  v-model:show="show"
   closeable
   close-icon-position="top-left"
   position="bottom"
@@ -82,7 +82,7 @@ export default {
 设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式
 
 ```html
-<van-popup v-model="show" round position="bottom" :style="{ height: '30%' }" />
+<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }" />
 ```
 
 ### 指定挂载位置
@@ -91,13 +91,13 @@ export default {
 
 ```html
 <!-- 挂载到 body 节点下 -->
-<van-popup v-model="show" get-container="body" />
+<van-popup v-model:show="show" get-container="body" />
 
 <!-- 挂载到 #app 节点下 -->
-<van-popup v-model="show" get-container="#app" />
+<van-popup v-model:show="show" get-container="#app" />
 
 <!-- 通过函数指定挂载位置 -->
-<van-popup v-model="show" :get-container="getContainer" />
+<van-popup v-model:show="show" :get-container="getContainer" />
 ```
 
 ```js
@@ -119,7 +119,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model (value) | 是否显示弹出层 | _boolean_ | `false` |
+| v-model:show | 是否显示弹出层 | _boolean_ | `false` |
 | overlay | 是否显示遮罩层 | _boolean_ | `true` |
 | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
 | overlay-class | 自定义遮罩层类名 | _string_ | - |

src/popup/demo/index.vue

@@ -2,7 +2,7 @@
   <demo-section>
     <demo-block card :title="t('basicUsage')">
       <van-cell :title="t('buttonBasic')" is-link @click="showBasic = true" />
-      <van-popup v-model="showBasic" :style="{ padding: '30px 50px' }">
+      <van-popup v-model:show="showBasic" :style="{ padding: '30px 50px' }">
         {{ t('content') }}
       </van-popup>
     </demo-block>
@@ -13,19 +13,23 @@
       <van-cell :title="t('buttonLeft')" is-link @click="showLeft = true" />
       <van-cell :title="t('buttonRight')" is-link @click="showRight = true" />
 
-      <van-popup v-model="showTop" position="top" :style="{ height: '30%' }" />
       <van-popup
-        v-model="showBottom"
+        v-model:show="showTop"
+        position="top"
+        :style="{ height: '30%' }"
+      />
+      <van-popup
+        v-model:show="showBottom"
         position="bottom"
         :style="{ height: '30%' }"
       />
       <van-popup
-        v-model="showLeft"
+        v-model:show="showLeft"
         position="left"
         :style="{ width: '30%', height: '100%' }"
       />
       <van-popup
-        v-model="showRight"
+        v-model:show="showRight"
         position="right"
         :style="{ width: '30%', height: '100%' }"
       />
@@ -45,20 +49,20 @@
       />
 
       <van-popup
-        v-model="showCloseIcon"
+        v-model:show="showCloseIcon"
         closeable
         position="bottom"
         :style="{ height: '30%' }"
       />
       <van-popup
-        v-model="showCustomCloseIcon"
+        v-model:show="showCustomCloseIcon"
         closeable
         close-icon="close"
         position="bottom"
         :style="{ height: '30%' }"
       />
       <van-popup
-        v-model="showCustomIconPosition"
+        v-model:show="showCustomIconPosition"
         closeable
         close-icon-position="top-left"
         position="bottom"
@@ -73,7 +77,7 @@
         @click="showRoundCorner = true"
       />
       <van-popup
-        v-model="showRoundCorner"
+        v-model:show="showRoundCorner"
         round
         position="bottom"
         :style="{ height: '30%' }"
@@ -87,7 +91,7 @@
         @click="showGetContainer = true"
       />
       <van-popup
-        v-model="showGetContainer"
+        v-model:show="showGetContainer"
         get-container="body"
         :style="{ padding: '30px 50px' }"
       />

src/popup/index.js

@@ -1,12 +1,16 @@
-import { createNamespace, isDef } from '../utils';
+import { Teleport, Transition } from 'vue';
+import { createNamespace, isDef, isFunction } from '../utils';
 import { PopupMixin } from '../mixins/popup';
 import Icon from '../icon';
+import Overlay from '../overlay';
 
 const [createComponent, bem] = createNamespace('popup');
 
 export default createComponent({
   mixins: [PopupMixin()],
 
+  inheritAttrs: false,
+
   props: {
     round: Boolean,
     duration: [Number, String],
@@ -35,6 +39,16 @@ export default createComponent({
     },
   },
 
+  emits: [
+    'open',
+    'close',
+    'click',
+    'opened',
+    'closed',
+    'update:show',
+    'click-overlay',
+  ],
+
   beforeCreate() {
     const createEmitter = (eventName) => (event) =>
       this.$emit(eventName, event);
@@ -44,52 +58,80 @@ export default createComponent({
     this.onClosed = createEmitter('closed');
   },
 
+  methods: {
+    genOverlay() {
+      if (this.overlay) {
+        return <Overlay show={this.show} onClick={this.onClickOverlay} />;
+      }
+    },
+
+    genPopup() {
+      const { round, position, duration } = this;
+      const isCenter = position === 'center';
+
+      const transitionName =
+        this.transition ||
+        (isCenter ? 'van-fade' : `van-popup-slide-${position}`);
+
+      const style = {};
+      if (isDef(duration)) {
+        const key = isCenter ? 'animationDuration' : 'transitionDuration';
+        style[key] = `${duration}s`;
+      }
+
+      return (
+        <Transition
+          name={transitionName}
+          onAfterEnter={this.onOpened}
+          onAfterLeave={this.onClosed}
+        >
+          {this.shouldRender ? (
+            <div
+              vShow={this.show}
+              ref="root"
+              style={style}
+              class={bem({
+                round,
+                [position]: position,
+                'safe-area-inset-bottom': this.safeAreaInsetBottom,
+              })}
+              onClick={this.onClick}
+              {...this.$attrs}
+            >
+              {this.$slots.default?.()}
+              {this.closeable && (
+                <Icon
+                  role="button"
+                  tabindex="0"
+                  name={this.closeIcon}
+                  class={bem('close-icon', this.closeIconPosition)}
+                  onClick={this.close}
+                />
+              )}
+            </div>
+          ) : null}
+        </Transition>
+      );
+    },
+  },
+
   render() {
-    if (!this.shouldRender) {
-      return;
-    }
-
-    const { round, position, duration } = this;
-    const isCenter = position === 'center';
-
-    const transitionName =
-      this.transition ||
-      (isCenter ? 'van-fade' : `van-popup-slide-${position}`);
-
-    const style = {};
-    if (isDef(duration)) {
-      const key = isCenter ? 'animationDuration' : 'transitionDuration';
-      style[key] = `${duration}s`;
+    const { getContainer } = this;
+    if (getContainer) {
+      const to = isFunction(getContainer) ? getContainer() : getContainer;
+      return (
+        <Teleport to={to}>
+          {this.genOverlay()}
+          {this.genPopup()}
+        </Teleport>
+      );
     }
 
     return (
-      <transition
-        name={transitionName}
-        onAfterEnter={this.onOpened}
-        onAfterLeave={this.onClosed}
-      >
-        <div
-          vShow={this.value}
-          style={style}
-          class={bem({
-            round,
-            [position]: position,
-            'safe-area-inset-bottom': this.safeAreaInsetBottom,
-          })}
-          onClick={this.onClick}
-        >
-          {this.slots()}
-          {this.closeable && (
-            <Icon
-              role="button"
-              tabindex="0"
-              name={this.closeIcon}
-              class={bem('close-icon', this.closeIconPosition)}
-              onClick={this.close}
-            />
-          )}
-        </div>
-      </transition>
+      <>
+        {this.genOverlay()}
+        {this.genPopup()}
+      </>
     );
   },
 });

src/popup/index.less

@@ -82,22 +82,22 @@
       transition-timing-function: ease-in;
     }
 
-    &-slide-top-enter,
+    &-slide-top-enter-from,
     &-slide-top-leave-active {
       transform: translate3d(0, -100%, 0);
     }
 
-    &-slide-right-enter,
+    &-slide-right-enter-from,
     &-slide-right-leave-active {
       transform: translate3d(100%, -50%, 0);
     }
 
-    &-slide-bottom-enter,
+    &-slide-bottom-enter-from,
     &-slide-bottom-leave-active {
       transform: translate3d(0, 100%, 0);
     }
 
-    &-slide-left-enter,
+    &-slide-left-enter-from,
     &-slide-left-leave-active {
       transform: translate3d(-100%, -50%, 0);
     }