mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(popover): raw content, new doc, v-model trigger event, update tooltip

Browse Source
This commit is contained in:
07akioni 2019-07-18 13:36:10 +08:00
parent 6e42f405ab
commit 309bed4fc4
13 changed files with 401 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/components/popoverDemo/event.demo.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Trigger
Event
</div>
<div
class="n-doc-section__view"

7
demo/components/popoverDemo/index.vue
View File

@ -16,12 +16,12 @@
<trigger />
<event />
<placement />
<raw />
</div>
</div>
</template>
<script>
import docCodeEditorMixin from '../docCodeEditorMixin'
// import debug from './debug.demo.vue'
import basicUsage from './basicUsage.demo.vue'
import noArrow from './noArrow.demo.vue'
@ -29,6 +29,7 @@ import trigger from './trigger.demo.vue'
import placement from './placement.demo.vue'
import event from './event.demo'
import delay from './delay.demo'
import raw from './raw.demo.vue'
export default {
components: {
@ -38,9 +39,9 @@ export default {
trigger,
placement,
event,
delay
delay,
raw
},
mixins: [docCodeEditorMixin],
data () {
return { content: 'hello', visible: false, showPopover: false, active1: false }
}

38
demo/components/popoverDemo/raw.demo.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Raw Content
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-popover
raw
>
<template v-slot:activator>
<n-button style="margin:0;">
hover
</n-button>
</template>
<div style="width: 100px; height: 100px; background-color: red;">
Who kicks a hole in the sky so the heaven cry over me.
</div>
</n-popover>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

5
demo/components/popoverDemo/trigger.demo.vue
View File

@ -10,7 +10,6 @@
<!--EXAMPLE_START-->
<n-popover
placement="bottom"
:width="200"
trigger="hover"
style="margin-right: 12px;"
>
@ -25,7 +24,6 @@
</n-popover>
<n-popover
placement="bottom"
:width="200"
trigger="click"
style="margin-right: 12px;"
>
@ -43,7 +41,6 @@
<n-popover
v-model="showPopover"
placement="bottom"
:width="200"
trigger="manual"
>
<template v-slot:activator>
@ -60,7 +57,7 @@
</n-popover>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">(trigger="menu")showPopover: {{ JSON.stringify(showPopover) }}</pre>
<pre class="n-doc-section__inspect">(trigger="manual")showPopover: {{ JSON.stringify(showPopover) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>

34
demo/components/tooltipDemo/basicUsage.demo.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-tooltip>
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

91
demo/components/tooltipDemo/event.demo.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Event
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-tooltip
placement="bottom"
:width="200"
trigger="hover"
style="margin-right: 12px;"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<n-button style="margin: 0;">
California Girls(Hover)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<n-tooltip
placement="bottom"
:width="200"
trigger="click"
style="margin-right: 12px;"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<n-button
style="margin: 0;"
>
California Girls(Click)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<n-tooltip
v-model="showPopover"
placement="bottom"
:width="200"
trigger="manual"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<n-button
style="margin: 0;"
@click="showPopover = !showPopover"
>
California Girls(Manual)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
showPopover: false
}
},
methods: {
handleShow () {
this.$NMessage.success('show tooltip')
},
handleHide () {
this.$NMessage.success('hide tooltip')
}
}
}
</script>

90
demo/components/tooltipDemo/index.vue
View File

@ -9,92 +9,22 @@
</n-gradient-text>
</div>
<div class="n-doc-body">
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div class="n-doc-section__view">
<n-tooltip>
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip>
</div>
<div class="n-doc-section__source">
<textarea><n-tooltip>
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Arrow
</div>
<div class="n-doc-section__view">
<n-tooltip arrow>
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip>
</div>
<div class="n-doc-section__source">
<textarea><n-tooltip arrow>
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip></textarea>
</div>
</div>
<div class="n-doc-section">
<div class="n-doc-section__header">
Placement
</div>
<div class="n-doc-section__view">
<n-tooltip placement="top-start">
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip>
</div>
<div class="n-doc-section__source">
<textarea>/**
* If you want to see more placement options, see Popover
*/
<n-tooltip placement="top-start">
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip></textarea>
</div>
</div>
<basic-usage />
<trigger />
<event />
<placement />
</div>
</div>
</template>
<script>
import docCodeEditorMixin from '../docCodeEditorMixin'
import basicUsage from './basicUsage.demo.vue'
import trigger from './trigger.demo.vue'
import event from './event.demo.vue'
import placement from './placement.demo.vue'
export default {
mixins: [docCodeEditorMixin],
components: { basicUsage, trigger, event, placement },
data () {
return {

35
demo/components/tooltipDemo/placement.demo.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Placement
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<!--If you want to see more placement options, see Popover Page -->
<n-tooltip placement="top-start">
<template v-slot:activator>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
This is the contextual help
</n-tooltip>
<!--EXAMPLE_END-->
</div>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

75
demo/components/tooltipDemo/trigger.demo.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Trigger
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-tooltip
placement="bottom"
trigger="hover"
style="margin-right: 12px;"
>
<template v-slot:activator>
<n-button style="margin: 0;">
California Girls(Hover)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<n-tooltip
placement="bottom"
trigger="click"
style="margin-right: 12px;"
>
<template v-slot:activator>
<n-button
style="margin: 0;"
>
California Girls(Click)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<n-tooltip
v-model="showPopover"
placement="bottom"
trigger="manual"
>
<template v-slot:activator>
<n-button
style="margin: 0;"
@click="showPopover = !showPopover"
>
California Girls(Manual)
</n-button>
</template>
<span>
I wish they all could be California girls
</span>
</n-tooltip>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">(trigger="manual")showPopover: {{ JSON.stringify(showPopover) }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
showPopover: false
}
}
}
</script>

27
packages/common/Popover/src/RawPopover.vue
View File

@ -22,6 +22,7 @@
make it easy to positioning. So I just leave it for later solving.
-->
<div
v-if="!raw"
ref="content"
class="n-popover__content-wrapper"
>
@ -46,6 +47,28 @@
</div>
</transition>
</div>
<div
v-else
ref="content"
class="n-popover__content-wrapper"
>
<transition
name="n-popover-fade"
>
<div
v-if="active"
ref="popoverBody"
:n-placement="placement"
class="n-popover__raw-content"
:class="{
'n-popover__content--without-arrow': !arrow
}"
@mouseenter="handleMouseEnter"
>
<slot />
</div>
</transition>
</div>
</div>
</div>
</template>
@ -78,6 +101,10 @@ export default {
arrow: {
default: true,
type: Boolean
},
raw: {
default: false,
type: Boolean
}
/**
* for debug usage

30
packages/common/Popover/src/main.vue
View File

@ -43,16 +43,13 @@ export default {
return ['click', 'hover', 'manual'].includes(value)
}
},
/**
* for debug usage
*/
// name: {
// type: String,
// default: '-1'
// },
arrow: {
default: true,
type: Boolean
},
raw: {
type: Boolean,
default: false
}
},
data () {
@ -68,13 +65,26 @@ export default {
return this.delay === null ? null : Number(this.delay)
}
},
methods: {
handleSetActive (active) {
if (active) {
watch: {
value (newValue) {
if (newValue) {
this.$emit('show')
} else {
this.$emit('hide')
}
}
},
methods: {
handleSetActive (active) {
if (active) {
if (!this.active) {
this.$emit('show')
}
} else {
if (this.active) {
this.$emit('hide')
}
}
this.active = active
}
},

67
packages/common/Tooltip/src/main.vue
View File

@ -1,8 +1,12 @@
<template>
<n-popover
trigger="hover"
v-model="value"
class="n-tooltip"
:arrow="arrow"
:placement="placement"
:trigger="trigger"
@show="handleShow"
@hide="handleHide"
>
<template v-slot:activator>
<slot name="activator" />
@ -19,34 +23,59 @@
*/
import NPopover from '../../Popover'
const DEFAULT_DURATION = 200
const DEFAULT_DELAY = null
export default {
name: 'NTooltip',
components: {
NPopover
},
props: {
arrow: {
placement: {
type: String,
default: 'bottom'
},
value: {
type: Boolean,
default: false
},
placement: {
delay: {
type: [String, Number],
default: DEFAULT_DELAY
},
duration: {
type: [String, Number],
default: DEFAULT_DURATION,
/**
* make sure it is a positive number...
*/
validator (value) {
return [
'top',
'bottom',
'left',
'right',
'top-start',
'top-end',
'left-start',
'left-end',
'right-start',
'right-end',
'bottom-start',
'bottom-end'
].includes(value)
},
default: 'bottom'
value = Number(value)
if (Number.isNaN(value)) {
return false
} else {
return value > 0
}
}
},
trigger: {
default: 'hover',
validator (value) {
return ['click', 'hover', 'manual'].includes(value)
}
},
arrow: {
default: false,
type: Boolean
}
},
methods: {
handleShow () {
this.$emit('show')
},
handleHide () {
this.$emit('hide')
}
}
}

32
styles/Popover.scss
View File

@ -22,6 +22,23 @@ $popover-distance: $popover-arrow-width - 1 + 14;
position: fixed;
left: 0;
top: 0;
.n-popover__raw-content, .n-popover__content {
&.n-popover-fade-enter-active,
&.n-popover-fade-leave-active {
transform: scale(1);
opacity: 1;
}
&.n-popover-fade-enter-active {
transition: opacity .1s $fast-in-cubic-bezier, transform .1s $fast-in-cubic-bezier;
}
&.n-popover-fade-enter, &.n-popover-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(.9);
}
&.n-popover-fade-leave-to {
transition: opacity .1s $slow-out-cubic-bezier, transform .1s $slow-out-cubic-bezier;
}
}
.n-popover__content {
position: relative;
border-radius: 6px;
@ -194,21 +211,6 @@ $popover-distance: $popover-arrow-width - 1 + 14;
bottom: 10px;
}
}
&.n-popover-fade-enter-active,
&.n-popover-fade-leave-active {
transform: scale(1);
opacity: 1;
}
&.n-popover-fade-enter-active {
transition: opacity .1s $fast-in-cubic-bezier, transform .1s $fast-in-cubic-bezier;
}
&.n-popover-fade-enter, &.n-popover-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
transform: scale(.9);
}
&.n-popover-fade-leave-to {
transition: opacity .1s $slow-out-cubic-bezier, transform .1s $slow-out-cubic-bezier;
}
}
}