feat: add flipLeve

tusen-ai · Nov 24, 2021 · 86d67e3 · 86d67e3
1 parent 7f4b720
commit 86d67e3
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/src/popover/demos/enUS/index.demo-entry.md b/src/popover/demos/enUS/index.demo-entry.md
@@ -32,7 +32,7 @@ header
 | disabled | `boolean` | `false` | Whether the popover can't be activated. |
 | display-directive | `'if' \| 'show'` | `'if'` | The conditionally render directive to show popover content. `if` means using `v-if` to render content, `show` means using `v-show` to render content. |
 | duration | `number` | `100` | Popover vanish delay when trigger is `hover` |
-| filp | `boolean` | `true` | Whether to filp the popover when there is no space for current placement. |
+| flipLevel | `number` | `1 \| 2 \| 3` | Whether to flipLevel the popover when there is no space for current placement. |
 | overlap | `boolean` | `false` | Overlap trigger element. |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | Popover placement. |
 | raw | `boolean` | `false` | Whether to use no default styles. |

diff --git a/src/popover/demos/zhCN/index.demo-entry.md b/src/popover/demos/zhCN/index.demo-entry.md
@@ -35,7 +35,7 @@ nested2-debug
 | disabled | `boolean` | `false` | 是否不能激活弹出信息 |
 | display-directive | `'if' \| 'show'` | `'if'` | 条件渲染使用的指令，`if` 会让内容被使用 `v-if` 渲染，`show` 会让内容被使用 `v-show` 渲染 |
 | duration | `number` | `100` | 悬浮关闭弹出信息的延迟 |
-| filp | `boolean` | `true` | 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置 |
+| flipLevel | `number` | `1 \| 2 \| 3` | 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置 |
 | overlap | `boolean` | `false` | 覆盖触发元素 |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'top'` | popover 的弹出位置 |
 | raw | `boolean` | `false` | 是否不添加默认样式 |

diff --git a/src/popover/src/Popover.tsx b/src/popover/src/Popover.tsx
@@ -14,7 +14,13 @@ import {
   cloneVNode,
   watchEffect
 } from 'vue'
-import { VBinder, VTarget, FollowerPlacement, BinderInst } from 'vueuc'
+import {
+  VBinder,
+  VTarget,
+  FollowerPlacement,
+  BinderInst,
+  FlipLevel
+} from 'vueuc'
 import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks'
 import {
   call,
@@ -134,9 +140,9 @@ export const popoverBaseProps = {
     default: 'if'
   },
   arrowStyle: [String, Object] as PropType<string | CSSProperties>,
-  filp: {
-    type: Boolean,
-    default: true
+  flipLevel: {
+    type: Number as PropType<FlipLevel>,
+    default: 3
   },
   animated: {
     type: Boolean,

diff --git a/src/popover/src/PopoverBody.tsx b/src/popover/src/PopoverBody.tsx
@@ -19,7 +19,7 @@ import {
   renderSlot,
   Fragment
 } from 'vue'
-import { VFollower, FollowerPlacement, FollowerInst } from 'vueuc'
+import { VFollower, FlipLevel, FollowerPlacement, FollowerInst } from 'vueuc'
 import { clickoutside, mousemoveoutside } from 'vdirs'
 import { useTheme, useConfig } from '../../_mixins'
 import type { ThemeProps } from '../../_mixins'
@@ -46,7 +46,7 @@ export const popoverBodyProps = {
   displayDirective: String as PropType<'if' | 'show'>,
   x: Number,
   y: Number,
-  filp: Boolean,
+  flipLevel: Number as PropType<FlipLevel>,
   overlap: Boolean,
   placement: String as PropType<FollowerPlacement>,
   width: [Number, String] as PropType<number | 'trigger'>,
@@ -312,6 +312,7 @@ export default defineComponent({
         x: this.x,
         y: this.y,
         placement: this.placement,
+        flipLevel: this.flipLevel,
         containerClass: this.namespace,
         ref: 'followerRef',
         overlap: this.overlap,