feat(popover): better flip, closes #1520, closes #1643

CHANGELOG.en-US.md

@@ -11,8 +11,9 @@
 - Fix `n-slider` processing of step value precision.
 - Fix `n-date-picker` throw error when `time-picker` input is empty, closes [#1678](https://github.com/TuSimple/naive-ui/issues/1678).
 - Fix `n-popover` not working when `trigger` is `focus`.
-- Fix `n-scrollbar` judement error on mouse up away.
+- Fix `n-scrollbar`'s scrollbar will vanish if clicked.
 - Fix `n-popover` has an invalid line in style.
+- Fix `n-popover` `flip=false` doesn't work.
 
 ### Feats
 
@@ -23,6 +24,7 @@
 - `n-layout-sider` add `on-after-enter` and `on-after-leave` props, closes [#1241](https://github.com/TuSimple/naive-ui/issues/1241).
 - `n-upload` add `custom-request` prop, closes [#1389](https://github.com/TuSimple/naive-ui/issues/1389).
 - `n-data-table` add `expanded-row-keys` prop.
+- `n-popover` provides better auto position adjustment, closes [#1520](https://github.com/TuSimple/naive-ui/issues/1520), [#1643](https://github.com/TuSimple/naive-ui/issues/1643).
 
 ## 2.21.1 (2021-11-23)
 

CHANGELOG.zh-CN.md

@@ -10,7 +10,10 @@
 - 修复 `n-log` 的 `trim` 属性不能独立使用
 - 修复 `n-slider` 对于数值精度的处理问题
 - 修复 `n-date-picker` 当 `time-picker` 输入为空时报错，关闭 [#1678](https://github.com/TuSimple/naive-ui/issues/1678)
+- 修复 `n-popover` `trigger` 为 `focus` 时不生效
+- 修复 `n-scrollbar` 点击在滚动条上时会消失一次
 - 修复 `n-popover` 样式中有不合法的行
+- 修复 `n-popover` `flip=false` 不生效
 
 ### Feats
 
@@ -21,11 +24,7 @@
 - `n-layout-sider` 新增 `on-after-enter` 和 `on-after-leave` 属性，关闭 [#1241](https://github.com/TuSimple/naive-ui/issues/1241)
 - `n-upload` 新增 `custom-request` 属性，关闭 [#1389](https://github.com/TuSimple/naive-ui/issues/1389)
 - `n-data-table` 新增 `expanded-row-keys` 属性
-
-### TODO
-
-- `n-popover` focus trigger.
-- `n-scrollbar` click bar.
+- `n-popover` 提供更强的自动位置调整能力，关闭 [#1520](https://github.com/TuSimple/naive-ui/issues/1520)、[#1643](https://github.com/TuSimple/naive-ui/issues/1643)
 
 ## 2.21.1 (2021-11-23)
 

package.json

@@ -62,6 +62,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.15.8",
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
     "@babel/preset-env": "^7.12.10",
@@ -81,6 +82,7 @@
     "@vue/server-renderer": "^3.2.18",
     "@vue/test-utils": "2.0.0-rc.16",
     "autoprefixer": "^10.2.6",
+    "axios": "^0.24.0",
     "babel-jest": "^27.0.2",
     "codesandbox": "^2.2.3",
     "cross-env": "^7.0.3",
@@ -109,14 +111,12 @@
     "typescript": "^4.4.2",
     "vite": "^2.1.3",
     "vue": "^3.2.12",
-    "vue-router": "^4.0.5",
-    "@babel/eslint-parser": "^7.15.8"
+    "vue-router": "^4.0.5"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "axios": "^0.24.0",
     "@css-render/plugin-bem": "^0.15.6",
     "@css-render/vue3-ssr": "^0.15.6",
     "@types/lodash": "^4.14.170",
@@ -134,7 +134,7 @@
     "vdirs": "^0.1.4",
     "vfonts": "^0.1.0",
     "vooks": "^0.2.10",
-    "vueuc": "^0.4.15"
+    "vueuc": "^0.4.18"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

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. |
+| flip | `boolean` | `true` | Whether to flip 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. |

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` | 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置 |
+| flip | `boolean` | `true` | 是否在当前放置方式不能提供足够空间的时候调整弹出信息的位置 |
 | 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` | 是否不添加默认样式 |

src/popover/src/Popover.tsx

@@ -134,7 +134,7 @@ export const popoverBaseProps = {
     default: 'if'
   },
   arrowStyle: [String, Object] as PropType<string | CSSProperties>,
-  filp: {
+  flip: {
     type: Boolean,
     default: true
   },
@@ -202,12 +202,6 @@ export default defineComponent({
   setup (props) {
     if (__DEV__) {
       watchEffect(() => {
-        if (props.maxWidth !== undefined) {
-          warnOnce(
-            'popover',
-            '`max-width` is deprecated, please use `style` instead.'
-          )
-        }
         if (props.minWidth !== undefined) {
           warnOnce(
             'popover',

src/popover/src/PopoverBody.tsx

@@ -46,7 +46,7 @@ export const popoverBodyProps = {
   displayDirective: String as PropType<'if' | 'show'>,
   x: Number,
   y: Number,
-  filp: Boolean,
+  flip: Boolean,
   overlap: Boolean,
   placement: String as PropType<FollowerPlacement>,
   width: [Number, String] as PropType<number | 'trigger'>,
@@ -302,6 +302,7 @@ export default defineComponent({
         to: this.adjustedTo,
         x: this.x,
         y: this.y,
+        flip: this.flip,
         placement: this.placement,
         containerClass: this.namespace,
         ref: 'followerRef',