From 7e4ff3b667ff27ffb8cbbf3828760a4d446f85d1 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 26 Nov 2020 20:31:38 +0800
Subject: [PATCH] feat(Popover): add trigger prop (#7646)

---
 src/popover/README.md                         | 27 +++++++++++-----
 src/popover/README.zh-CN.md                   | 31 +++++++++++++------
 src/popover/demo/index.vue                    | 18 +++++++----
 src/popover/index.js                          |  9 +++++-
 .../test/__snapshots__/index.spec.js.snap     |  6 ++--
 src/popover/test/index.spec.js                | 18 +++++++++++
 6 files changed, 81 insertions(+), 28 deletions(-)

diff --git a/src/popover/README.md b/src/popover/README.md
index 492e8ffa3..4bcb3e789 100644
--- a/src/popover/README.md
+++ b/src/popover/README.md
@@ -14,9 +14,14 @@ Vue.use(Popover);
 ### Basic Usage
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover
+  v-model="showPopover"
+  trigger="click"
+  :actions="actions"
+  @select="onSelect"
+>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       Light Theme
     </van-button>
   </template>
@@ -50,9 +55,14 @@ 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="showPopover"
+  theme="dark"
+  trigger="click"
+  :actions="actions"
+>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       Dark Theme
     </van-button>
   </template>
@@ -100,9 +110,9 @@ bottom-end    # Bottom right
 ### Show Icon
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" trigger="click" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       Show Icon
     </van-button>
   </template>
@@ -129,9 +139,9 @@ export default {
 Using the `disabled` option to disable an action.
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" trigger="click" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       Disable Action
     </van-button>
   </template>
@@ -163,6 +173,7 @@ export default {
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
+| trigger `v2.11.1` | Trigger mode，can be set to `click` | - |
 | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md
index 8e35eacf8..99b2af080 100644
--- a/src/popover/README.zh-CN.md
+++ b/src/popover/README.zh-CN.md
@@ -20,9 +20,14 @@ Vue.use(Popover);
 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
+<van-popover
+  v-model="showPopover"
+  trigger="click"
+  :actions="actions"
+  @select="onSelect"
+>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       浅色风格
     </van-button>
   </template>
@@ -53,9 +58,14 @@ export default {
 Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
 
 ```html
-<van-popover v-model="showPopover" theme="dark" :actions="actions">
+<van-popover
+  v-model="showPopover"
+  theme="dark"
+  trigger="click"
+  :actions="actions"
+>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       深色风格
     </van-button>
   </template>
@@ -103,9 +113,9 @@ bottom-end    # 底部右侧位置
 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" trigger="click" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       展示图标
     </van-button>
   </template>
@@ -132,9 +142,9 @@ export default {
 在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
 
 ```html
-<van-popover v-model="showPopover" :actions="actions">
+<van-popover v-model="showPopover" trigger="click" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       禁用选项
     </van-button>
   </template>
@@ -161,7 +171,7 @@ export default {
 通过默认插槽，可以在 Popover 内部放置任意内容。
 
 ```html
-<van-popover v-model="showPopover">
+<van-popover v-model="showPopover" trigger="click">
   <van-grid
     square
     clickable
@@ -178,7 +188,7 @@ export default {
     />
   </van-grid>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary">
       自定义内容
     </van-button>
   </template>
@@ -205,6 +215,7 @@ export default {
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
+| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index b23669027..06b28c92a 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -3,13 +3,14 @@
     <demo-block :title="t('basicUsage')">
       <van-popover
         v-model="show.lightTheme"
+        trigger="click"
         :actions="t('actions')"
         placement="bottom-start"
         style="margin-left: 16px;"
         @select="onSelect"
       >
         <template #reference>
-          <van-button type="primary" @click="show.lightTheme = true">
+          <van-button type="primary">
             {{ t('lightTheme') }}
           </van-button>
         </template>
@@ -17,12 +18,13 @@
       <van-popover
         v-model="show.darkTheme"
         theme="dark"
+        trigger="click"
         :actions="t('actions')"
         style="margin-left: 16px;"
         @select="onSelect"
       >
         <template #reference>
-          <van-button type="primary" @click="show.darkTheme = true">
+          <van-button type="primary">
             {{ t('darkTheme') }}
           </van-button>
         </template>
@@ -48,6 +50,7 @@
           <van-popover
             v-model="show.placement"
             theme="dark"
+            trigger="click"
             :actions="t('shortActions')"
             :placement="currentPlacement"
             @select="onSelect"
@@ -64,13 +67,14 @@
     <demo-block :title="t('actionOptions')">
       <van-popover
         v-model="show.showIcon"
+        trigger="click"
         :actions="t('actionsWithIcon')"
         placement="bottom-start"
         style="margin-left: 16px;"
         @select="onSelect"
       >
         <template #reference>
-          <van-button type="primary" @click="show.showIcon = true">
+          <van-button type="primary">
             {{ t('showIcon') }}
           </van-button>
         </template>
@@ -78,12 +82,13 @@
 
       <van-popover
         v-model="show.disableAction"
+        trigger="click"
         :actions="t('actionsDisabled')"
         style="margin-left: 16px;"
         @select="onSelect"
       >
         <template #reference>
-          <van-button type="primary" @click="show.disableAction = true">
+          <van-button type="primary">
             {{ t('disableAction') }}
           </van-button>
         </template>
@@ -93,6 +98,7 @@
     <demo-block :title="t('customContent')">
       <van-popover
         v-model="show.customContent"
+        trigger="click"
         placement="top-start"
         style="margin-left: 16px;"
         @select="onSelect"
@@ -113,7 +119,7 @@
           />
         </van-grid>
         <template #reference>
-          <van-button type="primary" @click="show.customContent = true">
+          <van-button type="primary">
             {{ t('customContent') }}
           </van-button>
         </template>
@@ -190,7 +196,7 @@ export default {
         disableAction: false,
       },
       showPicker: false,
-      currentPlacement: '',
+      currentPlacement: 'top',
       placements: [
         'top',
         'top-start',
diff --git a/src/popover/index.js b/src/popover/index.js
index 087964b38..5ba35cc38 100644
--- a/src/popover/index.js
+++ b/src/popover/index.js
@@ -21,6 +21,7 @@ export default createComponent({
 
   props: {
     value: Boolean,
+    trigger: String,
     overlay: Boolean,
     offset: {
       type: Array,
@@ -120,6 +121,12 @@ export default createComponent({
       this.$emit('input', value);
     },
 
+    onClickWrapper() {
+      if (this.trigger === 'click') {
+        this.onToggle(!this.value);
+      }
+    },
+
     onTouchstart(event) {
       event.stopPropagation();
       this.$emit('touchstart', event);
@@ -162,7 +169,7 @@ export default createComponent({
 
   render() {
     return (
-      <span ref="wrapper" class={bem('wrapper')}>
+      <span ref="wrapper" class={bem('wrapper')} onClick={this.onClickWrapper}>
         <Popup
           ref="popover"
           value={this.value}
diff --git a/src/popover/test/__snapshots__/index.spec.js.snap b/src/popover/test/__snapshots__/index.spec.js.snap
index 54423dcbc..c230602cd 100644
--- a/src/popover/test/__snapshots__/index.spec.js.snap
+++ b/src/popover/test/__snapshots__/index.spec.js.snap
@@ -9,21 +9,21 @@ exports[`should allow to custom the className of action 1`] = `
 exports[`should locate to reference element when showed 1`] = `<!---->`;
 
 exports[`should locate to reference element when showed 2`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006;" data-popper-placement="bottom">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2007;" data-popper-placement="bottom">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
 `;
 
 exports[`should locate to reference element when showed 3`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006; display: none;" data-popper-placement="bottom">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2007; display: none;" data-popper-placement="bottom">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
 `;
 
 exports[`should watch placement prop and update location 1`] = `
-<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
+<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2008; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
   <div class="van-popover__arrow"></div>
   <div class="van-popover__content"></div>
 </div>
diff --git a/src/popover/test/index.spec.js b/src/popover/test/index.spec.js
index 3a64d5e6d..0e8476d28 100644
--- a/src/popover/test/index.spec.js
+++ b/src/popover/test/index.spec.js
@@ -7,6 +7,24 @@ const baseActions = [
   { text: 'Option 3' },
 ];
 
+test('should toggle popover when trigger is "click" and the reference element is clicked', () => {
+  const wrapper = mount(Popover, {
+    propsData: {
+      value: true,
+    },
+    scopedSlots: {
+      reference: '<div class="reference"></div>',
+    },
+  });
+
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('input')).toBeFalsy();
+
+  wrapper.setProps({ trigger: 'click' });
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('input')[0][0]).toEqual(false);
+});
+
 test('should emit select event when clicking the action', () => {
   const wrapper = mount(Popover, {
     propsData: {