mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-11-21 01:13:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): overlap

Browse Source
This commit is contained in:
07akioni 2021-02-19 01:27:35 +08:00
parent 425b6794b1
commit 34932484b7
9 changed files with 72 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -121,7 +121,7 @@
"vooks": "0.0.8",
"vue": "^3.0.5",
"vue-router": "^4.0.3",
"vueuc": "^0.1.2"
"vueuc": "^0.1.3"
},
"husky": {
"hooks": {

1
src/popover/demos/enUS/index.demo-entry.md
View File

@ -29,6 +29,7 @@ manual-position
| 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` | `200` | Popover vanish delay when trigger is `hover` |
| filp | `boolean` | `true` | Whether to filp the popover when there is no space for current placement. |
| overlap | `boolean` | `false` | |
| placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| ` | `'bottom'` | |
| raw | `boolean` | `false` | Whether to use no default styles. |
| show-arrow | `boolean` | `true` | |

40
src/popover/demos/enUS/placement.demo.md
View File

@ -1,8 +1,10 @@
# Placement
```html
<n-switch v-model:value="overlap" /> Overlap Trigger Element
<n-divider />
<div class="popover-grid">
<n-popover placement="top-start" trigger="click">
<n-popover :overlap="overlap" placement="top-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
Top Start
@ -10,13 +12,13 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="top" trigger="click">
<n-popover :overlap="overlap" placement="top" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;"> Top </n-button>
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="top-end" trigger="click">
<n-popover :overlap="overlap" placement="top-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
Top End
@ -24,7 +26,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="left-start" trigger="click">
<n-popover :overlap="overlap" placement="left-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
Left Start
@ -32,13 +34,13 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="left" trigger="click">
<n-popover :overlap="overlap" placement="left" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;"> Left </n-button>
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="left-end" trigger="click">
<n-popover :overlap="overlap" placement="left-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
Left End
@ -46,7 +48,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="right-start" trigger="click">
<n-popover :overlap="overlap" placement="right-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
Right Start
@ -54,7 +56,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="right" trigger="click">
<n-popover :overlap="overlap" placement="right" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
Right
@ -62,7 +64,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="right-end" trigger="click">
<n-popover :overlap="overlap" placement="right-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
Right End
@ -70,7 +72,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="bottom-start" trigger="click">
<n-popover :overlap="overlap" placement="bottom-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
Bottom Start
@ -78,7 +80,7 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="bottom" trigger="click">
<n-popover :overlap="overlap" placement="bottom" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
Bottom
@ -86,19 +88,27 @@
</template>
<div class="large-text">Oops!</div>
</n-popover>
<n-popover placement="bottom-end" trigger="click">
<n-popover :overlap="overlap" placement="bottom-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
Bottom End
</n-button>
</template>
<div class="large-text">Oops!</div>
<div class="large-text">Oops</div>
</n-popover>
</div>
```
```script
console.log('wow')
```js
import { ref } from 'vue'
export default {
setup () {
return {
overlap: ref(false)
}
}
}
```
```css

1
src/popover/demos/zhCN/index.demo-entry.md
View File

@ -29,6 +29,7 @@ manual-position
| display-directive | `'if' \| 'show'` | `'if'` | 条件渲染使用的指令，`if` 会让内容被使用 `v-if` 渲染，`show` 会让内容被使用 `v-show` 渲染 |
| duration | `number` | `200` | 悬浮关闭弹出信息的延迟 |
| filp | `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' \| ` | `'bottom'` | |
| raw | `boolean` | `false` | 是否不添加默认样式 |
| show-arrow | `boolean` | `true` | |

38
src/popover/demos/zhCN/placement.demo.md
View File

@ -1,8 +1,10 @@
# 位置
```html
<n-switch v-model:value="overlap" /> 覆盖触发元素
<n-divider />
<div class="popover-grid">
<n-popover placement="top-start" trigger="click">
<n-popover :overlap="overlap" placement="top-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
Top Start
@ -10,13 +12,13 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="top" trigger="click">
<n-popover :overlap="overlap" placement="top" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 2 / 2 / 3;"> Top </n-button>
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="top-end" trigger="click">
<n-popover :overlap="overlap" placement="top-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
Top End
@ -24,7 +26,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="left-start" trigger="click">
<n-popover :overlap="overlap" placement="left-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
Left Start
@ -32,13 +34,13 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="left" trigger="click">
<n-popover :overlap="overlap" placement="left" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 3 / 1 / 4 / 2;"> Left </n-button>
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="left-end" trigger="click">
<n-popover :overlap="overlap" placement="left-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
Left End
@ -46,7 +48,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="right-start" trigger="click">
<n-popover :overlap="overlap" placement="right-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
Right Start
@ -54,7 +56,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="right" trigger="click">
<n-popover :overlap="overlap" placement="right" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
Right
@ -62,7 +64,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="right-end" trigger="click">
<n-popover :overlap="overlap" placement="right-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
Right End
@ -70,7 +72,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="bottom-start" trigger="click">
<n-popover :overlap="overlap" placement="bottom-start" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
Bottom Start
@ -78,7 +80,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="bottom" trigger="click">
<n-popover :overlap="overlap" placement="bottom" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
Bottom
@ -86,7 +88,7 @@
</template>
<div class="large-text">啊！</div>
</n-popover>
<n-popover placement="bottom-end" trigger="click">
<n-popover :overlap="overlap" placement="bottom-end" trigger="click">
<template #trigger>
<n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
Bottom End
@ -97,6 +99,18 @@
</div>
```
```js
import { ref } from 'vue'
export default {
setup () {
return {
overlap: ref(false)
}
}
}
```
```css
.popover-grid {
display: grid;

11
src/popover/src/Popover.ts
View File

@ -141,6 +141,10 @@ export const popoverProps = {
type: Boolean,
default: true
},
overlap: {
type: Boolean,
default: false
},
// events
// eslint-disable-next-line vue/prop-name-casing
'onUpdate:show': Function as PropType<
@ -211,6 +215,10 @@ export default defineComponent({
})
// setup show-arrow
const compatibleShowArrowRef = useCompitable(props, ['arrow', 'showArrow'])
const mergedShowArrowRef = computed(() => {
if (props.overlap) return false
return compatibleShowArrowRef.value
})
// trigger
let triggerVNode = null as VNode | null
// bodyInstance
@ -323,7 +331,7 @@ export default defineComponent({
// if to show popover body
uncontrolledShow: uncontrolledShowRef,
mergedShow: mergedShowRef,
compatibleShowArrow: compatibleShowArrowRef,
mergedShowArrow: mergedShowArrowRef,
setShow,
handleClick,
handleMouseEnter,
@ -371,6 +379,7 @@ export default defineComponent({
NPopoverBody,
keep(this.$props, bodyPropKeys, {
...this.$attrs,
showArrow: this.mergedShowArrow,
show: this.mergedShow
}),
slots

5
src/popover/src/PopoverBody.ts
View File

@ -38,6 +38,7 @@ export const popoverBodyProps = {
x: Number,
y: Number,
filp: Boolean,
overlap: Boolean,
placement: String as PropType<FollowerPlacement>,
// private
shadow: Boolean,
@ -187,6 +188,7 @@ export default defineComponent({
class: [
'n-popover',
{
'n-popover--overlap': this.overlap,
'n-popover--no-arrow': !this.showArrow,
'n-popover--shadow': this.shadow,
'n-popover--padded': this.padded,
@ -231,7 +233,8 @@ export default defineComponent({
y: this.y,
placement: this.placement,
containerClass: this.namespace,
ref: 'followerRef'
ref: 'followerRef',
overlap: this.overlap
},
{
default: () => {

3
src/popover/src/styles/index.cssr.ts
View File

@ -155,6 +155,9 @@ function placementStyle (
margin-${position}: var(--space);
margin-${oppositePlacement[position]}: var(--space);
`),
cM('overlap', `
margin: 0;
`),
cB('popover-arrow-wrapper', `
right: 0;
left: 0;

1
vue3.md
View File

@ -230,6 +230,7 @@
- [x] popover
- new
- `default-show`
- `overlap`
- deprecate
- `#activator` => `#trigger`
- `overlay-xxx` => `body-xxx`