From a832dd5a99b74343c1e5dd470b4084db32242cf5 Mon Sep 17 00:00:00 2001
From: CatsAndMice <lihai_js@163.com>
Date: Sun, 26 Dec 2021 14:26:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(popover):=20=E5=A2=9E=E5=8A=A0controlled?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7(https://github.com/DevCloudFE/vue-devui/issu?=
 =?UTF-8?q?es/97)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/popover/__tests__/popover.spec.ts   |   8 +-
 .../devui-vue/devui/popover/src/popover.tsx   |  19 ++-
 .../docs/components/popover/index.md          | 125 ++++++++++++------
 .../docs/en-US/components/popover/index.md    |  91 +++++++++----
 4 files changed, 164 insertions(+), 79 deletions(-)

diff --git a/packages/devui-vue/devui/popover/__tests__/popover.spec.ts b/packages/devui-vue/devui/popover/__tests__/popover.spec.ts
index 699d892214..387c5b3545 100644
--- a/packages/devui-vue/devui/popover/__tests__/popover.spec.ts
+++ b/packages/devui-vue/devui/popover/__tests__/popover.spec.ts
@@ -1,4 +1,4 @@
-import {shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import DPopover from '../src/popover'
 describe('DPopover', () => {
     it('visible', () => {
@@ -34,7 +34,11 @@ describe('DPopover', () => {
     })
 
     it('trigger click', async () => {
-        const wrapper = shallowMount(DPopover)
+        const wrapper = shallowMount(DPopover, {
+            props: {
+                controlled: true
+            }
+        })
         const isVisible = () => expect(wrapper.classes().includes('devui-popover-isVisible'))
         isVisible().toBeFalsy()
         await wrapper.find('.devui-popover-reference').trigger('click')
diff --git a/packages/devui-vue/devui/popover/src/popover.tsx b/packages/devui-vue/devui/popover/src/popover.tsx
index 017fe7da89..4298261c9c 100644
--- a/packages/devui-vue/devui/popover/src/popover.tsx
+++ b/packages/devui-vue/devui/popover/src/popover.tsx
@@ -47,6 +47,11 @@ export default defineComponent({
       default: 1060
     },
 
+    controlled: {
+      type: Boolean,
+      default: false
+    },
+
     popType: {
       type: String as () => popType,
       default: 'default'
@@ -84,7 +89,7 @@ export default defineComponent({
     const {
       position, content, zIndex, trigger, popType,
       popoverStyle, mouseEnterDelay, mouseLeaveDelay,
-      showAnimation, popMaxWidth
+      showAnimation, popMaxWidth, controlled
     } = toRefs(props);
     const style: CSSProperties = { zIndex: zIndex.value, ...popoverStyle.value }
     const isClick = trigger.value === 'click'
@@ -96,15 +101,19 @@ export default defineComponent({
       }
       visible.value = true
     }
-    const onClick = isClick ? event : null;
+    const onClick = isClick && controlled.value ? event : null;
     const enter = debounce(() => { visible.value = true }, mouseEnterDelay.value)
     const leave = debounce(() => { visible.value = false }, mouseLeaveDelay.value)
-    const onMouseenter = isClick ? null : enter
-    const onMouseleave = isClick ? null : leave
-    const hiddenContext = () => { visible.value = false }
+    const onMouseenter = !isClick && controlled.value ? enter : null
+    const onMouseleave = !isClick && controlled.value ? leave : null
+    const hiddenContext = () => {
+      if (!controlled.value) return;
+      visible.value = false
+    }
     popMaxWidth.value && (style.maxWidth = `${popMaxWidth.value}px`)
 
     watch(() => props.visible, (newVal) => {
+      if (controlled.value) return;
       visible.value = newVal;
     })
 
diff --git a/packages/devui-vue/docs/components/popover/index.md b/packages/devui-vue/docs/components/popover/index.md
index 5a70c3e6c6..c5652dcaab 100644
--- a/packages/devui-vue/docs/components/popover/index.md
+++ b/packages/devui-vue/docs/components/popover/index.md
@@ -10,34 +10,34 @@
 ```vue
 <template>
 <div class="popover-demo-item" >
-  <d-popover visible>
+  <d-popover controlled>
     <template #reference>
-      <d-button bsStyle="common">default</d-button>
+      <d-button btnStyle="common">default</d-button>
     </template>
   </d-popover>
-  <d-popover  content="info!" popType="info" position="top" trigger="hover">
+  <d-popover  content="info!" popType="info" position="top" trigger="hover" controlled>
     <template #reference>
-      <d-button  bsStyle="primary">info</d-button>
+      <d-button  btnStyle="primary">info</d-button>
     </template>
   </d-popover>
-  <d-popover  content="error!" popType="error" position="left" :zIndex="9999">
+  <d-popover  content="error!" popType="error" controlled position="left" :zIndex="9999">
     <template #reference>
-      <d-button  bsStyle="danger">error</d-button>
+      <d-button  btnStyle="danger">error</d-button>
     </template>
   </d-popover>
-    <d-popover  content="success!" popType="success" position="right">
+    <d-popover  content="success!" popType="success" controlled position="right">
     <template #reference>
-      <d-button  bsStyle="success">success</d-button>
+      <d-button  btnStyle="success">success</d-button>
     </template>
   </d-popover>
-  <d-popover  content="warning!" popType="warning" >
+  <d-popover  content="warning!" popType="warning" controlled>
     <template #reference>
-      <d-button  bsStyle="warning">warning</d-button>
+      <d-button  btnStyle="warning">warning</d-button>
     </template>
   </d-popover>
-  <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100">
+  <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
     <template #reference>
-      <d-button  bsStyle="common">no-animation</d-button>
+      <d-button  btnStyle="common">no-animation</d-button>
     </template>
   </d-popover>
 </div>
@@ -58,14 +58,14 @@
 ```vue
 <template>
 <div class="popover-demo-item">
-  <d-popover content="自定义内容" >
+  <d-popover content="自定义内容" controlled>
     <template #reference>
-      <d-button bsStyle="primary"> click me!</d-button>
+      <d-button btnStyle="primary"> click me!</d-button>
     </template>
   </d-popover>
-  <d-popover  content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}">
+  <d-popover  content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}" controlled>
     <template #reference>
-      <d-button bsStyle="primary"> hover me!</d-button>
+      <d-button btnStyle="primary"> hover me!</d-button>
     </template>
   </d-popover>
 </div>
@@ -88,113 +88,113 @@
 ```vue
 <template>
 <div class="item">
-  <d-popover  position="left" >
+  <d-popover  position="left" controlled>
   <template #content>
       <div>left</div>
     </template>
   <template #reference>
-    <d-button bsStyle="common">left</d-button>
+    <d-button btnStyle="common">left</d-button>
   </template>
   </d-popover>
-  <d-popover  position="left-top" >
+  <d-popover  position="left-top" controlled>
     <template #content>
         <div >left-top</div>
         <div>left-top</div>
     </template>
     <template #reference>
-      <d-button bsStyle="common">left-top</d-button>
+      <d-button btnStyle="common">left-top</d-button>
     </template>
   </d-popover>
-  <d-popover  position="left-bottom" >
+  <d-popover  position="left-bottom" controlled >
     <template #content>
         <div>left-bottom</div>
         <div>left-bottom</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">left-bottom</d-button>
+      <d-button btnStyle="common">left-bottom</d-button>
     </template>
   </d-popover>
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="top" >
+  <d-popover   position="top" controlled>
     <template #content>
         <span >top</span>
       </template>
     <template #reference>
-      <d-button bsStyle="common">top</d-button>
+      <d-button btnStyle="common">top</d-button>
     </template>
   </d-popover>
-  <d-popover  position="top-left" >
+  <d-popover  position="top-left" controlled>
     <template #content>
         <span >top-left</span>
       </template>
     <template #reference>
-      <d-button bsStyle="common">top-left</d-button>
+      <d-button btnStyle="common">top-left</d-button>
     </template>
   </d-popover>
-  <d-popover  position="top-right" >
+  <d-popover  position="top-right" controlled>
     <template #content>
         <span >top-right</span>
       </template>
     <template #reference>
-      <d-button bsStyle="common">top-right</d-button>
+      <d-button btnStyle="common">top-right</d-button>
     </template>
   </d-popover>
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="right" >
+  <d-popover   position="right" controlled>
     <template #content>
         <div >right</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">right</d-button>
+      <d-button btnStyle="common">right</d-button>
     </template>
   </d-popover>
-  <d-popover   position="right-top" >
+  <d-popover   position="right-top" controlled>
     <template #content>
         <div >right-top</div>
         <div >right-top</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">right-top</d-button>
+      <d-button btnStyle="common">right-top</d-button>
     </template>
   </d-popover>
-    <d-popover  position="right-bottom" >
+    <d-popover  position="right-bottom" controlled>
     <template #content>
         <div >right-bottom</div>
         <div >right-bottom</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">right-bottom</d-button>
+      <d-button btnStyle="common">right-bottom</d-button>
     </template>
   </d-popover>
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="bottom" >
+  <d-popover   position="bottom" controlled>
     <template #content>
         <div >bottom</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">bottom</d-button>
+      <d-button btnStyle="common">bottom</d-button>
     </template>
   </d-popover>
-    <d-popover  position="bottom-left" >
+    <d-popover  position="bottom-left" controlled>
     <template #content>
         <div >bottom-left</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">bottom-left</d-button>
+      <d-button btnStyle="common">bottom-left</d-button>
     </template>
   </d-popover>
-  <d-popover  position="bottom-right" >
+  <d-popover  position="bottom-right" controlled>
     <template #content>
         <div >bottom-right</div>
       </template>
     <template #reference>
-      <d-button bsStyle="common">bottom-right</d-button>
+      <d-button btnStyle="common">bottom-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -208,6 +208,42 @@
 
 :::
 
+
+### 手动触发
+通过visible控制弹框显示实现表单验证，使用visible控制必须令controlled参数为默认值false。
+
+:::demo
+```vue
+<template>
+  <d-popover  position="top" :visible="visible">
+    <template #content>
+        <div > 手动触发 </div>
+      </template>
+    <template #reference>
+      <d-button btnStyle="primary" @click="onClick">手动触发</d-button>
+    </template>
+  </d-popover>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup(){
+    const visible=ref(false);
+    const onClick = ()=>{
+      visible.value = !visible.value ;
+    }
+    return{
+      visible,
+      onClick
+    }
+  }
+})
+</script>
+```
+:::
+
+
+
 ### 延时触发
 仅需要在 trigger 为 hover 的时候，鼠标移入的时长超过 [mouseEnterDelay] 毫秒之后才会触发，以防止用户无意划过导致的闪现，默认值是150毫秒；鼠标移出之后，再经过[mouseLeaveDelay]毫秒后，Popover组件才会隐藏，默认值是100毫秒。
 
@@ -216,21 +252,21 @@
 ```vue
 <template>
 <div class="item">
-  <d-popover  position="bottom-right" trigger="hover" :mouseEnterDelay ="500">
+  <d-popover  position="bottom-right" trigger="hover" :mouseEnterDelay ="500" controlled>
     <template #content>
         <div > Mouse enter 500ms later. </div>
         show Me
       </template>
     <template #reference>
-      <d-button bsStyle="primary">MouseEnter delay 500ms</d-button>
+      <d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
     </template>
   </d-popover>
-  <d-popover  position="bottom-right" trigger="hover" :mouseLeaveDelay="2000">
+  <d-popover  position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
     <template #content>
         <div> Mouse leave 2000ms later. </div>
       </template>
     <template #reference>
-      <d-button bsStyle="common"> MouseLeave delay 2000ms</d-button>
+      <d-button btnStyle="common"> MouseLeave delay 2000ms</d-button>
     </template>
   </d-popover>
   </div>
@@ -252,6 +288,7 @@
 | content | `string` | defalut |可选，弹出框的显示内容或 | [自定义内容](#自定义内容) |
 | visible | `boolean` | false | 可选，弹框的初始化弹出状态 | [基本用法](#基本用法) |
 | trigger | `string` | click | 可选，弹框触发方式 | [基本用法](#基本用法) |
+| controlled | `boolean` | false | 可选 是否通过`trigger`方式触发弹框 | [基本用法](#基本用法) |
 | popType | `string`  | default | 可选，弹出框类型，样式不同 | [基本用法](#基本用法) |
 | zIndex | `number` | 1060 | 可选，z-index值用于手动控制层高 | [基本用法](#基本用法) |
 | positionType | `string` | bottom | 可选，控制弹框出现 的方向 | [弹出位置](#弹出位置) |
diff --git a/packages/devui-vue/docs/en-US/components/popover/index.md b/packages/devui-vue/docs/en-US/components/popover/index.md
index 936183a11c..55add3765e 100644
--- a/packages/devui-vue/docs/en-US/components/popover/index.md
+++ b/packages/devui-vue/docs/en-US/components/popover/index.md
@@ -10,34 +10,34 @@ When Popover pops up, it is positioned based on the contents of the reference sl
 ```vue
 <template>
 <div class="popover-demo-item" >
-  <d-popover visible>
+  <d-popover controlled>
     <template #reference>
-      <d-button >default</d-button>
+      <d-button btnStyle="common">default</d-button>
     </template>
   </d-popover>
-  <d-popover  content="info!" popType="info" position="top" trigger="hover">
+  <d-popover  content="info!" popType="info" position="top" trigger="hover" controlled>
     <template #reference>
-      <d-button >info</d-button>
+      <d-button  btnStyle="primary">info</d-button>
     </template>
   </d-popover>
-  <d-popover  content="error!" popType="error" position="left" :zIndex="9999">
+  <d-popover  content="error!" popType="error" controlled position="left" :zIndex="9999">
     <template #reference>
-      <d-button  >error</d-button>
+      <d-button  btnStyle="danger">error</d-button>
     </template>
   </d-popover>
-    <d-popover  content="success!" popType="success" position="right">
+    <d-popover  content="success!" popType="success" controlled position="right">
     <template #reference>
-      <d-button >success</d-button>
+      <d-button  btnStyle="success">success</d-button>
     </template>
   </d-popover>
-  <d-popover  content="warning!" popType="warning" >
+  <d-popover  content="warning!" popType="warning" controlled>
     <template #reference>
-      <d-button >warning</d-button>
+      <d-button  btnStyle="warning">warning</d-button>
     </template>
   </d-popover>
-  <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100">
+  <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
     <template #reference>
-      <d-button >no-animation</d-button>
+      <d-button  btnStyle="common">no-animation</d-button>
     </template>
   </d-popover>
 </div>
@@ -58,12 +58,12 @@ The HTMLElement or TemplateRef type can be transferred.
 ```vue
 <template>
 <div class="popover-demo-item">
-  <d-popover content="Custom Content" >
+  <d-popover content="Custom Content" controlled>
     <template #reference>
       <d-button btnStyle="primary"> click me!</d-button>
     </template>
   </d-popover>
-  <d-popover  content="Custom Content" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}">
+  <d-popover  content="Custom Content" trigger="hover" controlled :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}">
     <template #reference>
       <d-button btnStyle="primary"> hover me!</d-button>
     </template>
@@ -88,7 +88,7 @@ A total of 12 pop-up positions are supported.
 ```vue
 <template>
 <div class="item">
-  <d-popover  position="left" >
+  <d-popover  position="left" controlled>
   <template #content>
       <div>left</div>
     </template>
@@ -96,7 +96,7 @@ A total of 12 pop-up positions are supported.
     <d-button btnStyle="common">left</d-button>
   </template>
   </d-popover>
-  <d-popover  position="left-top" >
+  <d-popover  position="left-top" controlled>
     <template #content>
         <div >left-top</div>
         <div>left-top</div>
@@ -105,7 +105,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">left-top</d-button>
     </template>
   </d-popover>
-  <d-popover  position="left-bottom" >
+  <d-popover  position="left-bottom" controlled >
     <template #content>
         <div>left-bottom</div>
         <div>left-bottom</div>
@@ -117,7 +117,7 @@ A total of 12 pop-up positions are supported.
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="top" >
+  <d-popover   position="top" controlled>
     <template #content>
         <span >top</span>
       </template>
@@ -125,7 +125,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">top</d-button>
     </template>
   </d-popover>
-  <d-popover  position="top-left" >
+  <d-popover  position="top-left" controlled>
     <template #content>
         <span >top-left</span>
       </template>
@@ -133,7 +133,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">top-left</d-button>
     </template>
   </d-popover>
-  <d-popover  position="top-right" >
+  <d-popover  position="top-right" controlled>
     <template #content>
         <span >top-right</span>
       </template>
@@ -144,7 +144,7 @@ A total of 12 pop-up positions are supported.
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="right" >
+  <d-popover   position="right" controlled>
     <template #content>
         <div >right</div>
       </template>
@@ -152,7 +152,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">right</d-button>
     </template>
   </d-popover>
-  <d-popover   position="right-top" >
+  <d-popover   position="right-top" controlled>
     <template #content>
         <div >right-top</div>
         <div >right-top</div>
@@ -161,7 +161,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">right-top</d-button>
     </template>
   </d-popover>
-    <d-popover  position="right-bottom" >
+    <d-popover  position="right-bottom" controlled>
     <template #content>
         <div >right-bottom</div>
         <div >right-bottom</div>
@@ -173,7 +173,7 @@ A total of 12 pop-up positions are supported.
 </div>
 
 <div style="margin-top:10px;" class="item">
-  <d-popover   position="bottom" >
+  <d-popover   position="bottom" controlled>
     <template #content>
         <div >bottom</div>
       </template>
@@ -181,7 +181,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">bottom</d-button>
     </template>
   </d-popover>
-    <d-popover  position="bottom-left" >
+    <d-popover  position="bottom-left" controlled>
     <template #content>
         <div >bottom-left</div>
       </template>
@@ -189,7 +189,7 @@ A total of 12 pop-up positions are supported.
       <d-button btnStyle="common">bottom-left</d-button>
     </template>
   </d-popover>
-  <d-popover  position="bottom-right" >
+  <d-popover  position="bottom-right" controlled>
     <template #content>
         <div >bottom-right</div>
       </template>
@@ -208,6 +208,40 @@ A total of 12 pop-up positions are supported.
 
 :::
 
+### **Manual Control Display**
+Displaying the pop-up dialog box through the visible interface to verify the form. To use the visible control function, set controlled to the default value false.
+
+:::demo
+```vue
+<template>
+  <d-popover  position="top" :visible="visible">
+    <template #content>
+        <div > Manual Control Display </div>
+      </template>
+    <template #reference>
+      <d-button btnStyle="primary" @click="onClick">Manual Control Display</d-button>
+    </template>
+  </d-popover>
+</template>
+<script>
+import { defineComponent, ref } from 'vue'
+export default defineComponent({
+  setup(){
+    const visible=ref(false);
+    const onClick = ()=>{
+      visible.value = !visible.value ;
+    }
+    return{
+      visible,
+      onClick
+    }
+  }
+})
+</script>
+```
+:::
+
+
 ### Delay Trigger
 Only when the trigger type is hover. This event is triggered only when the mouse pointer is moved in for more than `mouseEnterDelay` milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after `mouseLeaveDelay`milliseconds after the cursor is moved out. The default value is 100 milliseconds.
 
@@ -216,7 +250,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
 ```vue
 <template>
 <div class="item">
-  <d-popover  position="bottom-right" trigger="hover" :mouseEnterDelay ="500">
+  <d-popover  position="bottom-right" trigger="hover" controlled :mouseEnterDelay ="500">
     <template #content>
         <div > Mouse enter 500ms later. </div>
         show Me
@@ -225,7 +259,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
       <d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
     </template>
   </d-popover>
-  <d-popover  position="bottom-right" trigger="hover" :mouseLeaveDelay="2000">
+  <d-popover  position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
     <template #content>
         <div> Mouse leave 2000ms later. </div>
       </template>
@@ -252,6 +286,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
 | content | `string` | defalut |Required. The display content of the pop-up box or template reference | [Custom Tips](#custom-tips) |
 | visible | `boolean` | false | Optional. Initial pop-up status of the pop-up dialog box | [Basic Usage](#basic-usage) |
 | trigger | `string` | click | Pop-up message triggering mode | [Basic Usage](#basic-usage) |
+| controlled | `boolean` | false | Optional. Specifies whether to trigger a dialog box in `trigger` mode | [Basic Usage](#basic-usage) |
 | popType | `string`  | default | Optional. Which indicates the type of the pop-up box with different styles | [Basic Usage](#basic-usage)  |
 | zIndex | `number` | 1060 | Optional. Z-index value, which is used to manually control the height of the layer | [Basic Usage](#basic-usage)      |
 | positionType | `string` | bottom | Optional. Specifies the content pop-up direction. For example, top-left indicates the content pop-up direction, and left indicates the left-aligned content. | [Position](#Position) |