mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
feat(popover): css in js
This commit is contained in:
haibo tang
parent
8f694dc7e5
commit
b0aeeda529
@ -1,7 +0,0 @@
|
||||
import NPopover from './src/main'
|
||||
|
||||
NPopover.install = function (Vue) {
|
||||
Vue.component(NPopover.name, NPopover)
|
||||
}
|
||||
|
||||
export default NPopover
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* Tooltip: popover wearing waistcoat
|
||||
*/
|
||||
import NPopover from '../../Popover'
|
||||
import NPopover from '../../popover'
|
||||
|
||||
export default {
|
||||
name: 'NTooltip',
|
||||
|
||||
@ -1,265 +1,265 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
// @import "./mixins/mixins.scss";
|
||||
|
||||
@mixin popover-content-transition {
|
||||
&#{&}-transition-enter-to, &#{&}-transition-leave {
|
||||
transform: $--n-transform-debounce-scale;
|
||||
opacity: 1;
|
||||
}
|
||||
&#{&}-transition-enter, &#{&}-transition-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(.85);
|
||||
}
|
||||
&#{&}-transition-enter-active {
|
||||
transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
|
||||
}
|
||||
&#{&}-transition-leave-active {
|
||||
transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
|
||||
}
|
||||
}
|
||||
// @mixin popover-content-transition {
|
||||
// &#{&}-transition-enter-to, &#{&}-transition-leave {
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// &#{&}-transition-enter, &#{&}-transition-leave-to {
|
||||
// opacity: 0;
|
||||
// transform: scale(.85);
|
||||
// }
|
||||
// &#{&}-transition-enter-active {
|
||||
// transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
|
||||
// }
|
||||
// &#{&}-transition-leave-active {
|
||||
// transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
|
||||
// }
|
||||
// }
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(popover-content) {
|
||||
@include once {
|
||||
@include popover-content-transition;
|
||||
transition:
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
color .3s $--n-ease-in-out-cubic-bezier;
|
||||
transform-origin: inherit;
|
||||
transform: $--n-transform-debounce-scale;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
@include m(styled) {
|
||||
border-radius: $--n-popover-border-radius;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
@include m(fix-width) {
|
||||
white-space: normal;
|
||||
width: max-content;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@include b(popover-arrow-wrapper) {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
@include b(popover-arrow) {
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
box-shadow: $--n-popover-arrow-box-shadow;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
@include m(no-arrow) {
|
||||
&[n-placement$="top-start"] {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
&[n-placement$="top"] {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
&[n-placement$="top-end"] {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
&[n-placement$="bottom-start"] {
|
||||
margin-top: 6px;
|
||||
}
|
||||
&[n-placement$="bottom"] {
|
||||
margin-top: 6px;
|
||||
}
|
||||
&[n-placement$="bottom-end"] {
|
||||
margin-top: 6px;
|
||||
}
|
||||
&[n-placement$="left-start"] {
|
||||
margin-right: 6px;
|
||||
}&[n-placement$="left"] {
|
||||
margin-right: 6px;
|
||||
}
|
||||
&[n-placement$="left-end"] {
|
||||
margin-right: 6px;
|
||||
}
|
||||
&[n-placement$="right-start"] {
|
||||
margin-left: 6px;
|
||||
}
|
||||
&[n-placement$="right"] {
|
||||
margin-left: 6px;
|
||||
}
|
||||
&[n-placement$="right-end"] {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
&[n-placement$="top-start"] {
|
||||
margin-bottom: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
top: -$--n-popover-arrow-width;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="top"] {
|
||||
margin-bottom: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
top: -$--n-popover-arrow-width;
|
||||
transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="top-end"] {
|
||||
margin-bottom: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
top: -$--n-popover-arrow-width;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="bottom-start"] {
|
||||
margin-top: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
bottom: -$--n-popover-arrow-width;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="bottom"] {
|
||||
margin-top: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
bottom: -$--n-popover-arrow-width;
|
||||
transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="bottom-end"] {
|
||||
margin-top: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
height: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
bottom: -$--n-popover-arrow-width;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="left-start"] {
|
||||
margin-right: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
left: -$--n-popover-arrow-width;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="left"] {
|
||||
margin-right: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
left: -$--n-popover-arrow-width;
|
||||
transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="left-end"] {
|
||||
margin-right: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
left: -$--n-popover-arrow-width;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="right-start"] {
|
||||
margin-left: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
right: -$--n-popover-arrow-width;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="right"] {
|
||||
margin-left: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
right: -$--n-popover-arrow-width;
|
||||
transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[n-placement$="right-end"] {
|
||||
margin-left: 10px;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
width: $--n-popover-arrow-width * 2;
|
||||
@include b(popover-arrow) {
|
||||
right: -$--n-popover-arrow-width;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(styled) {
|
||||
background-color: $--popover-background-color;
|
||||
}
|
||||
color: $--popover-text-color;
|
||||
@include b(popover-arrow-wrapper) {
|
||||
@include b(popover-arrow) {
|
||||
background-color: $--popover-background-color;
|
||||
}
|
||||
}
|
||||
@include m(shadow) {
|
||||
box-shadow: $--popover-box-shadow;
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(popover-content) {
|
||||
// @include once {
|
||||
// @include popover-content-transition;
|
||||
// transition:
|
||||
// background-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// transform-origin: inherit;
|
||||
// transform: $--n-transform-debounce-scale;
|
||||
// position: relative;
|
||||
// font-size: 13px;
|
||||
// @include m(styled) {
|
||||
// border-radius: $--n-popover-border-radius;
|
||||
// padding: 8px 14px;
|
||||
// }
|
||||
// @include m(fix-width) {
|
||||
// white-space: normal;
|
||||
// width: max-content;
|
||||
// box-sizing: border-box;
|
||||
// }
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// position: absolute;
|
||||
// overflow: hidden;
|
||||
// pointer-events: none;
|
||||
// @include b(popover-arrow) {
|
||||
// transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// position: absolute;
|
||||
// display: block;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// box-shadow: $--n-popover-arrow-box-shadow;
|
||||
// transform: rotate(45deg);
|
||||
// }
|
||||
// }
|
||||
// @include m(no-arrow) {
|
||||
// &[n-placement$="top-start"] {
|
||||
// margin-bottom: 6px;
|
||||
// }
|
||||
// &[n-placement$="top"] {
|
||||
// margin-bottom: 6px;
|
||||
// }
|
||||
// &[n-placement$="top-end"] {
|
||||
// margin-bottom: 6px;
|
||||
// }
|
||||
// &[n-placement$="bottom-start"] {
|
||||
// margin-top: 6px;
|
||||
// }
|
||||
// &[n-placement$="bottom"] {
|
||||
// margin-top: 6px;
|
||||
// }
|
||||
// &[n-placement$="bottom-end"] {
|
||||
// margin-top: 6px;
|
||||
// }
|
||||
// &[n-placement$="left-start"] {
|
||||
// margin-right: 6px;
|
||||
// }&[n-placement$="left"] {
|
||||
// margin-right: 6px;
|
||||
// }
|
||||
// &[n-placement$="left-end"] {
|
||||
// margin-right: 6px;
|
||||
// }
|
||||
// &[n-placement$="right-start"] {
|
||||
// margin-left: 6px;
|
||||
// }
|
||||
// &[n-placement$="right"] {
|
||||
// margin-left: 6px;
|
||||
// }
|
||||
// &[n-placement$="right-end"] {
|
||||
// margin-left: 6px;
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="top-start"] {
|
||||
// margin-bottom: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// top: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// top: -$--n-popover-arrow-width;
|
||||
// left: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="top"] {
|
||||
// margin-bottom: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// top: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// top: -$--n-popover-arrow-width;
|
||||
// transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
// left: 50%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="top-end"] {
|
||||
// margin-bottom: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// top: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// top: -$--n-popover-arrow-width;
|
||||
// right: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="bottom-start"] {
|
||||
// margin-top: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// bottom: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// bottom: -$--n-popover-arrow-width;
|
||||
// left: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="bottom"] {
|
||||
// margin-top: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// bottom: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// bottom: -$--n-popover-arrow-width;
|
||||
// transform: translateX(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
// left: 50%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="bottom-end"] {
|
||||
// margin-top: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// bottom: 100%;
|
||||
// height: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// bottom: -$--n-popover-arrow-width;
|
||||
// right: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="left-start"] {
|
||||
// margin-right: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// left: -$--n-popover-arrow-width;
|
||||
// top: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="left"] {
|
||||
// margin-right: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// left: -$--n-popover-arrow-width;
|
||||
// transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
// top: 50%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="left-end"] {
|
||||
// margin-right: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// left: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// left: -$--n-popover-arrow-width;
|
||||
// bottom: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="right-start"] {
|
||||
// margin-left: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// right: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// right: -$--n-popover-arrow-width;
|
||||
// top: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="right"] {
|
||||
// margin-left: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// right: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// right: -$--n-popover-arrow-width;
|
||||
// transform: translateY(-$--n-popover-arrow-width) rotate(45deg) ;
|
||||
// top: 50%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &[n-placement$="right-end"] {
|
||||
// margin-left: 10px;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// right: 100%;
|
||||
// width: $--n-popover-arrow-width * 2;
|
||||
// @include b(popover-arrow) {
|
||||
// right: -$--n-popover-arrow-width;
|
||||
// bottom: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(styled) {
|
||||
// background-color: $--popover-background-color;
|
||||
// }
|
||||
// color: $--popover-text-color;
|
||||
// @include b(popover-arrow-wrapper) {
|
||||
// @include b(popover-arrow) {
|
||||
// background-color: $--popover-background-color;
|
||||
// }
|
||||
// }
|
||||
// @include m(shadow) {
|
||||
// box-shadow: $--popover-box-shadow;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
|
||||
@import './Descriptions.scss';
|
||||
@import './Form.scss';
|
||||
@import './Popover.scss';
|
||||
// @import './Popover.scss';
|
||||
// @import './Tabs.scss';
|
||||
// @import './Table.scss';
|
||||
@import './Tooltip.scss';
|
||||
@import './Upload.scss';
|
||||
@ -38,7 +38,7 @@
|
||||
<script>
|
||||
import NIcon from '../../../icon'
|
||||
import NDataTableFilterMenu from './FilterMenu'
|
||||
import NPopover from '../../../Popover'
|
||||
import NPopover from '../../../popover'
|
||||
import funnel from '../../../_icons/funnel'
|
||||
|
||||
function createActiveFilters (allFilters, columnKey, syntheticFilterValue) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import NPopover from '../../Popover'
|
||||
import NPopover from '../../popover'
|
||||
import NDropdownMenu from './DropdownMenu'
|
||||
import emptyFunction from '../../_utils/function/empty'
|
||||
|
||||
|
||||
@ -45,7 +45,7 @@ import Notification from './notification'
|
||||
import Pagination from './pagination'
|
||||
import Popconfirm from './popconfirm'
|
||||
import Popselect from './popselect'
|
||||
import Popup from './Popover'
|
||||
import Popup from './popover'
|
||||
import Progress from './progress'
|
||||
import Radio from './radio'
|
||||
import Result from './result'
|
||||
@ -190,6 +190,8 @@ import tabsLightStyle from './tabs/styles/light'
|
||||
import tabsDarkStyle from './tabs/styles/dark'
|
||||
import tableLightStyle from './table/styles/light'
|
||||
import tableDarkStyle from './table/styles/dark'
|
||||
import popoverLightStyle from './popover/styles/light'
|
||||
import popoverDarkStyle from './popover/styles/dark'
|
||||
|
||||
// Can be remove after refactoring
|
||||
import baseSelectionLightStyle from './_base/selection/styles/light'
|
||||
@ -409,6 +411,8 @@ export default create({
|
||||
tabsDarkStyle,
|
||||
tableLightStyle,
|
||||
tableDarkStyle,
|
||||
popoverLightStyle,
|
||||
popoverDarkStyle,
|
||||
// Can be remove after refactoring
|
||||
baseSelectionLightStyle,
|
||||
baseSelectionDarkStyle
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
|
||||
<script>
|
||||
import FadeInHeightExpandTransition from '../../_transition/FadeInHeightExpandTransition'
|
||||
import NPopover from '../../Popover'
|
||||
import NPopover from '../../popover'
|
||||
import NMenuItemContent from './MenuItemContent'
|
||||
import NMenu from './Menu'
|
||||
import menuContentMixin from './menuContentMixin'
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import NPopover from '../../Popover'
|
||||
import NPopover from '../../popover'
|
||||
import PopconfirmPanel from './PopconfirmPanel'
|
||||
|
||||
export default {
|
||||
|
||||
7
src/popover/index.js
Normal file
7
src/popover/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import NPopover from './src/Popover'
|
||||
|
||||
NPopover.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + NPopover.name, NPopover)
|
||||
}
|
||||
|
||||
export default NPopover
|
||||
@ -19,7 +19,7 @@ function mixin (component, mixins) {
|
||||
* When using `manual` trigger, using default param of v-model(value prop, input event)
|
||||
*/
|
||||
export default {
|
||||
name: 'NPopover',
|
||||
name: 'Popover',
|
||||
functional: true,
|
||||
props: {
|
||||
show: {
|
||||
@ -7,6 +7,8 @@ import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import formatLength from '../../_utils/css/formatLength'
|
||||
import getDefaultSlot from '../../_utils/vue/getDefaultSlot'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles'
|
||||
|
||||
export default {
|
||||
name: 'NPopoverContent',
|
||||
@ -84,7 +86,14 @@ export default {
|
||||
default: 'if'
|
||||
}
|
||||
},
|
||||
mixins: [withapp, themeable, placeable, zindexable],
|
||||
cssrName: 'Popover',
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable,
|
||||
placeable,
|
||||
zindexable,
|
||||
usecssr(styles)
|
||||
],
|
||||
directives: {
|
||||
clickoutside,
|
||||
mousemoveoutside
|
||||
9
src/popover/src/styles/index.js
Normal file
9
src/popover/src/styles/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: ['syntheticTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
233
src/popover/src/styles/themed-base.cssr.js
Normal file
233
src/popover/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,233 @@
|
||||
import { c, cB, cM } from '../../../_utils/cssr'
|
||||
import depx from '../../../_utils/css/depx'
|
||||
import pxfy from '../../../_utils/css/pxfy'
|
||||
|
||||
function popoverContentTransition (pallete, easeOutCubicBezier, easeInCubicBezier) {
|
||||
return [
|
||||
c('&&-transition-enter-to, &&-transition-leave', {
|
||||
raw: `
|
||||
transform: ${pallete.transformDebounceScale};
|
||||
opacity: 1;
|
||||
`
|
||||
}),
|
||||
c('&&-transition-enter, &&-transition-leave-to', {
|
||||
raw: `
|
||||
opacity: 0;
|
||||
transform: scale(.85);
|
||||
`
|
||||
}),
|
||||
c('&&-transition-enter-active', {
|
||||
raw: `
|
||||
transition: opacity .15s ${easeOutCubicBezier}, transform .15s ${easeOutCubicBezier};
|
||||
`
|
||||
}),
|
||||
c('&&-transition-leave-active', {
|
||||
raw: `
|
||||
transition: opacity .15s ${easeInCubicBezier}, transform .15s ${easeInCubicBezier};
|
||||
`
|
||||
})
|
||||
]
|
||||
}
|
||||
function noArrowNPlaceMixin (direction) {
|
||||
return c(`&[n-placement$="${direction}"]`, {
|
||||
raw: `
|
||||
margin-bottom: 6px;
|
||||
`
|
||||
})
|
||||
}
|
||||
const oppsiteDirection = {
|
||||
top: 'bottom',
|
||||
bottom: 'top',
|
||||
left: 'right',
|
||||
right: 'left'
|
||||
}
|
||||
function nPlacementMixin (pallete, direction, popoverArrowContent) {
|
||||
const finalDirection = direction.split('-')[0]
|
||||
return c(`&[n-placement$="${direction}"]`, {
|
||||
raw: `
|
||||
margin-${oppsiteDirection[finalDirection]}: 10px;
|
||||
`
|
||||
}, [
|
||||
cB('popover-arrow-wrapper', {
|
||||
raw: `
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
${finalDirection}: 100%;
|
||||
${oppsiteDirection[finalDirection]}: auto;
|
||||
height: ${pxfy(depx(pallete.arrowWidth) * 2)};
|
||||
`
|
||||
}, [
|
||||
cB('popover-arrow', {
|
||||
raw: `
|
||||
${popoverArrowContent}
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
transformDebounceScale,
|
||||
textColor,
|
||||
color,
|
||||
boxShadow,
|
||||
borderRadius,
|
||||
arrowWidth
|
||||
} = props.$local
|
||||
|
||||
const {
|
||||
easeInOutCubicBezier,
|
||||
easeInCubicBezier,
|
||||
easeOutCubicBezier
|
||||
} = props.$base
|
||||
const pallete = props.$local
|
||||
return [
|
||||
cB('popover-content', {
|
||||
raw: `
|
||||
transition:
|
||||
background-color .3s ${easeInOutCubicBezier},
|
||||
color .3s ${easeInOutCubicBezier};
|
||||
transform-origin: inherit;
|
||||
transform: ${transformDebounceScale};
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: ${textColor};
|
||||
`
|
||||
}, [
|
||||
popoverContentTransition(pallete, easeOutCubicBezier, easeInCubicBezier),
|
||||
cM('styled', {
|
||||
raw: `
|
||||
border-radius: ${borderRadius};
|
||||
padding: 8px 14px;
|
||||
`
|
||||
}),
|
||||
cM('fix-width', {
|
||||
raw: `
|
||||
white-space: normal;
|
||||
width: max-content;
|
||||
box-sizing: border-box;
|
||||
`
|
||||
}),
|
||||
cB('popover-arrow-wrapper', {
|
||||
raw: `
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
`
|
||||
}, [
|
||||
cB('popover-arrow', {
|
||||
raw: `
|
||||
transition: background-color .3s ${easeInOutCubicBezier};
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: ${pxfy(depx(arrowWidth) * 2)};
|
||||
height: ${pxfy(depx(arrowWidth) * 2)};
|
||||
box-shadow: ${boxShadow};
|
||||
transform: rotate(45deg);
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('no-arrow', [
|
||||
[ 'top',
|
||||
'top-start',
|
||||
'top-end',
|
||||
'bottom',
|
||||
'bottom-start',
|
||||
'bottom-end',
|
||||
'left',
|
||||
'left-start',
|
||||
'left-end',
|
||||
'right-start',
|
||||
'right',
|
||||
'right-end'
|
||||
].map(direction => noArrowNPlaceMixin(direction))
|
||||
]),
|
||||
nPlacementMixin(pallete, 'top-start',
|
||||
`
|
||||
top: -${arrowWidth};
|
||||
left: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'top',
|
||||
`
|
||||
top: -${arrowWidth};
|
||||
transform: translateX(-${arrowWidth}) rotate(45deg) ;
|
||||
left: 50%;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'top-end',
|
||||
`
|
||||
top: -${arrowWidth};
|
||||
right: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'bottom-start',
|
||||
`
|
||||
bottom: -${arrowWidth};
|
||||
left: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'bottom',
|
||||
`
|
||||
bottom: -${arrowWidth};
|
||||
transform: translateX(-${arrowWidth}) rotate(45deg) ;
|
||||
left: 50%;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'bottom-end',
|
||||
`
|
||||
bottom: -${arrowWidth};
|
||||
right: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'left-start',
|
||||
`
|
||||
left: -${arrowWidth};
|
||||
top: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'left',
|
||||
`
|
||||
left: -${arrowWidth};
|
||||
transform: translateY(-${arrowWidth}) rotate(45deg) ;
|
||||
top: 50%;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'left-end',
|
||||
`
|
||||
left: -${arrowWidth};
|
||||
bottom: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'right-start',
|
||||
`
|
||||
right: -${arrowWidth};
|
||||
top: 10px;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'right',
|
||||
`
|
||||
right: -${arrowWidth};
|
||||
transform: translateY(-${arrowWidth}) rotate(45deg) ;
|
||||
top: 50%;
|
||||
`),
|
||||
nPlacementMixin(pallete, 'right-end',
|
||||
`
|
||||
right: -${arrowWidth};
|
||||
bottom: 10px;
|
||||
`),
|
||||
cM('styled', {
|
||||
raw: `
|
||||
background-color: ${color};
|
||||
`
|
||||
}),
|
||||
cB('popover-arrow-wrapper', [
|
||||
cB('popover-arrow', {
|
||||
raw: `
|
||||
background-color: ${color};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('shadow', {
|
||||
raw: `
|
||||
box-shadow: ${boxShadow};
|
||||
`
|
||||
})
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
3
src/popover/styles/_common.js
Normal file
3
src/popover/styles/_common.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
arrowWidth: '4px'
|
||||
}
|
||||
26
src/popover/styles/dark.js
Normal file
26
src/popover/styles/dark.js
Normal file
@ -0,0 +1,26 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
|
||||
export default create({
|
||||
name: 'Popover',
|
||||
theme: 'dark',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
popoverBackgroundColor,
|
||||
secondaryTextOverlayColor,
|
||||
popoverBoxShadow
|
||||
} = derived
|
||||
const {
|
||||
borderRadius,
|
||||
transformDebounceScale
|
||||
} = base
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
color: popoverBackgroundColor,
|
||||
textColor: secondaryTextOverlayColor,
|
||||
boxShadow: popoverBoxShadow,
|
||||
transformDebounceScale
|
||||
}
|
||||
}
|
||||
})
|
||||
26
src/popover/styles/light.js
Normal file
26
src/popover/styles/light.js
Normal file
@ -0,0 +1,26 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import commonVariables from './_common'
|
||||
|
||||
export default create({
|
||||
name: 'Popover',
|
||||
theme: 'light',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
popoverBackgroundColor,
|
||||
secondaryTextColor,
|
||||
popoverBoxShadow
|
||||
} = derived
|
||||
const {
|
||||
borderRadius,
|
||||
transformDebounceScale
|
||||
} = base
|
||||
return {
|
||||
...commonVariables,
|
||||
borderRadius,
|
||||
color: popoverBackgroundColor,
|
||||
textColor: secondaryTextColor,
|
||||
boxShadow: popoverBoxShadow,
|
||||
transformDebounceScale
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import NPopover from '../../Popover'
|
||||
import NPopover from '../../popover'
|
||||
import NPopselectPanel from './PopselectPanel'
|
||||
import emptyFunction from '../../_utils/function/empty'
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user