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

refactor(descriptions): ts

Browse Source
This commit is contained in:
07akioni 2021-01-16 02:29:36 +08:00
parent b9b273b1ca
commit f2746ab3da
16 changed files with 308 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/_mixins/index.ts
View File

@ -1,6 +1,6 @@
export { default as useFormItem } from './use-form-item'
export { default as useTheme } from './use-theme'
export type { ThemeProps, MergedTheme } from './use-theme'
export type { ThemeProps, MergedTheme, ThemePropsReactive } from './use-theme'
export { default as useConfig } from './use-config'
export { default as useLocale } from './use-locale'
export { default as useStyle } from './use-style'

6
src/_mixins/use-theme.ts
View File

@ -136,6 +136,12 @@ export type ThemeProps<T> = {
}
}
export type ThemePropsReactive<T> = {
unstableTheme: T
unstableThemeOverrides: Record<string, any>
builtinThemeOverrides: Record<string, any>
}
/**
* props.unstableTheme:
* { common, self(), peers }

7
src/_utils/vue/omit.ts
View File

@ -1,8 +1,9 @@
export function omit <T, K extends keyof T, R> (
export function omit<T, K extends keyof T, R> (
object: T,
keys: K[] = [],
rest: R
): Pick<T, Exclude<keyof T, K>> & R {
rest?: R
// eslint-disable-next-line @typescript-eslint/ban-types
): Pick<T, Exclude<keyof T, K>> & (R extends undefined ? {} : R) {
const omitedObject: any = {}
const originalKeys = Object.getOwnPropertyNames(object)
originalKeys.forEach((originalKey) => {

0
src/descriptions/index.js → src/descriptions/index.ts
View File

43
src/descriptions/src/Descriptions.js → src/descriptions/src/Descriptions.ts
View File

@ -1,15 +1,17 @@
import { computed, h, defineComponent } from 'vue'
import { useTheme } from '../../_mixins'
import style from './styles/index.cssr.js'
import { warn, getSlot, getVNodeChildren, createKey } from '../../_utils'
import { computed, h, defineComponent, PropType, VNode } from 'vue'
import { useCompitable } from 'vooks'
import { isDescriptionsItem } from './utils'
import { useTheme } from '../../_mixins'
import type { ThemeProps } from '../../_mixins'
import { warn, getSlot, getVNodeChildren, createKey } from '../../_utils'
import { descriptionsLight } from '../styles'
import type { DescriptionsTheme } from '../styles'
import { isDescriptionsItem } from './utils'
import style from './styles/index.cssr'
export default defineComponent({
name: 'Descriptions',
props: {
...useTheme.props,
...(useTheme.props as ThemeProps<DescriptionsTheme>),
title: {
type: String,
default: undefined
@ -23,22 +25,16 @@ export default defineComponent({
default: undefined
},
labelPlacement: {
default: 'top',
validator (value) {
return ['left', 'top'].includes(value)
}
type: String as PropType<'left' | 'top'>,
default: 'top'
},
labelAlign: {
default: 'left',
validator (value) {
return ['left', 'right', 'center'].includes(value)
}
type: String as PropType<'left' | 'right' | 'center'>,
default: 'left'
},
size: {
default: 'medium',
validator (value) {
return ['small', 'medium', 'large'].includes(value)
}
type: String as PropType<'small' | 'medium' | 'large'>,
default: 'medium'
},
bordered: {
type: Boolean,
@ -117,7 +113,7 @@ export default defineComponent({
'`n-descriptions` only takes `n-descriptions-item` as children.'
)
}
children = children.reduce(
const itemState = children.reduce(
(state, vNode, index) => {
const props = vNode.props || {}
const isLastIteration = children.length - 1 === index
@ -224,9 +220,14 @@ export default defineComponent({
row: [],
secondRow: [],
rows: []
} as {
span: number
row: VNode[]
secondRow: VNode[]
rows: VNode[][]
}
)
children = children.rows.map((row) =>
const rows = itemState.rows.map((row) =>
h(
'tr',
{
@ -270,7 +271,7 @@ export default defineComponent({
{
class: 'n-descriptions-table'
},
[h('tbody', null, children)]
[h('tbody', null, rows)]
)
]
)

0
src/descriptions/src/DescriptionsItem.js → src/descriptions/src/DescriptionsItem.ts
View File

175
src/descriptions/src/styles/index.cssr.js
View File

@ -1,175 +0,0 @@
import { c, cB, cE, cM, cNotM, insideModal } from '../../../_utils/cssr'
// vars:
// --th-padding
// --td-padding
// --font-size
// --bezier
// --th-font-weight
// --line-height
// --th-text-color
// --td-text-color
// --th-color
// --td-color
// --td-color-modal
// --border-radius
// --border-color
export default c([
cB('descriptions', {
fontSize: 'var(--font-size)'
}, [
cB('descriptions-table-wrapper', [
cB('descriptions-table', [
cB('descriptions-table-row', [
cB('descriptions-table-header', {
padding: 'var(--th-padding)'
}),
cB('descriptions-table-content', {
padding: 'var(--td-padding)'
})
])
])
]),
cNotM('bordered', [
cB('descriptions-table-wrapper', [
cB('descriptions-table', [
cB('descriptions-table-row', [
c('&:last-child', [
cB('descriptions-table-content', {
paddingBottom: 0
})
])
])
])
])
]),
cM('left-label-placement', [
cB('descriptions-table-content', [
c('> *', {
verticalAlign: 'top'
})
])
]),
cM('left-label-align', [
c('th', {
textAlign: 'left'
})
]),
cM('center-label-align', [
c('th', {
textAlign: 'center'
})
]),
cM('right-label-align', [
c('th', {
textAlign: 'right'
})
]),
cM('bordered', [
cB('descriptions-table-wrapper', `
border-radius: var(--border-radius);
overflow: hidden;
background: var(--td-color);
border: 1px solid var(--border-color);
`, [
cB('descriptions-table', [
cB('descriptions-table-row', [
c('&:not(:last-child)', [
cB('descriptions-table-content', {
borderBottom: '1px solid var(--border-color)'
}),
cB('descriptions-table-header', {
borderBottom: '1px solid var(--border-color)'
})
]),
cB('descriptions-table-header', {
fontWeight: 400,
backgroundClip: 'padding-box',
backgroundColor: 'var(--th-color)'
}, [
c('&:not(:last-child)', {
borderRight: '1px solid var(--border-color)'
})
]),
cB('descriptions-table-content', [
c('&:not(:last-child)', {
borderRight: '1px solid var(--border-color)'
})
])
])
])
])
]),
cB('descriptions-header', `
font-weight: var(--th-font-weight);
font-size: 18px;
transition: color .3s var(--bezier);
line-height: var(--line-height);
margin-bottom: 8px;
color: var(--th-text-color);
`),
cB('descriptions-table-wrapper', `
transition:
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`, [
cB('descriptions-table', `
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
`, [
cB('descriptions-table-row', `
box-sizing: border-box;
transition: border-color .3s var(--bezier);
`, [
cB('descriptions-table-header', `
font-weight: var(--th-font-weight);
line-height: var(--line-height);
display: table-cell;
box-sizing: border-box;
color: var(--th-text-color);
transition:
color .3s var(--bezier),
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`),
cB('descriptions-table-content', `
vertical-align: top;
line-height: var(--line-height);
display: table-cell;
box-sizing: border-box;
color: var(--td-text-color);
transition:
color .3s var(--bezier),
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`, [
cE('content', `
transition: color .3s var(--bezier);
display: inline-block;
color: var(--td-text-color);
`)
]),
cE('label', `
font-weight: var(--th-font-weight);
transition: color .3s var(--bezier);
display: inline-block;
margin-right: 14px;
color: var(--th-text-color);
`)
])
])
])
]
),
insideModal(
cB('descriptions', [
cM('bordered', [
cB('descriptions-table-wrapper', {
background: 'var(--td-color-modal)'
})
])
])
)
])

214
src/descriptions/src/styles/index.cssr.ts Normal file
View File

@ -0,0 +1,214 @@
import { c, cB, cE, cM, cNotM, insideModal } from '../../../_utils/cssr'
// vars:
// --th-padding
// --td-padding
// --font-size
// --bezier
// --th-font-weight
// --line-height
// --th-text-color
// --td-text-color
// --th-color
// --td-color
// --td-color-modal
// --border-radius
// --border-color
export default c([
cB(
'descriptions',
{
fontSize: 'var(--font-size)'
},
[
cB('descriptions-table-wrapper', [
cB('descriptions-table', [
cB('descriptions-table-row', [
cB('descriptions-table-header', {
padding: 'var(--th-padding)'
}),
cB('descriptions-table-content', {
padding: 'var(--td-padding)'
})
])
])
]),
cNotM('bordered', [
cB('descriptions-table-wrapper', [
cB('descriptions-table', [
cB('descriptions-table-row', [
c('&:last-child', [
cB('descriptions-table-content', {
paddingBottom: 0
})
])
])
])
])
]),
cM('left-label-placement', [
cB('descriptions-table-content', [
c('> *', {
verticalAlign: 'top'
})
])
]),
cM('left-label-align', [
c('th', {
textAlign: 'left'
})
]),
cM('center-label-align', [
c('th', {
textAlign: 'center'
})
]),
cM('right-label-align', [
c('th', {
textAlign: 'right'
})
]),
cM('bordered', [
cB(
'descriptions-table-wrapper',
`
border-radius: var(--border-radius);
overflow: hidden;
background: var(--td-color);
border: 1px solid var(--border-color);
`,
[
cB('descriptions-table', [
cB('descriptions-table-row', [
c('&:not(:last-child)', [
cB('descriptions-table-content', {
borderBottom: '1px solid var(--border-color)'
}),
cB('descriptions-table-header', {
borderBottom: '1px solid var(--border-color)'
})
]),
cB(
'descriptions-table-header',
{
fontWeight: 400,
backgroundClip: 'padding-box',
backgroundColor: 'var(--th-color)'
},
[
c('&:not(:last-child)', {
borderRight: '1px solid var(--border-color)'
})
]
),
cB('descriptions-table-content', [
c('&:not(:last-child)', {
borderRight: '1px solid var(--border-color)'
})
])
])
])
]
)
]),
cB(
'descriptions-header',
`
font-weight: var(--th-font-weight);
font-size: 18px;
transition: color .3s var(--bezier);
line-height: var(--line-height);
margin-bottom: 8px;
color: var(--th-text-color);
`
),
cB(
'descriptions-table-wrapper',
`
transition:
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`,
[
cB(
'descriptions-table',
`
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-sizing: border-box;
`,
[
cB(
'descriptions-table-row',
`
box-sizing: border-box;
transition: border-color .3s var(--bezier);
`,
[
cB(
'descriptions-table-header',
`
font-weight: var(--th-font-weight);
line-height: var(--line-height);
display: table-cell;
box-sizing: border-box;
color: var(--th-text-color);
transition:
color .3s var(--bezier),
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`
),
cB(
'descriptions-table-content',
`
vertical-align: top;
line-height: var(--line-height);
display: table-cell;
box-sizing: border-box;
color: var(--td-text-color);
transition:
color .3s var(--bezier),
background-color .3s var(--bezier),
border-color .3s var(--bezier);
`,
[
cE(
'content',
`
transition: color .3s var(--bezier);
display: inline-block;
color: var(--td-text-color);
`
)
]
),
cE(
'label',
`
font-weight: var(--th-font-weight);
transition: color .3s var(--bezier);
display: inline-block;
margin-right: 14px;
color: var(--th-text-color);
`
)
]
)
]
)
]
)
]
),
insideModal(
cB('descriptions', [
cM('bordered', [
cB('descriptions-table-wrapper', {
background: 'var(--td-color-modal)'
})
])
])
)
])

5
src/descriptions/src/utils.js
View File

@ -1,5 +0,0 @@
export const DESCRIPTION_ITEM_FLAG = Symbol('DESCRIPTION_ITEM_FLAG')
export function isDescriptionsItem (vNode) {
return vNode.type && vNode.type[DESCRIPTION_ITEM_FLAG]
}

7
src/descriptions/src/utils.ts Normal file
View File

@ -0,0 +1,7 @@
import { VNode } from 'vue'
export const DESCRIPTION_ITEM_FLAG = Symbol('DESCRIPTION_ITEM_FLAG')
export function isDescriptionsItem (vNode: VNode): boolean {
return vNode.type && (vNode.type as any)[DESCRIPTION_ITEM_FLAG]
}

0
src/descriptions/styles/_common.js → src/descriptions/styles/_common.ts
View File

5
src/descriptions/styles/dark.js → src/descriptions/styles/dark.ts
View File

@ -1,7 +1,8 @@
import commonVariables from './_common'
import { commonDark } from '../../_styles/new-common'
import type { DescriptionsTheme } from './light'
export default {
const descriptionsDark: DescriptionsTheme = {
name: 'Descriptions',
common: commonDark,
self (vars) {
@ -36,3 +37,5 @@ export default {
}
}
}
export default descriptionsDark

2
src/descriptions/styles/index.js
View File

@ -1,2 +0,0 @@
export { default as descriptionsDark } from './dark.js'
export { default as descriptionsLight } from './light.js'

3
src/descriptions/styles/index.ts Normal file
View File

@ -0,0 +1,3 @@
export { default as descriptionsDark } from './dark'
export { default as descriptionsLight } from './light'
export type { DescriptionsTheme, DescriptionsThemeVars } from './light'

39
src/descriptions/styles/light.js
View File

@ -1,39 +0,0 @@
import { composite } from 'seemly'
import commonVariables from './_common'
import { commonLight } from '../../_styles/new-common'
export default {
name: 'Descriptions',
common: commonLight,
self (vars) {
const {
tableHeaderColorOverlay,
textColor1Overlay,
textColor2Overlay,
cardColor,
modalColor,
dividerColorOverlay,
borderRadius,
fontWeightStrong,
lineHeight,
fontSizeSmall,
fontSizeMedium,
fontSizeLarge
} = vars
return {
...commonVariables,
lineHeight,
fontSizeSmall,
fontSizeMedium,
fontSizeLarge,
thColor: composite(cardColor, tableHeaderColorOverlay),
thTextColor: textColor1Overlay,
thFontWeight: fontWeightStrong,
tdTextColor: textColor2Overlay,
tdColor: cardColor,
tdColorModal: modalColor,
borderColor: dividerColorOverlay,
borderRadius: borderRadius
}
}
}

47
src/descriptions/styles/light.ts Normal file
View File

@ -0,0 +1,47 @@
import { composite } from 'seemly'
import commonVariables from './_common'
import { commonLight, ThemeCommonVars } from '../../_styles/new-common'
import { Theme } from '../../_mixins/use-theme'
const self = (vars: ThemeCommonVars) => {
const {
tableHeaderColorOverlay,
textColor1Overlay,
textColor2Overlay,
cardColor,
modalColor,
dividerColorOverlay,
borderRadius,
fontWeightStrong,
lineHeight,
fontSizeSmall,
fontSizeMedium,
fontSizeLarge
} = vars
return {
...commonVariables,
lineHeight,
fontSizeSmall,
fontSizeMedium,
fontSizeLarge,
thColor: composite(cardColor, tableHeaderColorOverlay),
thTextColor: textColor1Overlay,
thFontWeight: fontWeightStrong,
tdTextColor: textColor2Overlay,
tdColor: cardColor,
tdColorModal: modalColor,
borderColor: dividerColorOverlay,
borderRadius: borderRadius
}
}
export type DescriptionsThemeVars = ReturnType<typeof self>
const descriptionsLight: Theme<DescriptionsThemeVars> = {
name: 'Descriptions',
common: commonLight,
self
}
export default descriptionsLight
export type DescriptionsTheme = typeof descriptionsLight