feat: add flipLeve

tusen-ai · Nov 29, 2021 · 806e746 · 806e746
1 parent b46bb57
commit 806e746
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 30 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `n-popover` add `flipLevel` prop.
+
 ## 2.21.2 (2021-11-29)
 
 ### Fixes
@@ -30,10 +36,6 @@
 - `n-input-number` add `update-value-on-input` prop, closes [#1662](https://github.com/TuSimple/naive-ui/issues/1662).
 - `n-auto-complete` add `prefix` & `suffix` slot.
 
-### Feats
-
-- Fix `n-popover` adjust position automatically to show all pop message, closes [#1520](https://github.com/TuSimple/naive-ui/issues/1520).
-
 ## 2.21.1 (2021-11-23)
 
 ### Fixes

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- =`n-popover` 新增 `flipLevel` 属性
+
 ## 2.21.2 (2021-11-29)
 
 ### Fixes
@@ -30,10 +36,6 @@
 - `n-input-number` 新增 `update-value-on-input` 属性，关闭 [#1662](https://github.com/TuSimple/naive-ui/issues/1662)
 - `n-auto-complete` 新增 `prefix` & `suffix` slot
 
-### Feats
-
-- 修复 `n-popover` 自动调整弹出位置，显示全部弹出信息，关闭 [#1520](https://github.com/TuSimple/naive-ui/issues/1520)
-
 ## 2.21.1 (2021-11-23)
 
 ### Fixes

diff --git a/src/popover/demos/enUS/index.demo-entry.md b/src/popover/demos/enUS/index.demo-entry.md
@@ -33,6 +33,7 @@ header
 | 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` |
 | flip | `boolean` | `true` | Whether to flip the popover when there is no space for current placement. |
+| flipLevel | `1 \| 2 ` | `1` | The level to adjust placement. 1 means adjusting to proper placement in same direction. 2 means setting position offset. |
 | 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
@@ -36,6 +36,7 @@ nested2-debug
 | display-directive | `'if' \| 'show'` | `'if'` | 条件渲染使用的指令，`if` 会让内容被使用 `v-if` 渲染，`show` 会让内容被使用 `v-show` 渲染 |
 | duration | `number` | `100` | 悬浮关闭弹出信息的延迟 |
 | flip | `boolean` | `true` | 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置 |
+| flipLevel | `1 \| 2 ` | `1` | 调整弹出信息的位置程度，1 表示在已有的 placement 同纬度调整，2 表示已有位置不符合会做适当偏移 |
 | 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,
@@ -138,6 +144,10 @@ export const popoverBaseProps = {
     type: Boolean,
     default: true
   },
+  flipLevel: {
+    type: Number as PropType<FlipLevel>,
+    default: 1
+  },
   animated: {
     type: Boolean,
     default: true

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'
@@ -47,6 +47,7 @@ export const popoverBodyProps = {
   x: Number,
   y: Number,
   flip: Boolean,
+  flipLevel: Number as PropType<FlipLevel>,
   overlap: Boolean,
   placement: String as PropType<FollowerPlacement>,
   width: [Number, String] as PropType<number | 'trigger'>,
@@ -89,7 +90,6 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     const followerRef = ref<FollowerInst | null>(null)
-    const offsetContentRef = ref<HTMLElement | null>(null)
     const NPopover = inject<PopoverInjection>('NPopover') as PopoverInjection
     const bodyRef = ref<HTMLElement | null>(null)
     const followerEnabledRef = ref(props.show)
@@ -144,8 +144,6 @@ export default defineComponent({
         }
       } = themeRef.value
 
-      syncPosition()
-
       return {
         '--box-shadow': boxShadow,
         '--bezier': cubicBezierEaseInOut,
@@ -159,10 +157,6 @@ export default defineComponent({
         '--arrow-height': arrowHeight,
         '--arrow-offset': arrowOffset,
         '--arrow-offset-vertical': arrowOffsetVertical,
-        '--left-offset':
-          offsetContentRef.value?.getAttribute('v-leftoffet') || '0px',
-        '--top-offset':
-          offsetContentRef.value?.getAttribute('v-topoffet') || '0px',
         '--padding': padding,
         '--space': space,
         '--space-arrow': spaceArrow
@@ -185,9 +179,7 @@ export default defineComponent({
       }
     })
     function syncPosition (): void {
-      if (followerRef.value) {
-        offsetContentRef.value = followerRef.value.syncPosition()
-      }
+      followerRef.value?.syncPosition()
     }
     function handleMouseEnter (e: MouseEvent): void {
       if (props.trigger === 'hover') {
@@ -313,6 +305,7 @@ export default defineComponent({
         y: this.y,
         flip: this.flip,
         placement: this.placement,
+        flipLevel: this.flipLevel,
         containerClass: this.namespace,
         ref: 'followerRef',
         overlap: this.overlap,

diff --git a/src/popover/src/styles/index.cssr.ts b/src/popover/src/styles/index.cssr.ts
@@ -20,8 +20,6 @@ const oppositePlacement = {
 // --arrow-height
 // --arrow-offset
 // --arrow-offset-vertical
-// --left-offset
-// --top-offset
 // --padding
 // --space
 // --space-arrow
@@ -91,7 +89,7 @@ export default c([
   ]),
   placementStyle('top-start', `
     top: calc(-0.707 * var(--arrow-height));
-    left: calc(var(--arrow-offset) - var(--left-offset));
+    left: calc(var(--arrow-offset) - var(--v-offset-left));
   `),
   placementStyle('top', `
     top: calc(-0.707 * var(--arrow-height));
@@ -100,11 +98,11 @@ export default c([
   `),
   placementStyle('top-end', `
     top: calc(-0.707 * var(--arrow-height));
-    right: calc(var(--arrow-offset) + var(--left-offset));
+    right: calc(var(--arrow-offset) + var(--v-offset-left));
   `),
   placementStyle('bottom-start', `
     bottom: calc(-0.707 * var(--arrow-height));
-    left: calc(var(--arrow-offset) - var(--left-offset));
+    left: calc(var(--arrow-offset) - var(--v-offset-left));
   `),
   placementStyle('bottom', `
     bottom: calc(-0.707 * var(--arrow-height));
@@ -113,11 +111,11 @@ export default c([
   `),
   placementStyle('bottom-end', `
     bottom: calc(-0.707 * var(--arrow-height));
-    right: calc(var(--arrow-offset) + var(--left-offset));
+    right: calc(var(--arrow-offset) + var(--v-offset-left));
   `),
   placementStyle('left-start', `
     left: calc(-0.707 * var(--arrow-height));
-    top: calc(var(--arrow-offset-vertical) - var(--top-offset));
+    top: calc(var(--arrow-offset-vertical) - var(--v-offset-top));
   `),
   placementStyle('left', `
     left: calc(-0.707 * var(--arrow-height));
@@ -126,11 +124,11 @@ export default c([
   `),
   placementStyle('left-end', `
     left: calc(-0.707 * var(--arrow-height));
-    bottom: calc(var(--arrow-offset-vertical) + var(--top-offset));
+    bottom: calc(var(--arrow-offset-vertical) + var(--v-offset-top));
   `),
   placementStyle('right-start', `
     right: calc(-0.707 * var(--arrow-height));
-    top: calc(var(--arrow-offset-vertical) - var(--top-offset));
+    top: calc(var(--arrow-offset-vertical) - var(--v-offset-top));
   `),
   placementStyle('right', `
     right: calc(-0.707 * var(--arrow-height));
@@ -139,7 +137,7 @@ export default c([
   `),
   placementStyle('right-end', `
     right: calc(-0.707 * var(--arrow-height));
-    bottom: calc(var(--arrow-offset-vertical) + var(--top-offset));
+    bottom: calc(var(--arrow-offset-vertical) + var(--v-offset-top));
   `)
 ])