mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-24 12:45:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(badge): color

Browse Source
This commit is contained in:
07akioni 2020-10-21 17:09:13 +08:00
parent 2d019f02fb
commit e33056c2e0
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/badge/src/Badge.vue
View File

@ -4,10 +4,13 @@
:class="{ :class="{
'n-badge--dot': dot, 'n-badge--dot': dot,
[`n-badge--${type}-type`]: true, [`n-badge--${type}-type`]: true,
[`n-badge--${color || type}-colored`]: true,
[`n-${mergedTheme}-theme`]: mergedTheme, [`n-${mergedTheme}-theme`]: mergedTheme,
[`n-badge--as-is`]: !$slots.default [`n-badge--as-is`]: !$slots.default
}" }"
:style="color ? {
'--color': color,
'--ripple-color': color
} : null"
> >
<slot /> <slot />
<transition <transition
@ -55,11 +58,11 @@ export default {
props: { props: {
value: { value: {
type: [String, Number], type: [String, Number],
default: null default: undefined
}, },
max: { max: {
type: Number, type: Number,
default: null default: undefined
}, },
dot: { dot: {
type: Boolean, type: Boolean,
@ -85,7 +88,7 @@ export default {
}, },
color: { color: {
type: String, type: String,
default: null default: undefined
} }
}, },
data () { data () {
@ -95,10 +98,10 @@ export default {
}, },
computed: { computed: {
number () { number () {
return (this.max === null || typeof value === 'string') ? this.value : (this.value > this.max ? `${this.max}+` : this.value) return (this.max === undefined || typeof value === 'string') ? this.value : (this.value > this.max ? `${this.max}+` : this.value)
}, },
showBadge () { showBadge () {
return this.show && (this.dot || (this.value !== null && !(!this.showZero && this.value <= 0))) return this.show && (this.dot || (this.value !== undefined && !(!this.showZero && this.value <= 0)))
} }
}, },
mounted () { mounted () {

6
src/badge/src/styles/themed-base.cssr.js
View File

@ -3,7 +3,7 @@ import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-
export default c([ export default c([
({ props }) => { ({ props }) => {
const base = props.$base const { cubicBezierEaseInOut } = props.$base
return cTB('badge', { return cTB('badge', {
display: 'inline-flex', display: 'inline-flex',
position: 'relative', position: 'relative',
@ -37,8 +37,8 @@ export default c([
cB('badge-sup', { cB('badge-sup', {
raw: ` raw: `
transition: transition:
background-color .3s ${base.cubicBezierEaseInOut}, background-color .3s ${cubicBezierEaseInOut},
color .3s ${base.cubicBezierEaseInOut}; color .3s ${cubicBezierEaseInOut};
color: #FFF; color: #FFF;
position: absolute; position: absolute;
height: 18px; height: 18px;

35
src/badge/src/styles/themed-color.cssr.js
View File

@ -1,15 +1,15 @@
import { c, cTB, cB, cM, createKey } from '../../../_utils/cssr' import { c, cTB, cB, cM, createKey } from '../../../_utils/cssr'
function createRippleAnimation (digest, color, theme) { function createRippleAnimation () {
return [ return [
c(`@keyframes ${theme && theme + '-'}${digest}-badge-wave-spread`, { c(`@keyframes badge-wave-spread`, {
from: { from: {
boxShadow: `0 0 0.5px 0px ${color}`, boxShadow: `0 0 0.5px 0px var(--ripple-color)`,
opacity: 0.6 opacity: 0.6
}, },
to: { to: {
// don't use exact 5px since chrome will display the animation with glitches // don't use exact 5px since chrome will display the animation with glitches
boxShadow: `0 0 0.5px 4.5px ${color}`, boxShadow: `0 0 0.5px 4.5px var(--ripple-color)`,
opacity: 0 opacity: 0
} }
}) })
@ -18,31 +18,26 @@ function createRippleAnimation (digest, color, theme) {
export default c([ export default c([
({ props }) => { ({ props }) => {
let digest const type = props.$instance.type
let color const color = props.$local[createKey('color', type)]
if (props.colorDigest) { const { cubicBezierEaseOut } = props.$base
digest = props.colorDigest
color = props.color
} else {
digest = props.$instance.type
color = props.$local[createKey('color', digest)]
}
const base = props.$base
const theme = props.$renderedTheme
return [ return [
createRippleAnimation(digest, color, theme), createRippleAnimation(),
cTB('badge', [ cTB('badge', [
cM(digest + '-colored', [ cM(type + '-type', {
'--color': color,
'--ripple-color': color
}, [
cB('badge-sup', { cB('badge-sup', {
background: color background: 'var(--color)'
}, [ }, [
cB('base-wave', { cB('base-wave', {
zIndex: 1, zIndex: 1,
animationDuration: '2s', animationDuration: '2s',
animationIterationCount: 'infinite', animationIterationCount: 'infinite',
animationDelay: '1s', animationDelay: '1s',
animationTimingFunction: `${base.cubicBezierEaseOut}`, animationTimingFunction: `${cubicBezierEaseOut}`,
animationName: `${theme && theme + '-'}${digest}-badge-wave-spread` animationName: 'badge-wave-spread'
}) })
]) ])
]) ])