mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-04-06 14:30:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(data-table): adds thColorSorting, thColorSortingModal, thColorSortingPopover, tdColorSorting, tdColorSortingModal and tdColorSortingPopover theme variables, closes #6118, #6120

Browse Source
This commit is contained in:
07akioni 2024-07-10 00:23:07 +08:00
parent 68e500b259
commit 9836838fe9
7 changed files with 53 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.en-US.md
View File

@ -16,6 +16,7 @@
- `n-input-number` adds `round` prop, closes [#6097](https://github.com/tusen-ai/naive-ui/issues/6097).
- `n-color-picker` add `on-clear` props.
- `n-upload`'s `on-preview` prop adds `detail.event` parameter, closes [#6036](https://github.com/tusen-ai/naive-ui/issues/6036).
- `n-data-table` adds `thColorSorting`, `thColorSortingModal`, `thColorSortingPopover`, `tdColorSorting`, `tdColorSortingModal` and `tdColorSortingPopover` theme variables, closes [#6118](https://github.com/tusen-ai/naive-ui/issues/6118), [#6120](https://github.com/tusen-ai/naive-ui/issues/6120)
## 2.38.2

1
CHANGELOG.zh-CN.md
View File

@ -16,6 +16,7 @@
- `n-input-number` 新增 `round` 属性，关闭 [#6097](https://github.com/tusen-ai/naive-ui/issues/6097)
- `n-color-picker` 新增 `on-clear` 属性
- `n-upload` 的 `on-preview` 属性新增 `detail.event` 参数，关闭 [#6036](https://github.com/tusen-ai/naive-ui/issues/6036)
- `n-data-table` 新增 `thColorSorting`、`thColorSortingModal`、`thColorSortingPopover`、`tdColorSorting`、`tdColorSortingModal` 和 `tdColorSortingPopover` 主题变量，关闭 [#6118](https://github.com/tusen-ai/naive-ui/issues/6118)、 [#6120](https://github.com/tusen-ai/naive-ui/issues/6120)
## 2.38.2

14
src/data-table/src/DataTable.tsx
View File

@ -307,6 +307,12 @@ export default defineComponent({
self: {
borderColor,
tdColorHover,
tdColorSorting,
tdColorSortingModal,
tdColorSortingPopover,
thColorSorting,
thColorSortingModal,
thColorSortingPopover,
thColor,
thColorHover,
tdColor,
@ -388,7 +394,13 @@ export default defineComponent({
'--n-opacity-loading': opacityLoading,
'--n-td-color-striped': tdColorStriped,
'--n-td-color-striped-modal': tdColorStripedModal,
'--n-td-color-striped-popover': tdColorStripedPopover
'--n-td-color-striped-popover': tdColorStripedPopover,
'n-td-color-sorting': tdColorSorting,
'n-td-color-sorting-modal': tdColorSortingModal,
'n-td-color-sorting-popover': tdColorSortingPopover,
'n-th-color-sorting': thColorSorting,
'n-th-color-sorting-modal': thColorSortingModal,
'n-th-color-sorting-popover': thColorSortingPopover
}
})
const themeClassHandle = inlineThemeDisabled

7
src/data-table/src/TableParts/Body.tsx
View File

@ -824,12 +824,13 @@ export default defineComponent({
resolvedCellProps?.class,
isSummary &&
`${mergedClsPrefix}-data-table-td--summary`,
((hoverKey !== null &&
hoverKey !== null &&
cordKey[displayedRowIndex][colIndex].includes(
hoverKey
)) ||
isColumnSorting(column, mergedSortState)) &&
) &&
`${mergedClsPrefix}-data-table-td--hover`,
isColumnSorting(column, mergedSortState) &&
`${mergedClsPrefix}-data-table-td--sorting`,
column.fixed &&
`${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
column.align &&

2
src/data-table/src/TableParts/Header.tsx
View File

@ -284,7 +284,7 @@ export default defineComponent({
leftFixed ? 'left' : 'right'
}`,
{
[`${mergedClsPrefix}-data-table-th--hover`]:
[`${mergedClsPrefix}-data-table-th--sorting`]:
isColumnSorting(column, mergedSortState),
[`${mergedClsPrefix}-data-table-th--filterable`]:
isColumnFilterable(column),

19
src/data-table/src/styles/index.cssr.ts
View File

@ -17,16 +17,22 @@ const fixedColumnStyle = createFixedColumnStyle()
// --n-border-color-popover
// --n-th-color
// --n-th-color-hover
// --n-th-color-sorting
// --n-th-color-modal
// --n-th-color-hover-modal
// --n-th-color-sorting-modal
// --n-th-color-popover
// --n-th-color-hover-popover
// --n-th-color-sorting-popover
// --n-td-color
// --n-td-color-hover
// --n-td-color-sorting
// --n-td-color-modal
// --n-td-color-hover-modal
// --n-td-color-sorting-modal
// --n-td-color-popover
// --n-td-color-hover-popover
// --n-td-color-sorting-popover
// --n-th-text-color
// --n-td-text-color
// --n-th-font-weight
@ -60,8 +66,9 @@ export default c([
--n-merged-th-color: var(--n-th-color);
--n-merged-td-color: var(--n-td-color);
--n-merged-border-color: var(--n-border-color);
--n-merged-th-color-hover: var(--n-th-color-hover);
--n-merged-th-color-sorting: var(--n-th-color-sorting);
--n-merged-td-color-hover: var(--n-td-color-hover);
--n-merged-td-color-sorting: var(--n-td-color-sorting);
--n-merged-td-color-striped: var(--n-td-color-striped);
`, [
cB('data-table-wrapper', `
@ -251,6 +258,9 @@ export default c([
cM('hover', `
background-color: var(--n-merged-th-color-hover);
`),
cM('sorting', `
background-color: var(--n-merged-th-color-sorting);
`),
cM('sortable', `
cursor: pointer;
`, [
@ -385,6 +395,9 @@ export default c([
cM('hover', `
background-color: var(--n-merged-td-color-hover);
`),
cM('sorting', `
background-color: var(--n-merged-td-color-sorting);
`),
cE('ellipsis', `
display: inline-block;
text-overflow: ellipsis;
@ -559,6 +572,8 @@ export default c([
--n-merged-border-color: var(--n-border-color-modal);
--n-merged-th-color-hover: var(--n-th-color-hover-modal);
--n-merged-td-color-hover: var(--n-td-color-hover-modal);
--n-merged-th-color-sorting: var(--n-th-color-hover-modal);
--n-merged-td-color-sorting: var(--n-td-color-hover-modal);
--n-merged-td-color-striped: var(--n-td-color-striped-modal);
`)),
insidePopover(cB('data-table', `
@ -567,6 +582,8 @@ export default c([
--n-merged-border-color: var(--n-border-color-popover);
--n-merged-th-color-hover: var(--n-th-color-hover-popover);
--n-merged-td-color-hover: var(--n-td-color-hover-popover);
--n-merged-th-color-sorting: var(--n-th-color-hover-popover);
--n-merged-td-color-sorting: var(--n-td-color-hover-popover);
--n-merged-td-color-striped: var(--n-td-color-striped-popover);
`))
])

15
src/data-table/styles/light.ts
View File

@ -45,12 +45,17 @@ export const self = (vars: ThemeCommonVars) => {
fontSizeLarge,
borderColor: composite(cardColor, dividerColor),
tdColorHover: composite(cardColor, tableColorHover),
tdColorSorting: composite(cardColor, tableColorHover),
tdColorStriped: composite(cardColor, tableColorStriped),
thColor: composite(cardColor, tableHeaderColor),
thColorHover: composite(
composite(cardColor, tableHeaderColor),
tableColorHover
),
thColorSorting: composite(
composite(cardColor, tableHeaderColor),
tableColorHover
),
tdColor: cardColor,
tdTextColor: textColor2,
thTextColor: textColor1,
@ -61,22 +66,32 @@ export const self = (vars: ThemeCommonVars) => {
// modal
borderColorModal: composite(modalColor, dividerColor),
tdColorHoverModal: composite(modalColor, tableColorHover),
tdColorSortingModal: composite(modalColor, tableColorHover),
tdColorStripedModal: composite(modalColor, tableColorStriped),
thColorModal: composite(modalColor, tableHeaderColor),
thColorHoverModal: composite(
composite(modalColor, tableHeaderColor),
tableColorHover
),
thColorSortingModal: composite(
composite(modalColor, tableHeaderColor),
tableColorHover
),
tdColorModal: modalColor,
// popover
borderColorPopover: composite(popoverColor, dividerColor),
tdColorHoverPopover: composite(popoverColor, tableColorHover),
tdColorSortingPopover: composite(popoverColor, tableColorHover),
tdColorStripedPopover: composite(popoverColor, tableColorStriped),
thColorPopover: composite(popoverColor, tableHeaderColor),
thColorHoverPopover: composite(
composite(popoverColor, tableHeaderColor),
tableColorHover
),
thColorSortingPopover: composite(
composite(popoverColor, tableHeaderColor),
tableColorHover
),
tdColorPopover: popoverColor,
boxShadowBefore: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)',
boxShadowAfter: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)',