mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(base-select-menu, base-selection): merge size style

Browse Source
This commit is contained in:
07akioni 2020-12-16 01:50:16 +08:00
parent 82aee03cb3
commit 1bf87789f2
6 changed files with 121 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/_base/select-menu/src/styles/index.js
View File

@ -1,15 +1,9 @@
import baseStyle from './themed-base.js'
import sizeStyle from './themed-size'
export default [
{
key: 'theme',
watch: ['theme'],
CNode: baseStyle
},
{
key: 'size',
watch: ['size', 'theme'],
CNode: sizeStyle
}
]

123
src/_base/select-menu/src/styles/themed-base.js
View File

@ -1,8 +1,12 @@
import { cTB, c, cB, cE, cM, cNotM } from '../../../../_utils/cssr'
import { cTB, c, cB, cE, cM, cNotM, createKey } from '../../../../_utils/cssr'
import { depx, pxfy } from 'seemly'
export default c([
({ props }) => {
const { cubicBezierEaseInOut } = props.$global
const {
$global: { cubicBezierEaseInOut },
$local
} = props
const {
borderRadius,
color,
@ -22,21 +26,54 @@ export default c([
'base-select-menu',
{
raw: `
outline: none;
margin-top: 4px;
margin-bottom: 4px;
z-index: 0;
position: relative;
border-radius: ${borderRadius};
transition:
background-color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut};
overflow: hidden;
background-color: ${color};
box-shadow: ${boxShadow};
`
outline: none;
margin-top: 4px;
margin-bottom: 4px;
z-index: 0;
position: relative;
border-radius: ${borderRadius};
transition:
background-color .3s ${cubicBezierEaseInOut},
box-shadow .3s ${cubicBezierEaseInOut};
overflow: hidden;
background-color: ${color};
box-shadow: ${boxShadow};
`
},
[
['small', 'medium', 'large'].map((size) => {
const {
[createKey('optionFontSize', size)]: fontSize,
[createKey('optionHeight', size)]: optionHeight,
[createKey('padding', size)]: padding
} = $local
const groupHeaderFontSize = pxfy(depx(fontSize) - 2)
const menuHeight = pxfy(depx(optionHeight) * 7.6)
return cM(
size + '-size',
{
padding
},
[
cB('scrollbar', {
maxHeight: menuHeight
}),
cB('virtual-list', {
maxHeight: menuHeight
}),
cB('base-select-option', {
height: optionHeight,
lineHeight: optionHeight,
fontSize: fontSize
}),
cB('base-select-group-header', {
height: optionHeight,
lineHeight: optionHeight,
fontSize: groupHeaderFontSize
})
]
)
}),
cB('base-select-menu-option-wrapper', {
position: 'relative',
width: '100%'
@ -61,20 +98,20 @@ export default c([
'base-select-option',
{
raw: `
cursor: pointer;
position: relative;
padding: 0 14px;
white-space: nowrap;
transition:
background-color .3s ${cubicBezierEaseInOut},
color .3s ${cubicBezierEaseInOut},
opacity .3s ${cubicBezierEaseInOut};
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
color: ${optionTextColor};
opacity: 1;
`
cursor: pointer;
position: relative;
padding: 0 14px;
white-space: nowrap;
transition:
background-color .3s ${cubicBezierEaseInOut},
color .3s ${cubicBezierEaseInOut},
opacity .3s ${cubicBezierEaseInOut};
text-overflow: ellipsis;
overflow: hidden;
box-sizing: border-box;
color: ${optionTextColor};
opacity: 1;
`
},
[
c('&:active', {
@ -121,20 +158,20 @@ export default c([
]),
c('&::after', {
raw: `
content: '';
height: 6px;
width: 3px;
position: absolute;
right: 14px;
transform: rotate(45deg) scale(.5);
top: calc(50% - 4px);
opacity: 0;
transition:
transform .3s ${cubicBezierEaseInOut},
opacity .3s ${cubicBezierEaseInOut};
border-right: 1px solid ${optionCheckColor};
border-bottom: 1px solid ${optionCheckColor};
`
content: '';
height: 6px;
width: 3px;
position: absolute;
right: 14px;
transform: rotate(45deg) scale(.5);
top: calc(50% - 4px);
opacity: 0;
transition:
transform .3s ${cubicBezierEaseInOut},
opacity .3s ${cubicBezierEaseInOut};
border-right: 1px solid ${optionCheckColor};
border-bottom: 1px solid ${optionCheckColor};
`
})
]
)

39
src/_base/select-menu/src/styles/themed-size.js
View File

@ -1,39 +0,0 @@
import { cTB, c, cB, cM, createKey } from '../../../../_utils/cssr'
import { depx, pxfy } from 'seemly'
export default c([
({ props }) => {
const size = props.$vm.size
const fontSize = props.$local[createKey('optionFontSize', size)]
const optionHeight = props.$local[createKey('optionHeight', size)]
const groupHeaderFontSize = pxfy(depx(fontSize) - 2)
const menuHeight = pxfy(depx(optionHeight) * 7.6)
const padding = props.$local[createKey('padding', size)]
return cTB('base-select-menu', [
cM(
size + '-size',
{
padding
},
[
cB('scrollbar', {
maxHeight: menuHeight
}),
cB('virtual-list', {
maxHeight: menuHeight
}),
cB('base-select-option', {
height: optionHeight,
lineHeight: optionHeight,
fontSize: fontSize
}),
cB('base-select-group-header', {
height: optionHeight,
lineHeight: optionHeight,
fontSize: groupHeaderFontSize
})
]
)
])
}
])

6
src/_base/selection/src/styles/index.js
View File

@ -1,15 +1,9 @@
import baseStyle from './themed-base.js'
import sizeStyle from './themed-size'
export default [
{
key: 'theme',
watch: ['theme'],
CNode: baseStyle
},
{
key: 'size',
watch: ['size', 'theme'],
CNode: sizeStyle
}
]

43
src/_base/selection/src/styles/themed-base.js
View File

@ -9,10 +9,14 @@ import {
createKey,
insideFormItem
} from '../../../../_utils/cssr'
import { formatLength } from '../../../../_utils'
export default c([
({ props }) => {
const { $local } = props
const {
$local,
$global: { cubicBezierEaseInOut }
} = props
const {
borderRadius,
color,
@ -32,7 +36,6 @@ export default c([
borderHover,
borderActive
} = $local
const { cubicBezierEaseInOut } = props.$global
return cTB(
'base-selection',
{
@ -48,6 +51,42 @@ export default c([
borderRadius
},
[
['small', 'medium', 'large'].map((size) => {
const {
[createKey('height', size)]: height,
[createKey('fontSize', size)]: fontSize
} = $local
return cM(
size + '-size',
{
minHeight: height,
lineHeight: height,
fontSize
},
[
cE('placeholder', {
height,
lineHeight: height
}),
cB('base-selection-label', {
height,
lineHeight: height
}),
cB(
'base-selection-tags',
{
minHeight: height
},
[
cB('base-selection-input-tag', {
height: formatLength(height, { c: 1, offset: -6 }),
lineHeight: formatLength(height, { c: 1, offset: -6 })
})
]
)
]
)
}),
cM('bordered', [
cE('border', {
border

45
src/_base/selection/src/styles/themed-size.js
View File

@ -1,45 +0,0 @@
import { cTB, c, cB, cE, cM, createKey } from '../../../../_utils/cssr'
import { formatLength } from '../../../../_utils'
export default c([
({ props }) => {
const {
$vm: { size },
$local
} = props
const height = $local[createKey('height', size)]
const fontSize = $local[createKey('fontSize', size)]
return cTB('base-selection', [
cM(
size + '-size',
{
minHeight: height,
lineHeight: height,
fontSize
},
[
cE('placeholder', {
height,
lineHeight: height
}),
cB('base-selection-label', {
height,
lineHeight: height
}),
cB(
'base-selection-tags',
{
minHeight: height
},
[
cB('base-selection-input-tag', {
height: formatLength(height, { c: 1, offset: -6 }),
lineHeight: formatLength(height, { c: 1, offset: -6 })
})
]
)
]
)
])
}
])