feat(comp:table): add insetShadow to horizontal overlowed container (#…

…1768)
IDuxFE · Jan 2, 2024 · 2d51ad6 · 2d51ad6
1 parent 4420e37
commit 2d51ad6
Show file tree

Hide file tree

Showing 18 changed files with 92 additions and 14 deletions.
diff --git 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
@@ -486,6 +486,8 @@ export interface TableConfig {
 
   emptyCell?: string | ((options: TableEmptyCellOptions) => VNodeChild)
 
+  insetShadow: boolean
+
   pagination: { position: TablePaginationPosition } & Partial<PaginationConfig>
 
   columnBase: TableColumnBaseConfig

diff --git 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`] = `
 "<div class=\\"ix-table ix-table-borderless ix-table-md\\">
   <!---->
-  <div class=\\"ix-table-container\\">
+  <div class=\\"ix-table-container ix-table-inset-shadow\\">
     <div class=\\"ix-table-content\\">
       <table class=\\"ix-table-table\\" style=\\"table-layout: auto;\\">
         <colgroup>

diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue
@@ -38,14 +38,12 @@ const columns: TableColumn<Data>[] = [
     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<Data>[] = [
   {
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -37,6 +37,7 @@ export interface TableContext
   mergedPrefixCls: ComputedRef<string>
   mergedAutoHeight: ComputedRef<boolean>
   mergedEmptyCell: ComputedRef<string | ((options: TableEmptyCellOptions) => VNodeChild) | undefined>
+  mergedInsetShadow: ComputedRef<boolean>
   mergedVirtualItemHeight: ComputedRef<number>
   tableLayout: ComputedRef<'auto' | 'fixed'>
 }

diff --git 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<string | ((record: any) => any)>, default: undefined },
   header: { type: [String, Object] as PropType<string | HeaderProps>, default: undefined },
   headless: { type: Boolean, default: undefined },
+  insetShadow: { type: Boolean, default: undefined },
   pagination: { type: [Boolean, Object] as PropType<boolean | TablePagination>, default: true },
   scroll: { type: Object as PropType<TableScroll>, default: undefined },
   size: { type: String as PropType<TableSize>, default: undefined },

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -45,7 +45,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
             <!---->
             
             <div
-              class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
+              class="ix-table-container ix-table-fixed-layout ix-table-inset-shadow ix-table-scroll-vertical"
             >
               
               <!---->
@@ -1158,7 +1158,7 @@ exports[`ProTransfer > table transfer render work 1`] = `
             <!---->
             
             <div
-              class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
+              class="ix-table-container ix-table-fixed-layout ix-table-inset-shadow ix-table-scroll-vertical"
             >
               
               <!---->