diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts index 196356a8d..1378d976a 100644 --- a/packages/components/config/src/defaultConfig.ts +++ b/packages/components/config/src/defaultConfig.ts @@ -323,6 +323,7 @@ export const defaultConfig: GlobalConfig = { getKey: 'key', size: 'md', scrollToTopOnChange: true, + insetShadow: true, pagination: { position: 'bottomEnd', }, diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts index b5131a79a..8655439f1 100644 --- a/packages/components/config/src/types.ts +++ b/packages/components/config/src/types.ts @@ -486,6 +486,8 @@ export interface TableConfig { emptyCell?: string | ((options: TableEmptyCellOptions) => VNodeChild) + insetShadow: boolean + pagination: { position: TablePaginationPosition } & Partial columnBase: TableColumnBaseConfig diff --git a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap index 6c592b1f2..309f23bde 100644 --- a/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap +++ b/packages/components/table/__tests__/__snapshots__/table.spec.ts.snap @@ -3,7 +3,7 @@ exports[`Table > basic work > render work 1`] = ` "
-
+
diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue index 7956b3a19..089673874 100644 --- a/packages/components/table/demo/AutoHeight.vue +++ b/packages/components/table/demo/AutoHeight.vue @@ -38,14 +38,12 @@ const columns: TableColumn[] = [ title: 'Name', dataKey: 'name', width: 100, - fixed: 'start', customCell: 'name', }, { title: 'Age', dataKey: 'age', width: 100, - fixed: 'start', }, { title: 'Column 1', @@ -97,7 +95,6 @@ const columns: TableColumn[] = [ { title: 'Action', key: 'action', - fixed: 'end', width: 100, customCell: 'action', }, diff --git a/packages/components/table/docs/Api.zh.md b/packages/components/table/docs/Api.zh.md index 41c6b19a2..8a33e5822 100644 --- a/packages/components/table/docs/Api.zh.md +++ b/packages/components/table/docs/Api.zh.md @@ -18,6 +18,7 @@ | `emptyCell` | 单元格数据为空时默认渲染的内容 | `string \| ((options: TableEmptyCellOptions) => VNodeChild) \| #emptyCell='TableEmptyCellOptions'` | - | ✅ | 仅支持普通列,且数据为 `undefined \| null \| ''` 时生效 | | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - | | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- | +| `insetShadow` | 横向滚动溢出后是否展示内嵌的阴影 | `boolean` | `true` | ✅ |- | | `pagination` | 配置分页器, 参见[TablePagination](#TablePagination) | `boolean \| TablePagination` | - | ✅ | 设置 `false` 时表示不显示分页 | | `scroll` | 表格滚动配置项,可以指定滚动区域的宽、高, 参见[TableScroll](#TableScroll) | `TableScroll` | - | - | - | | `scrollToTopOnChange` | 是否在表格的分页、筛选、排序信息改变后滚动到顶部 | `boolean` | `true` | ✅ | - | diff --git a/packages/components/table/src/Table.tsx b/packages/components/table/src/Table.tsx index 15a6f2187..a32a66996 100644 --- a/packages/components/table/src/Table.tsx +++ b/packages/components/table/src/Table.tsx @@ -51,6 +51,7 @@ export default defineComponent({ const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey) const mergedGetKey = useGetKey(props, config, 'components/table') const mergedEmptyCell = computed(() => props.emptyCell ?? config.emptyCell) + const mergedInsetShadow = computed(() => props.insetShadow ?? config.insetShadow) const mergedSize = computed(() => props.size ?? config.size) const mergedVirtualItemHeight = computed(() => props.virtualItemHeight ?? virtualItemHeight[mergedSize.value]) const { mergedPagination } = usePagination(props, config, mergedSize) @@ -86,6 +87,7 @@ export default defineComponent({ locale, mergedPrefixCls, mergedEmptyCell, + mergedInsetShadow, mergedVirtualItemHeight, mergedAutoHeight, ...columnsContext, diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts index 86e05c324..17b0c6cab 100644 --- a/packages/components/table/src/composables/useScroll.ts +++ b/packages/components/table/src/composables/useScroll.ts @@ -170,8 +170,8 @@ function useScrollRef( if (currentTarget) { const { scrollWidth, clientWidth } = currentTarget - pingedStart.value = mergedScrollLeft > 0 - pingedEnd.value = mergedScrollLeft < scrollWidth - clientWidth + pingedStart.value = mergedScrollLeft > 1 + pingedEnd.value = scrollWidth - clientWidth - mergedScrollLeft > 1 } if (evt?.type === 'scroll') { diff --git a/packages/components/table/src/main/MainTable.tsx b/packages/components/table/src/main/MainTable.tsx index d5ce0b1cd..e8da50c42 100644 --- a/packages/components/table/src/main/MainTable.tsx +++ b/packages/components/table/src/main/MainTable.tsx @@ -41,6 +41,7 @@ export default defineComponent({ slots, expandable, mergedPrefixCls, + mergedInsetShadow, mergedVirtualItemHeight, mergedAutoHeight, columnWidths, @@ -116,6 +117,7 @@ export default defineComponent({ [`${prefixCls}-ping-end`]: pingedEnd.value, [`${prefixCls}-fixed-layout`]: tableLayout.value === 'fixed', [`${prefixCls}-fixed-column`]: hasFixed.value, + [`${prefixCls}-inset-shadow`]: mergedInsetShadow.value, [`${prefixCls}-scroll-horizontal`]: scrollWidth.value, [`${prefixCls}-scroll-vertical`]: scrollHeight.value, }) diff --git a/packages/components/table/src/token.ts b/packages/components/table/src/token.ts index beee05045..2dacd60bb 100644 --- a/packages/components/table/src/token.ts +++ b/packages/components/table/src/token.ts @@ -37,6 +37,7 @@ export interface TableContext mergedPrefixCls: ComputedRef mergedAutoHeight: ComputedRef mergedEmptyCell: ComputedRef VNodeChild) | undefined> + mergedInsetShadow: ComputedRef mergedVirtualItemHeight: ComputedRef tableLayout: ComputedRef<'auto' | 'fixed'> } diff --git a/packages/components/table/src/types.ts b/packages/components/table/src/types.ts index fe2dfff79..d256c6a39 100644 --- a/packages/components/table/src/types.ts +++ b/packages/components/table/src/types.ts @@ -39,6 +39,7 @@ export const tableProps = { getKey: { type: [String, Function] as PropType any)>, default: undefined }, header: { type: [String, Object] as PropType, default: undefined }, headless: { type: Boolean, default: undefined }, + insetShadow: { type: Boolean, default: undefined }, pagination: { type: [Boolean, Object] as PropType, default: true }, scroll: { type: Object as PropType, default: undefined }, size: { type: String as PropType, default: undefined }, diff --git a/packages/components/table/style/fixed.less b/packages/components/table/style/fixed.less index ed5ade5ec..43a5213b2 100644 --- a/packages/components/table/style/fixed.less +++ b/packages/components/table/style/fixed.less @@ -38,12 +38,12 @@ &-ping-start &-fix-start-first::after, &-ping-start &-fix-start-last::after { - box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 12%); + box-shadow: var(--ix-table-inset-shadow-start); } &-ping-end &-fix-end-first::after, &-ping-end &-fix-end-last::after { - box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 12%); + box-shadow: var(--ix-table-inset-shadow-end); } &-ping-start &-fix-start-last::before { diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less index 6421623db..863fc5665 100644 --- a/packages/components/table/style/index.less +++ b/packages/components/table/style/index.less @@ -10,6 +10,7 @@ @import './expandable.less'; @import './selectable.less'; @import './triggers.less'; +@import './shadow.less'; .@{table-prefix} { .reset-component-new(); diff --git a/packages/components/table/style/shadow.less b/packages/components/table/style/shadow.less new file mode 100644 index 000000000..af2d229fe --- /dev/null +++ b/packages/components/table/style/shadow.less @@ -0,0 +1,30 @@ +.@{table-prefix} { + &-inset-shadow { + &.@{table-prefix}-ping-start:not(.@{table-prefix}-fixed-column) { + &::before { + position: absolute; + top: 0; + left: 0; + bottom: -1px; + width: 30px; + transition: box-shadow var(--ix-motion-duration-fast); + box-shadow: var(--ix-table-inset-shadow-start); + content: ''; + pointer-events: none; + } + } + &.@{table-prefix}-ping-end:not(.@{table-prefix}-fixed-column) { + &::after { + position: absolute; + top: 0; + right: 0; + bottom: -1px; + width: 30px; + transition: box-shadow var(--ix-motion-duration-fast); + content: ''; + pointer-events: none; + box-shadow: var(--ix-table-inset-shadow-end); + } + } + } +} diff --git a/packages/components/table/theme/dark.ts b/packages/components/table/theme/dark.ts new file mode 100644 index 000000000..61ecfdd22 --- /dev/null +++ b/packages/components/table/theme/dark.ts @@ -0,0 +1,23 @@ +/** + * @license + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE + */ + +import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme' + +import { getDefaultThemeTokens } from './default' +export function getDarkThemeTokens( + tokens: GlobalThemeTokens, + algorithms: ThemeTokenAlgorithms, +): CertainThemeTokens<'table'> { + const { getGreyColors } = algorithms + const greyColors = getGreyColors() + const defaultTokens = getDefaultThemeTokens(tokens, algorithms) + return { + ...defaultTokens, + insetShadowStart: `inset 10px 0 8px -8px ${greyColors.l50}`, + insetShadowEnd: `inset -10px 0 8px -8px ${greyColors.l50}`, + } +} diff --git a/packages/components/table/theme/default.ts b/packages/components/table/theme/default.ts index 77f299d40..88e04c960 100644 --- a/packages/components/table/theme/default.ts +++ b/packages/components/table/theme/default.ts @@ -5,12 +5,18 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme' +import { + type CertainThemeTokens, + type GlobalThemeTokens, + type ThemeTokenAlgorithms, + getAlphaColor, +} from '@idux/components/theme' export function getDefaultThemeTokens( tokens: GlobalThemeTokens, algorithms: ThemeTokenAlgorithms, ): CertainThemeTokens<'table'> { const { getGreyColors } = algorithms + const greyColors = getGreyColors() const { fontSizeSm, heightMd, @@ -51,6 +57,9 @@ export function getDefaultThemeTokens( headIconColorActive: colorPrimary, headIconBgColorHover: getGreyColors().l30, + insetShadowStart: `inset 10px 0 8px -8px ${getAlphaColor(greyColors.d50, 0.12)}`, + insetShadowEnd: `inset -10px 0 8px -8px ${getAlphaColor(greyColors.d50, 0.12)}`, + bodyRowBgColorHover: colorContainerBgHover, bodyRowBgColorSelected: colorContainerBg, bodyRowBgColorExpanded: colorInfoContainerBg, diff --git a/packages/components/table/theme/index.ts b/packages/components/table/theme/index.ts index f7afeb74d..f67d3a185 100644 --- a/packages/components/table/theme/index.ts +++ b/packages/components/table/theme/index.ts @@ -7,12 +7,11 @@ import type { TokenGetter } from '@idux/components/theme' +import { getDarkThemeTokens } from './dark' import { getDefaultThemeTokens } from './default' export const getThemeTokens: TokenGetter<'table'> = (tokens, presetTheme, algorithms) => { - return presetTheme === 'default' - ? getDefaultThemeTokens(tokens, algorithms) - : getDefaultThemeTokens(tokens, algorithms) + return presetTheme === 'default' ? getDefaultThemeTokens(tokens, algorithms) : getDarkThemeTokens(tokens, algorithms) } export type { TableThemeTokens } from './tokens' diff --git a/packages/components/table/theme/tokens.ts b/packages/components/table/theme/tokens.ts index f1f7b7ca2..c29a4f89b 100644 --- a/packages/components/table/theme/tokens.ts +++ b/packages/components/table/theme/tokens.ts @@ -83,6 +83,15 @@ export interface TableThemeTokens { */ headIconBgColorHover: string + /** + * @desc 位于左侧固定列以及横向滚动条溢出的边缘阴影 + */ + insetShadowStart: string + /** + * @desc 位于右侧固定列以及横向滚动条溢出的边缘阴影 + */ + insetShadowEnd: string + /** * @desc 表格内容行悬浮背景颜色 */ diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap index 2d2eb403a..0e6ac30f2 100644 --- a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap +++ b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap @@ -45,7 +45,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
@@ -1158,7 +1158,7 @@ exports[`ProTransfer > table transfer render work 1`] = `