diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index cb59099da0e..122cd33f395 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -4,6 +4,7 @@ ### Feats +- `n-card` uses `n` as CSS vars prefix. - `n-rate` uses `n` as CSS vars prefix. - `n-radio` uses `n` as CSS vars prefix. - `n-progress` uses `n` as CSS vars prefix. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d9fa1288f65..ebb6c8847ea 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -4,6 +4,7 @@ ### Feats +- `n-card` 的 CSS 变量使用 `n` 作为前缀 - `n-rate` 的 CSS 变量使用 `n` 作为前缀 - `n-radio` 的 CSS 变量使用 `n` 作为前缀 - `n-progress` 的 CSS 变量使用 `n` 作为前缀 diff --git a/src/card/src/Card.tsx b/src/card/src/Card.tsx index d08aa6e59c4..9845f5bb6c0 100644 --- a/src/card/src/Card.tsx +++ b/src/card/src/Card.tsx @@ -118,29 +118,29 @@ export default defineComponent({ bottom: paddingBottom } = getPadding(padding) return { - '--bezier': cubicBezierEaseInOut, - '--border-radius': borderRadius, - '--color': props.embedded ? colorEmbedded : color, - '--color-modal': colorModal, - '--color-popover': colorPopover, - '--color-target': colorTarget, - '--text-color': textColor, - '--line-height': lineHeight, - '--action-color': actionColor, - '--title-text-color': titleTextColor, - '--title-font-weight': titleFontWeight, - '--close-color': closeColor, - '--close-color-hover': closeColorHover, - '--close-color-pressed': closeColorPressed, - '--border-color': borderColor, - '--box-shadow': boxShadow, + '--n-bezier': cubicBezierEaseInOut, + '--n-border-radius': borderRadius, + '--n-color': props.embedded ? colorEmbedded : color, + '--n-color-modal': colorModal, + '--n-color-popover': colorPopover, + '--n-color-target': colorTarget, + '--n-text-color': textColor, + '--n-line-height': lineHeight, + '--n-action-color': actionColor, + '--n-title-text-color': titleTextColor, + '--n-title-font-weight': titleFontWeight, + '--n-close-color': closeColor, + '--n-close-color-hover': closeColorHover, + '--n-close-color-pressed': closeColorPressed, + '--n-border-color': borderColor, + '--n-box-shadow': boxShadow, // size - '--padding-top': paddingTop, - '--padding-bottom': paddingBottom, - '--padding-left': paddingLeft, - '--font-size': fontSize, - '--title-font-size': titleFontSize, - '--close-size': closeSize + '--n-padding-top': paddingTop, + '--n-padding-bottom': paddingBottom, + '--n-padding-left': paddingLeft, + '--n-font-size': fontSize, + '--n-title-font-size': titleFontSize, + '--n-close-size': closeSize } }) } diff --git a/src/card/src/styles/index.cssr.ts b/src/card/src/styles/index.cssr.ts index b0f8bdb75d6..80783598760 100644 --- a/src/card/src/styles/index.cssr.ts +++ b/src/card/src/styles/index.cssr.ts @@ -1,75 +1,75 @@ import { asModal, c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr' // vars: -// --bezier -// --border-radius -// --color -// --color-modal -// --color-popover -// --text-color -// --line-height -// --padding-top -// --padding-bottom -// --padding-left -// --font-size -// --action-color -// --title-font-weight -// --title-font-size -// --title-text-color -// --close-color -// --close-color-hover -// --close-color-pressed -// --border-color -// --close-size -// --box-shadow +// --n-bezier +// --n-border-radius +// --n-color +// --n-color-modal +// --n-color-popover +// --n-text-color +// --n-line-height +// --n-padding-top +// --n-padding-bottom +// --n-padding-left +// --n-font-size +// --n-action-color +// --n-title-font-weight +// --n-title-font-size +// --n-title-text-color +// --n-close-color +// --n-close-color-hover +// --n-close-color-pressed +// --n-border-color +// --n-close-size +// --n-box-shadow export default c([ cB('card', ` - font-size: var(--font-size); - line-height: var(--line-height); + font-size: var(--n-font-size); + line-height: var(--n-line-height); display: flex; flex-direction: column; width: 100%; box-sizing: border-box; position: relative; - border-radius: var(--border-radius); - background-color: var(--color); - color: var(--text-color); + border-radius: var(--n-border-radius); + background-color: var(--n-color); + color: var(--n-text-color); transition: - color .3s var(--bezier), - background-color .3s var(--bezier), - box-shadow .3s var(--bezier), - border-color .3s var(--bezier); + color .3s var(--n-bezier), + background-color .3s var(--n-bezier), + box-shadow .3s var(--n-bezier), + border-color .3s var(--n-bezier); `, [ cM('hoverable', [ - c('&:hover', 'box-shadow: var(--box-shadow);') + c('&:hover', 'box-shadow: var(--n-box-shadow);') ]), cM('content-segmented', [ c('>', [ cE('content', { - paddingTop: 'var(--padding-bottom)' + paddingTop: 'var(--n-padding-bottom)' }) ]) ]), cM('content-soft-segmented', [ c('>', [ cE('content', ` - margin: 0 var(--padding-left); - padding: var(--padding-bottom) 0; + margin: 0 var(--n-padding-left); + padding: var(--n-padding-bottom) 0; `) ]) ]), cM('footer-segmented', [ c('>', [ cE('footer', { - paddingTop: 'var(--padding-bottom)' + paddingTop: 'var(--n-padding-bottom)' }) ]) ]), cM('footer-soft-segmented', [ c('>', [ cE('footer', ` - padding: var(--padding-bottom) 0; - margin: 0 var(--padding-left); + padding: var(--n-padding-bottom) 0; + margin: 0 var(--n-padding-left); `) ]) ]), @@ -78,59 +78,59 @@ export default c([ box-sizing: border-box; display: flex; align-items: center; - font-size: var(--title-font-size); + font-size: var(--n-title-font-size); padding: - var(--padding-top) - var(--padding-left) - var(--padding-bottom) - var(--padding-left); + var(--n-padding-top) + var(--n-padding-left) + var(--n-padding-bottom) + var(--n-padding-left); `, [ cE('main', ` - font-weight: var(--title-font-weight); - transition: color .3s var(--bezier); + font-weight: var(--n-title-font-weight); + transition: color .3s var(--n-bezier); flex: 1; - color: var(--title-text-color); + color: var(--n-title-text-color); `), cE('extra', ` display: flex; align-items: center; - font-size: var(--font-size); + font-size: var(--n-font-size); font-weight: 400; - transition: color .3s var(--bezier); - color: var(--text-color); + transition: color .3s var(--n-bezier); + color: var(--n-text-color); `), cE('close', ` - font-size: var(--close-size); - transition: color .3s var(--bezier); + font-size: var(--n-close-size); + transition: color .3s var(--n-bezier); `) ]), cE('action', ` box-sizing: border-box; transition: - background-color .3s var(--bezier), - border-color .3s var(--bezier); + background-color .3s var(--n-bezier), + border-color .3s var(--n-bezier); background-clip: padding-box; - background-color: var(--action-color); + background-color: var(--n-action-color); `), cE('content', 'flex: 1;'), cE('content, footer', ` box-sizing: border-box; - padding: 0 var(--padding-left) var(--padding-bottom) var(--padding-left); - font-size: var(--font-size); + padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); + font-size: var(--n-font-size); `, [ c('&:first-child', { - paddingTop: 'var(--padding-bottom)' + paddingTop: 'var(--n-padding-bottom)' }) ]), cE('action', ` - background-color: var(--action-color); - padding: var(--padding-bottom) var(--padding-left); + background-color: var(--n-action-color); + padding: var(--n-padding-bottom) var(--n-padding-left); `) ]), cB('card-cover', ` overflow: hidden; width: 100%; - border-radius: var(--border-radius) var(--border-radius) 0 0; + border-radius: var(--n-border-radius) var(--n-border-radius) 0 0; `, [ c('img', ` display: block; @@ -138,15 +138,15 @@ export default c([ `) ]), cM('bordered', ` - border: 1px solid var(--border-color); + border: 1px solid var(--n-border-color); `, [ - c('&:target', 'border-color: var(--color-target);') + c('&:target', 'border-color: var(--n-color-target);') ]), cM('action-segmented', [ c('>', [ cE('action', [ c('&:not(:first-child)', { - borderTop: '1px solid var(--border-color)' + borderTop: '1px solid var(--n-border-color)' }) ]) ]) @@ -154,10 +154,10 @@ export default c([ cM('content-segmented, content-soft-segmented', [ c('>', [ cE('content', { - transition: 'border-color 0.3s var(--bezier)' + transition: 'border-color 0.3s var(--n-bezier)' }, [ c('&:not(:first-child)', { - borderTop: '1px solid var(--border-color)' + borderTop: '1px solid var(--n-border-color)' }) ]) ]) @@ -165,24 +165,24 @@ export default c([ cM('footer-segmented, footer-soft-segmented', [ c('>', [ cE('footer', { - transition: 'border-color 0.3s var(--bezier)' + transition: 'border-color 0.3s var(--n-bezier)' }, [ c('&:not(:first-child)', { - borderTop: '1px solid var(--border-color)' + borderTop: '1px solid var(--n-border-color)' }) ]) ]) ]) ]), insideModal(cB('card', { - background: 'var(--color-modal)' + background: 'var(--n-color-modal)' })), insidePopover(cB('card', { - background: 'var(--color-popover)' + background: 'var(--n-color-popover)' })), cB('card', [ asModal({ - background: 'var(--color-modal)' + background: 'var(--n-color-modal)' }) ]) ]) diff --git a/src/card/tests/Card.spec.ts b/src/card/tests/Card.spec.ts index e0a61202b8c..4d8267b854a 100644 --- a/src/card/tests/Card.spec.ts +++ b/src/card/tests/Card.spec.ts @@ -33,6 +33,18 @@ describe('n-card', () => { expect(wrapper.find('.n-card').classes()).toContain('n-card--hoverable') }) + it('should work with `embedded` prop', async () => { + const wrapper = mount(NCard) + + expect(wrapper.find('.n-card').attributes('style')).toContain( + '--n-color: #fff' + ) + await wrapper.setProps({ embedded: true }) + expect(wrapper.find('.n-card').attributes('style')).toContain( + '--n-color: rgb(250, 250, 252)' + ) + }) + it('should work with `slots` ', async () => { const wrapper = mount(NCard, { slots: { diff --git a/src/card/tests/__snapshots__/Card.spec.ts.snap b/src/card/tests/__snapshots__/Card.spec.ts.snap index 62461cfa678..8cffc9346c0 100644 --- a/src/card/tests/__snapshots__/Card.spec.ts.snap +++ b/src/card/tests/__snapshots__/Card.spec.ts.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`n-card should work with \`size\` prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --border-radius: 3px; --color: #fff; --color-modal: #fff; --color-popover: #fff; --color-target: #18a058; --text-color: rgb(51, 54, 57); --line-height: 1.6; --action-color: rgb(250, 250, 252); --title-text-color: rgb(31, 34, 37); --title-font-weight: 500; --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --border-color: rgb(239, 239, 245); --box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --padding-top: 12px; --padding-bottom: 12px; --padding-left: 16px; --font-size: 14px; --title-font-size: 16px; --close-size: 18px;"`; +exports[`n-card should work with \`size\` prop 1`] = `"--n-bezier: cubic-bezier(.4, 0, .2, 1); --n-border-radius: 3px; --n-color: #fff; --n-color-modal: #fff; --n-color-popover: #fff; --n-color-target: #18a058; --n-text-color: rgb(51, 54, 57); --n-line-height: 1.6; --n-action-color: rgb(250, 250, 252); --n-title-text-color: rgb(31, 34, 37); --n-title-font-weight: 500; --n-close-color: rgba(122, 122, 122, 1); --n-close-color-hover: rgba(89, 89, 89, 1); --n-close-color-pressed: rgba(149, 149, 149, 1); --n-border-color: rgb(239, 239, 245); --n-box-shadow: 0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04); --n-padding-top: 12px; --n-padding-bottom: 12px; --n-padding-left: 16px; --n-font-size: 14px; --n-title-font-size: 16px; --n-close-size: 18px;"`;