mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
refactor(list): new theme
This commit is contained in:
07akioni
parent
59f1729195
commit
14de3b82ae
@ -3,9 +3,9 @@
|
||||
class="n-list"
|
||||
:class="{
|
||||
'n-list--bordered': bordered,
|
||||
[`n-list--${size}-size`]: size,
|
||||
[`n-${mergedTheme}-theme`]: mergedTheme
|
||||
[`n-list--${size}-size`]: size
|
||||
}"
|
||||
:style="cssVars"
|
||||
>
|
||||
<div v-if="$slots.header" class="n-list__header">
|
||||
<slot name="header" />
|
||||
@ -18,13 +18,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { configurable, themeable, withCssr } from '../../_mixins'
|
||||
import styles from './styles'
|
||||
import { computed, defineComponent } from 'vue'
|
||||
import { useTheme } from '../../_mixins'
|
||||
import { listLight } from '../styles'
|
||||
import style from './styles/index.cssr.js'
|
||||
|
||||
export default {
|
||||
export default defineComponent({
|
||||
name: 'List',
|
||||
mixins: [configurable, themeable, withCssr(styles)],
|
||||
props: {
|
||||
...useTheme.props,
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium'
|
||||
@ -33,6 +35,33 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup (props) {
|
||||
const themeRef = useTheme('List', 'List', style, listLight, props)
|
||||
return {
|
||||
cssVars: computed(() => {
|
||||
const {
|
||||
common: { cubicBezierEaseInOut },
|
||||
self: {
|
||||
fontSize,
|
||||
textColor,
|
||||
color,
|
||||
colorModal,
|
||||
borderColor,
|
||||
borderRadius
|
||||
}
|
||||
} = themeRef.value
|
||||
return {
|
||||
'--font-size': fontSize,
|
||||
'--bezier': cubicBezierEaseInOut,
|
||||
'--text-color': textColor,
|
||||
'--color': color,
|
||||
'--border-radius': borderRadius,
|
||||
'--border-color': borderColor,
|
||||
'--color-modal': colorModal
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -13,7 +13,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ListItem'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
82
src/list/src/styles/index.cssr.js
Normal file
82
src/list/src/styles/index.cssr.js
Normal file
@ -0,0 +1,82 @@
|
||||
import { cB, c, cE, cM, insideModal } from '../../../_utils/cssr'
|
||||
|
||||
// vars:
|
||||
// --font-size
|
||||
// --bezier
|
||||
// --text-color
|
||||
// --color
|
||||
// --border-radius
|
||||
// --border-color
|
||||
// --color-modal
|
||||
export default c([
|
||||
cB('list', `
|
||||
font-size: var(--font-size);
|
||||
transition:
|
||||
background-color .3s var(--bezier),
|
||||
color .3s var(--bezier),
|
||||
border-color .3s var(--bezier);
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
color: var(--text-color);
|
||||
`, [
|
||||
cM('bordered', `
|
||||
background-color: var(--color);
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--border-color);
|
||||
`, [
|
||||
cB('list-item', `
|
||||
padding: 12px 20px;
|
||||
`, [
|
||||
c('&:not(:last-child)', `
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
`)
|
||||
]),
|
||||
cE('header, footer', `
|
||||
padding: 12px 20px;
|
||||
`, [
|
||||
c('&:not(:last-child)', `
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
`)
|
||||
])
|
||||
]),
|
||||
cE('header, footer', `
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .3s var(--bezier);
|
||||
`, [
|
||||
c('&:not(:last-child)', `
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
`)
|
||||
]),
|
||||
cB('list-item', `
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
transition: border-color .3s var(--bezier);
|
||||
`, [
|
||||
cE('prefix', `
|
||||
margin-right: 20px;
|
||||
flex: 0;
|
||||
`),
|
||||
cE('suffix', `
|
||||
margin-left: 20px;
|
||||
flex: 0;
|
||||
`),
|
||||
cE('main', `
|
||||
flex: 1;
|
||||
`),
|
||||
c('&:not(:last-child)', `
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
`)
|
||||
])
|
||||
]),
|
||||
insideModal(
|
||||
cB('list', [
|
||||
cM('bordered', `
|
||||
background-color: var(--color-modal);
|
||||
`)
|
||||
])
|
||||
)
|
||||
])
|
||||
@ -1,9 +0,0 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'mergedTheme',
|
||||
watch: ['mergedTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
@ -1,120 +0,0 @@
|
||||
import { cTB, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
$global: {
|
||||
cubicBezierEaseInOut
|
||||
},
|
||||
$local
|
||||
} = props
|
||||
const {
|
||||
fontSize,
|
||||
textColor,
|
||||
color,
|
||||
colorModal,
|
||||
borderColor,
|
||||
borderRadius
|
||||
} = $local
|
||||
return [
|
||||
cTB('list', {
|
||||
raw: `
|
||||
font-size: ${fontSize};
|
||||
transition:
|
||||
background-color .3s ${cubicBezierEaseInOut},
|
||||
color .3s ${cubicBezierEaseInOut},
|
||||
border-color .3s ${cubicBezierEaseInOut};
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
color: ${textColor};
|
||||
`
|
||||
}, [
|
||||
cM('bordered', {
|
||||
raw: `
|
||||
background-color: ${color};
|
||||
border-radius: ${borderRadius};
|
||||
border: 1px solid ${borderColor};
|
||||
`
|
||||
}, [
|
||||
cB('list-item', {
|
||||
raw: `
|
||||
padding: 12px 20px;
|
||||
`
|
||||
}, [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-bottom: 1px solid ${borderColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cE('header, footer', {
|
||||
raw: `
|
||||
padding: 12px 20px;
|
||||
`
|
||||
}, [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-bottom: 1px solid ${borderColor};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cE('header, footer', {
|
||||
raw: `
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
transition: border-color .3s ${cubicBezierEaseInOut};
|
||||
`
|
||||
}, [
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-bottom: 1px solid ${borderColor};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('list-item', {
|
||||
raw: `
|
||||
padding: 12px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
transition: border-color .3s ${cubicBezierEaseInOut};
|
||||
`
|
||||
}, [
|
||||
cE('prefix', {
|
||||
raw: `
|
||||
margin-right: 20px;
|
||||
flex: 0;
|
||||
`
|
||||
}),
|
||||
cE('suffix', {
|
||||
raw: `
|
||||
margin-left: 20px;
|
||||
flex: 0;
|
||||
`
|
||||
}),
|
||||
cE('main', {
|
||||
raw: `
|
||||
flex: 1;
|
||||
`
|
||||
}),
|
||||
c('&:not(:last-child)', {
|
||||
raw: `
|
||||
border-bottom: 1px solid ${borderColor};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
insideModal(
|
||||
cTB('list', [
|
||||
cM('bordered', {
|
||||
raw: `
|
||||
background-color: ${colorModal};
|
||||
`
|
||||
})
|
||||
])
|
||||
)
|
||||
]
|
||||
}
|
||||
])
|
||||
@ -1,11 +1,9 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { baseDark } from '../../_styles/base'
|
||||
import { commonDark } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'List',
|
||||
theme: 'dark',
|
||||
peer: [baseDark],
|
||||
getLocalVars (vars) {
|
||||
common: commonDark,
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2Overlay,
|
||||
cardColor,
|
||||
@ -23,4 +21,4 @@ export default create({
|
||||
fontSize
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import create from '../../_styles/utils/create-component-base'
|
||||
import { baseLight } from '../../_styles/base'
|
||||
import { commonLight } from '../../_styles/new-common'
|
||||
|
||||
export default create({
|
||||
export default {
|
||||
name: 'List',
|
||||
theme: 'light',
|
||||
peer: [baseLight],
|
||||
getLocalVars (vars) {
|
||||
common: commonLight,
|
||||
self (vars) {
|
||||
const {
|
||||
textColor2,
|
||||
cardColor,
|
||||
@ -23,4 +21,4 @@ export default create({
|
||||
fontSize
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@ export { baseDark, baseLight } from './_styles/base'
|
||||
// export { inputDark, inputLight } from './input/styles'
|
||||
// export { inputNumberDark, inputNumberLight } from './input-number/styles'
|
||||
// export { layoutDark, layoutLight } from './layout/styles'
|
||||
export { listDark, listLight } from './list/styles'
|
||||
// export { listDark, listLight } from './list/styles'
|
||||
export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
|
||||
export { logDark, logLight } from './log/styles'
|
||||
export { menuDark, menuLight } from './menu/styles'
|
||||
|
||||
@ -31,6 +31,7 @@ import { iconDark } from './icon/styles'
|
||||
import { inputDark } from './input/styles'
|
||||
import { inputNumberDark } from './input-number/styles'
|
||||
import { layoutDark } from './layout/styles'
|
||||
import { listDark } from './list/styles'
|
||||
|
||||
export const darkTheme = {
|
||||
common: commonDark,
|
||||
@ -65,5 +66,6 @@ export const darkTheme = {
|
||||
Icon: iconDark,
|
||||
Input: inputDark,
|
||||
InputNumber: inputNumberDark,
|
||||
Layout: layoutDark
|
||||
Layout: layoutDark,
|
||||
List: listDark
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user