From e0ad5107d7572ed7bc912928a0c23fc5120b77ff Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 20 Nov 2020 21:12:28 +0800
Subject: [PATCH] chore(Popover): refactor with composition api

---
 docs/markdown/migrate-from-v2.zh-CN.md |   1 +
 src/popover/README.md                  |  17 +-
 src/popover/README.zh-CN.md            |  19 +-
 src/popover/demo/index.vue             | 244 +++++++++++++------------
 src/popover/index.js                   | 172 ++++++++---------
 src/popover/index.less                 |   2 +-
 src/popup/index.js                     |   5 +
 7 files changed, 225 insertions(+), 235 deletions(-)

diff --git a/docs/markdown/migrate-from-v2.zh-CN.md b/docs/markdown/migrate-from-v2.zh-CN.md
index e30950dc4..070e30917 100644
--- a/docs/markdown/migrate-from-v2.zh-CN.md
+++ b/docs/markdown/migrate-from-v2.zh-CN.md
@@ -59,6 +59,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
 - Dialog
 - ImagePreview
 - Notify
+- Popover
 - Popup
 - ShareSheet
 
diff --git a/src/popover/README.md b/src/popover/README.md
index 4d9499ece..fdb0314e9 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -3,10 +3,11 @@
 ### Install
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Popover } from 'vant';
 
-Vue.use(Popover);
+const app = createApp();
+app.use(Popover);
 ```
 
 ## Usage
@@ -14,7 +15,7 @@ Vue.use(Popover);
 ### Basic Usage
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Light Theme
@@ -50,7 +51,7 @@ export default {
 Using the `theme` prop to change the style of Popover.
 
 ```html
-<van-popover v-model="showPopover" theme="dark" :actions="actions">
+<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Dark Theme
@@ -100,7 +101,7 @@ bottom-end    # Bottom right
 ### Show Icon
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Show Icon
@@ -129,7 +130,7 @@ export default {
 Using the `disabled` option to disable an action.
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       Disable Action
@@ -159,14 +160,14 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model | Whether to show Popover | _boolean_ | `false` |
+| v-model:show | Whether to show Popover | _boolean_ | `false` |
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
 | close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` |
-| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` |
+| teleport | Return the mount node for Popover | _string \| Element_ | `body` |
 
 ### Data Structure of Action
 
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 12ade4c26..034bc2f13 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -7,10 +7,11 @@
 ### 引入
 
 ```js
-import Vue from 'vue';
+import { createApp } from 'vue';
 import { Popover } from 'vant';
 
-Vue.use(Popover);
+const app = createApp();
+app.use(Popover);
 ```
 
 ## 代码演示
@@ -20,7 +21,7 @@ Vue.use(Popover);
 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       浅色风格
@@ -53,7 +54,7 @@ export default {
 Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
 
 ```html
-<van-popover v-model="showPopover" theme="dark" :actions="actions">
+<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       深色风格
@@ -103,7 +104,7 @@ bottom-end    # 底部右侧位置
 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       展示图标
@@ -132,7 +133,7 @@ export default {
 在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
     <van-button type="primary" @click="showPopover = true">
       禁用选项
@@ -161,7 +162,7 @@ export default {
 通过默认插槽，可以在 Popover 内部放置任意内容。
 
 ```html
-<van-popover v-model="showPopover">
+<van-popover v-model:show="showPopover">
   <van-grid
     square
     clickable
@@ -201,14 +202,14 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 是否展示气泡弹出层 | _boolean_ | `false` |
+| v-model:show | 是否展示气泡弹出层 | _boolean_ | `false` |
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部元素后关闭菜单 | _boolean_ | `true` |
-| get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` |
+| teleport | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| Element_ | `body` |
 
 ### Action 数据结构
 
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index b23669027..76deaf814 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -1,125 +1,123 @@
 <template>
-  <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-popover
-        v-model="show.lightTheme"
-        :actions="t('actions')"
-        placement="bottom-start"
-        style="margin-left: 16px;"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.lightTheme = true">
-            {{ t('lightTheme') }}
-          </van-button>
-        </template>
-      </van-popover>
-      <van-popover
-        v-model="show.darkTheme"
-        theme="dark"
-        :actions="t('actions')"
-        style="margin-left: 16px;"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.darkTheme = true">
-            {{ t('darkTheme') }}
-          </van-button>
-        </template>
-      </van-popover>
-    </demo-block>
+  <demo-block :title="t('basicUsage')">
+    <van-popover
+      v-model:show="show.lightTheme"
+      :actions="t('actions')"
+      placement="bottom-start"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary" @click="show.lightTheme = true">
+          {{ t('lightTheme') }}
+        </van-button>
+      </template>
+    </van-popover>
+    <van-popover
+      v-model:show="show.darkTheme"
+      theme="dark"
+      :actions="t('actions')"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary" @click="show.darkTheme = true">
+          {{ t('darkTheme') }}
+        </van-button>
+      </template>
+    </van-popover>
+  </demo-block>
 
-    <demo-block :title="t('placement')">
-      <van-field
-        is-link
-        readonly
-        name="picker"
-        :label="t('choosePlacement')"
-        @click="showPicker = true"
-      />
+  <demo-block :title="t('placement')">
+    <van-field
+      is-link
+      readonly
+      name="picker"
+      :label="t('choosePlacement')"
+      @click="showPicker = true"
+    />
 
-      <van-popup
-        v-model="showPicker"
-        round
-        position="bottom"
-        get-container="body"
-      >
-        <div class="demo-popover-box">
-          <van-popover
-            v-model="show.placement"
-            theme="dark"
-            :actions="t('shortActions')"
-            :placement="currentPlacement"
-            @select="onSelect"
-          >
-            <template #reference>
-              <div class="demo-popover-refer" />
-            </template>
-          </van-popover>
-        </div>
-        <van-picker :columns="placements" @change="onPickerChange" />
-      </van-popup>
-    </demo-block>
-
-    <demo-block :title="t('actionOptions')">
-      <van-popover
-        v-model="show.showIcon"
-        :actions="t('actionsWithIcon')"
-        placement="bottom-start"
-        style="margin-left: 16px;"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.showIcon = true">
-            {{ t('showIcon') }}
-          </van-button>
-        </template>
-      </van-popover>
-
-      <van-popover
-        v-model="show.disableAction"
-        :actions="t('actionsDisabled')"
-        style="margin-left: 16px;"
-        @select="onSelect"
-      >
-        <template #reference>
-          <van-button type="primary" @click="show.disableAction = true">
-            {{ t('disableAction') }}
-          </van-button>
-        </template>
-      </van-popover>
-    </demo-block>
-
-    <demo-block :title="t('customContent')">
-      <van-popover
-        v-model="show.customContent"
-        placement="top-start"
-        style="margin-left: 16px;"
-        @select="onSelect"
-      >
-        <van-grid
-          square
-          clickable
-          :border="false"
-          column-num="3"
-          style="width: 240px;"
+    <van-popup
+      v-model:show="showPicker"
+      round
+      position="bottom"
+      get-container="body"
+    >
+      <div class="demo-popover-box">
+        <van-popover
+          v-model:show="show.placement"
+          theme="dark"
+          :actions="t('shortActions')"
+          :placement="currentPlacement"
+          @select="onSelect"
         >
-          <van-grid-item
-            v-for="i in 6"
-            :key="i"
-            icon="photo-o"
-            :text="t('option')"
-            @click="show.customContent = false"
-          />
-        </van-grid>
-        <template #reference>
-          <van-button type="primary" @click="show.customContent = true">
-            {{ t('customContent') }}
-          </van-button>
-        </template>
-      </van-popover>
-    </demo-block>
-  </demo-section>
+          <template #reference>
+            <div class="demo-popover-refer" />
+          </template>
+        </van-popover>
+      </div>
+      <van-picker
+        :columns="placements"
+        :show-toolbar="false"
+        @change="onPickerChange"
+      />
+    </van-popup>
+  </demo-block>
+
+  <demo-block :title="t('actionOptions')">
+    <van-popover
+      v-model:show="show.showIcon"
+      :actions="t('actionsWithIcon')"
+      placement="bottom-start"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary" @click="show.showIcon = true">
+          {{ t('showIcon') }}
+        </van-button>
+      </template>
+    </van-popover>
+
+    <van-popover
+      v-model:show="show.disableAction"
+      :actions="t('actionsDisabled')"
+      @select="onSelect"
+    >
+      <template #reference>
+        <van-button type="primary" @click="show.disableAction = true">
+          {{ t('disableAction') }}
+        </van-button>
+      </template>
+    </van-popover>
+  </demo-block>
+
+  <demo-block :title="t('customContent')">
+    <van-popover
+      v-model:show="show.customContent"
+      placement="top-start"
+      style="margin-left: 16px;"
+      @select="onSelect"
+    >
+      <van-grid
+        square
+        clickable
+        :border="false"
+        column-num="3"
+        style="width: 240px;"
+      >
+        <van-grid-item
+          v-for="i in 6"
+          :key="i"
+          icon="photo-o"
+          :text="t('option')"
+          @click="show.customContent = false"
+        />
+      </van-grid>
+      <template #reference>
+        <van-button type="primary" @click="show.customContent = true">
+          {{ t('customContent') }}
+        </van-button>
+      </template>
+    </van-popover>
+  </demo-block>
 </template>
 
 <script>
@@ -209,7 +207,7 @@ export default {
   },
 
   methods: {
-    onPickerChange(picker, value) {
+    onPickerChange(value) {
       setTimeout(() => {
         this.show.placement = true;
         this.currentPlacement = value;
@@ -233,6 +231,10 @@ export default {
     border-radius: 8px;
   }
 
+  .van-popover__wrapper {
+    margin-left: @padding-md;
+  }
+
   .van-field {
     width: auto;
     margin: 0 12px;
@@ -244,6 +246,10 @@ export default {
     display: flex;
     justify-content: center;
     margin: 110px 0;
+
+    .van-popover__wrapper {
+      margin-left: 0;
+    }
   }
 }
 </style>
diff --git a/src/popover/index.js b/src/popover/index.js
index 943fda9f9..04f846648 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -1,11 +1,14 @@
+import { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import offsetModifier from '@popperjs/core/lib/modifiers/offset';
 import extendsHelper from '@babel/runtime/helpers/esm/extends';
+
+// Utils
 import { createNamespace } from '../utils';
 import { BORDER_BOTTOM } from '../utils/constant';
 
-// Mixins
-import { ClickOutsideMixin } from '../mixins/click-outside';
+// Composition
+import { useClickAway } from '@vant/use';
 
 // Components
 import Icon from '../icon';
@@ -21,15 +24,10 @@ if (!Object.assign) {
 const [createComponent, bem] = createNamespace('popover');
 
 export default createComponent({
-  mixins: [
-    ClickOutsideMixin({
-      event: 'touchstart',
-      method: 'onClickOutside',
-    }),
-  ],
+  inheritAttrs: false,
 
   props: {
-    value: Boolean,
+    show: Boolean,
     overlay: Boolean,
     textColor: String,
     backgroundColor: String,
@@ -49,8 +47,8 @@ export default createComponent({
       type: String,
       default: 'bottom',
     },
-    getContainer: {
-      type: [String, Function],
+    teleport: {
+      type: [String, Object],
       default: 'body',
     },
     closeOnClickAction: {
@@ -59,26 +57,16 @@ export default createComponent({
     },
   },
 
-  watch: {
-    value: 'updateLocation',
-    placement: 'updateLocation',
-  },
+  emits: ['select', 'touchstart', 'update:show'],
 
-  mounted() {
-    this.updateLocation();
-  },
+  setup(props, { emit, slots, attrs }) {
+    let popper;
+    const wrapperRef = ref();
+    const popoverRef = ref();
 
-  beforeDestroy() {
-    if (this.popper) {
-      this.popper.destroy();
-      this.popper = null;
-    }
-  },
-
-  methods: {
-    createPopper() {
-      return createPopper(this.$refs.wrapper, this.$refs.popover.$el, {
-        placement: this.placement,
+    const createPopperInstance = () => {
+      return createPopper(wrapperRef.value, popoverRef.value.popupRef.value, {
+        placement: props.placement,
         modifiers: [
           {
             name: 'computeStyles',
@@ -90,111 +78,99 @@ export default createComponent({
           {
             ...offsetModifier,
             options: {
-              offset: this.offset,
+              offset: props.offset,
             },
           },
         ],
       });
-    },
+    };
 
-    updateLocation() {
-      this.$nextTick(() => {
-        if (!this.value) {
+    const updateLocation = () => {
+      nextTick(() => {
+        if (!props.show) {
           return;
         }
 
-        if (!this.popper) {
-          this.popper = this.createPopper();
+        if (!popper) {
+          popper = createPopperInstance();
         } else {
-          this.popper.setOptions({
-            placement: this.placement,
+          popper.setOptions({
+            placement: props.placement,
           });
         }
       });
-    },
+    };
 
-    renderAction(action, index) {
+    const toggle = (value) => {
+      emit('update:show', value);
+    };
+
+    const onTouchstart = (event) => {
+      event.stopPropagation();
+      emit('touchstart', event);
+    };
+
+    const onClickAction = (action, index) => {
+      if (action.disabled) {
+        return;
+      }
+
+      emit('select', action, index);
+
+      if (props.closeOnClickAction) {
+        toggle(false);
+      }
+    };
+
+    const onClickAway = () => {
+      toggle(false);
+    };
+
+    const renderAction = (action, index) => {
       const { icon, text, disabled, className } = action;
       return (
         <div
           class={[bem('action', { disabled, 'with-icon': icon }), className]}
-          onClick={() => this.onClickAction(action, index)}
+          onClick={() => onClickAction(action, index)}
         >
           {icon && <Icon name={icon} class={bem('action-icon')} />}
           <div class={[bem('action-text'), BORDER_BOTTOM]}>{text}</div>
         </div>
       );
-    },
+    };
 
-    onToggle(value) {
-      this.$emit('input', value);
-    },
-
-    onTouchstart(event) {
-      event.stopPropagation();
-      this.$emit('touchstart', event);
-    },
-
-    onClickAction(action, index) {
-      if (action.disabled) {
-        return;
+    onMounted(updateLocation);
+    onBeforeUnmount(() => {
+      if (popper) {
+        popper.destroy();
+        popper = null;
       }
+    });
 
-      this.$emit('select', action, index);
+    watch([() => props.show, () => props.placement], updateLocation);
 
-      if (this.closeOnClickAction) {
-        this.$emit('input', false);
-      }
-    },
+    useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
 
-    onClickOutside() {
-      this.$emit('input', false);
-    },
-
-    onOpen() {
-      this.$emit('open');
-    },
-
-    /* istanbul ignore next */
-    onOpened() {
-      this.$emit('opened');
-    },
-
-    onClose() {
-      this.$emit('close');
-    },
-
-    /* istanbul ignore next */
-    onClosed() {
-      this.$emit('closed');
-    },
-  },
-
-  render() {
-    return (
-      <span ref="wrapper" class={bem('wrapper')}>
+    return () => (
+      <span ref={wrapperRef} class={bem('wrapper')}>
         <Popup
-          ref="popover"
-          value={this.value}
-          class={bem([this.theme])}
-          overlay={this.overlay}
+          ref={popoverRef}
+          show={props.show}
+          class={bem([props.theme])}
+          overlay={props.overlay}
           position={null}
+          teleport={props.teleport}
           transition="van-popover-zoom"
           lockScroll={false}
-          getContainer={this.getContainer}
-          onOpen={this.onOpen}
-          onClose={this.onClose}
-          onInput={this.onToggle}
-          onOpened={this.onOpened}
-          onClosed={this.onClosed}
-          nativeOnTouchstart={this.onTouchstart}
+          onTouchstart={onTouchstart}
+          {...{ ...attrs, 'onUpdate:show': toggle }}
         >
           <div class={bem('arrow')} />
           <div class={bem('content')}>
-            {this.slots('default') || this.actions.map(this.renderAction)}
+            {slots.default ? slots.default() : props.actions.map(renderAction)}
           </div>
         </Popup>
-        {this.slots('reference')}
+        {slots.reference?.()}
       </span>
     );
   },
diff --git a/src/popover/index.less b/src/popover/index.less
index a97e0ec6a..357abf18b 100644
--- a/src/popover/index.less
+++ b/src/popover/index.less
@@ -253,7 +253,7 @@
     }
   }
 
-  &-zoom-enter,
+  &-zoom-enter-from,
   &-zoom-leave-active {
     transform: scale(0.8);
     opacity: 0;
diff --git a/src/popup/index.js b/src/popup/index.js
index 8350bec2e..7c308b341 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -14,6 +14,7 @@ import { createNamespace, isDef } from '../utils';
 
 // Composition
 import { useEventListener } from '@vant/use';
+import { useExpose } from '../composables/use-expose';
 import { useLockScroll } from '../composables/use-lock-scroll';
 import { useLazyRender } from '../composables/use-lazy-render';
 
@@ -108,6 +109,7 @@ export default createComponent({
     let shouldReopen;
 
     const zIndex = ref();
+    const popupRef = ref();
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
 
@@ -194,6 +196,7 @@ export default createComponent({
       return (
         <div
           v-show={props.show}
+          ref={popupRef}
           style={style.value}
           class={bem({
             round,
@@ -239,6 +242,8 @@ export default createComponent({
       }
     );
 
+    useExpose({ popupRef });
+
     useEventListener('popstate', () => {
       if (props.closeOnPopstate) {
         close();