From eb9e632e3e5940117ad2dbf1306adf6ef915d6c8 Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Thu, 19 Jan 2023 11:13:25 +0800
Subject: [PATCH] feat: `preventDefault` option

---
 packages/docs/src/api/README.md                   |  8 ++++++++
 packages/docs/src/guide/config.md                 |  2 ++
 packages/floating-vue/src/components/Popper.ts    |  6 ++++++
 .../floating-vue/src/components/PopperMask.vue    | 15 +++++++++++++++
 .../floating-vue/src/components/PopperWrapper.vue |  5 +++++
 packages/floating-vue/src/config.ts               |  2 ++
 6 files changed, 38 insertions(+)
 create mode 100644 packages/floating-vue/src/components/PopperMask.vue

diff --git a/packages/docs/src/api/README.md b/packages/docs/src/api/README.md
index 04683ea4..5d68df98 100755
--- a/packages/docs/src/api/README.md
+++ b/packages/docs/src/api/README.md
@@ -428,6 +428,14 @@ Boolean: prevent the popper from overflowing the `boundary`.
 <VDropdown :prevent-overflow="false" />
 ```
 
+### `preventDefault`
+
+Boolean: prevent default event when click on outside elements.
+
+```vue
+<VDropdown :prevent-default="true" />
+```
+
 ### `overflowPadding`
 
 Virtual padding in the `boundary` used to prevent the popper overflow (pixels).
diff --git a/packages/docs/src/guide/config.md b/packages/docs/src/guide/config.md
index 51ea7362..d7de6698 100644
--- a/packages/docs/src/guide/config.md
+++ b/packages/docs/src/guide/config.md
@@ -52,6 +52,8 @@ export const config: FloatingVueConfig = {
   strategy: 'absolute',
   // Prevent overflow
   preventOverflow: true,
+  // Prevent default event when click on outside elements
+  preventDefault: false,
   // Flip to the opposite placement if needed
   flip: true,
   // Shift on the cross axis to prevent the popper from overflowing
diff --git a/packages/floating-vue/src/components/Popper.ts b/packages/floating-vue/src/components/Popper.ts
index 052f275d..6f175483 100644
--- a/packages/floating-vue/src/components/Popper.ts
+++ b/packages/floating-vue/src/components/Popper.ts
@@ -266,6 +266,11 @@ export default () => defineComponent({
       type: Boolean,
       default: defaultPropFactory('noAutoFocus'),
     },
+
+    preventDefault: {
+      type: Boolean,
+      default: defaultPropFactory('preventDefault'),
+    },
   },
 
   emits: [
@@ -335,6 +340,7 @@ export default () => defineComponent({
         },
         result: this.positioningDisabled ? null : this.result,
         attrs: this.$attrs,
+        preventDefault: this.preventDefault,
       }
     },
 
diff --git a/packages/floating-vue/src/components/PopperMask.vue b/packages/floating-vue/src/components/PopperMask.vue
new file mode 100644
index 00000000..db7d9218
--- /dev/null
+++ b/packages/floating-vue/src/components/PopperMask.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="v-popper__mask"></div>
+</template>
+
+
+<style>
+.v-popper__mask {
+  position: fixed;
+  z-index: 9999;
+  top: 0;
+  left: 0;
+  bottom:0;
+  right: 0;
+}
+</style>
diff --git a/packages/floating-vue/src/components/PopperWrapper.vue b/packages/floating-vue/src/components/PopperWrapper.vue
index f814b805..ea0a69ef 100644
--- a/packages/floating-vue/src/components/PopperWrapper.vue
+++ b/packages/floating-vue/src/components/PopperWrapper.vue
@@ -13,6 +13,7 @@
       onResize,
       classes,
       result,
+      preventDefault,
     }"
     :theme="finalTheme"
     :target-nodes="getTargetNodes"
@@ -47,6 +48,8 @@
         :hide="hide"
       />
     </PopperContent>
+    
+    <PopperMask v-if="isShown && preventDefault"/>
   </Popper>
 </template>
 
@@ -54,6 +57,7 @@
 import { defineComponent } from 'vue'
 import Popper from './Popper.vue'
 import PopperContent from './PopperContent.vue'
+import PopperMask from './PopperMask.vue'
 import PopperMethods from './PopperMethods'
 import ThemeClass from './ThemeClass'
 
@@ -63,6 +67,7 @@ export default defineComponent({
   components: {
     Popper,
     PopperContent,
+    PopperMask,
   },
 
   mixins: [
diff --git a/packages/floating-vue/src/config.ts b/packages/floating-vue/src/config.ts
index 2bed497d..1afa7ee6 100644
--- a/packages/floating-vue/src/config.ts
+++ b/packages/floating-vue/src/config.ts
@@ -21,6 +21,8 @@ export const config: FloatingVueConfig = {
   strategy: 'absolute',
   // Prevent overflow
   preventOverflow: true,
+  // Prevent default event when click on outside elements
+  preventDefault: false,
   // Flip to the opposite placement if needed
   flip: true,
   // Shift on the cross axis to prevent the popper from overflowing