diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 6128c66bf2b..ffba5ef3684 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -12,6 +12,7 @@ - Fix `n-notification`'s exported `NotificationReactive` type is not writable, closes [#876](https://github.com/TuSimple/naive-ui/issues/876). - Fix `n-tabs` style glitches when different types tabs are nested, closes [#850](https://github.com/TuSimple/naive-ui/issues/850). - Fix `n-dropdown`'s inner link click trigger area is not the entire option, closes [#823](https://github.com/TuSimple/naive-ui/issues/823). +- Fix `n-popover` arrow's misplacement when placed in nested popovers with different placement, closes [#916](https://github.com/TuSimple/naive-ui/issues/916). ## 2.16.4 (2021-08-16) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 1843f3984cb..29686a649fe 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -12,6 +12,7 @@ - 修复 `n-notification` 导出的 `NotificationReactive` 类型不可变,关闭 [#876](https://github.com/TuSimple/naive-ui/issues/876) - 修复 `n-tabs` 不同类型嵌套样式错乱,关闭 [#850](https://github.com/TuSimple/naive-ui/issues/850) - 修复 `n-dropdown` 内部的链接点击触发区域不是整个选项,关闭 [#823](https://github.com/TuSimple/naive-ui/issues/823) +- 修复 `n-popover` 嵌套于不同 placement 的 popover 中箭头位置错乱,关闭 [#916](https://github.com/TuSimple/naive-ui/issues/916) ## 2.16.4 (2021-08-16) diff --git a/src/_utils/cssr/index.ts b/src/_utils/cssr/index.ts index c4effc7d4d6..8afd76c7ae0 100644 --- a/src/_utils/cssr/index.ts +++ b/src/_utils/cssr/index.ts @@ -51,12 +51,18 @@ function asModal (style: CProperties): CNode { return c(({ props: { bPrefix } }) => `&${bPrefix || prefix}modal`, style) } +// child block +const cCB: typeof cB = ((...args: any[]) => { + return c('>', [(cB as any)(...args)]) +}) as any + export { c, cB, cE, cM, cNotM, + cCB, insideFormItem, insideModal, insidePopover, diff --git a/src/popover/demos/zhCN/index.demo-entry.md b/src/popover/demos/zhCN/index.demo-entry.md index 3a694da30f4..8f0f6e89bc8 100644 --- a/src/popover/demos/zhCN/index.demo-entry.md +++ b/src/popover/demos/zhCN/index.demo-entry.md @@ -17,8 +17,9 @@ raw-content style trigger-width manual-position -hoist-debug header +hoist-debug +nested-debug ``` ## Props diff --git a/src/popover/demos/zhCN/nested-debug.demo.md b/src/popover/demos/zhCN/nested-debug.demo.md new file mode 100644 index 00000000000..e154537a44e --- /dev/null +++ b/src/popover/demos/zhCN/nested-debug.demo.md @@ -0,0 +1,32 @@ +# Nested Debug + +```html + + + + + {{ item }} + + + +``` + +```js +import { defineComponent } from 'vue' +export default defineComponent({ + setup () { + return { + dataList: [ + 'Lorem', + 'Lorem', + 'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero eveniet exercitationem quasi. Sequi quia natus quam ipsa sit autem eveniet harum tempore, eius placeat temporibus nobis veritatis vero totam possimus.', + 'jflakjdflksjflkajdlkfjaslkfjklasjdflkasjflkjsadlkf' + ] + } + } +}) +``` diff --git a/src/popover/src/styles/index.cssr.ts b/src/popover/src/styles/index.cssr.ts index 700edd7cc7c..ae04e12a49d 100644 --- a/src/popover/src/styles/index.cssr.ts +++ b/src/popover/src/styles/index.cssr.ts @@ -1,6 +1,6 @@ import { CNode } from 'css-render' import { FollowerPlacement } from 'vueuc' -import { c, cB, cM, cNotM, cE } from '../../../_utils/cssr' +import { c, cB, cM, cNotM, cE, cCB } from '../../../_utils/cssr' const oppositePlacement = { top: 'bottom', @@ -164,7 +164,7 @@ function placementStyle ( cM('overlap', ` margin: 0; `), - cB('popover-arrow-wrapper', ` + cCB('popover-arrow-wrapper', ` right: 0; left: 0; top: 0;