feat(comp:table): sync design (#1107)

packages/components/table/docs/Theme.zh.md

@@ -37,7 +37,6 @@
 | `@table-head-icon-hover-background-color` | `@color-graphite-l40` | - | - |
 | `@table-head-font-weight` | `@font-weight-lg` | `@font-weight-md` | - |
 | `@table-body-hover-background` | `@background-color-light` | `@color-graphite-l50` | - |
-| `@table-pagination-margin` | `@spacing-lg 0` | - | - |
 | `@table-icon-margin` | `@spacing-xs` | - | - |
 | `@table-filterable-trigger-font-size` | `@font-size-md` | `@font-size-sm` | - |
 | `@table-expandable-icon-size` | `@font-size-lg` | `@font-size-md` | - |

packages/components/table/src/Table.tsx

@@ -41,11 +41,11 @@ export default defineComponent({
     const locale = useGlobalConfig('locale')
     const config = useGlobalConfig('table')
 
-    const autoHeight = computed(() => props.autoHeight ?? config.autoHeight)
+    const mergedAutoHeight = computed(() => props.autoHeight ?? config.autoHeight)
     const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey)
     const mergedGetKey = useGetRowKey(props, config)
     const stickyContext = useSticky(props)
-    const scrollContext = useScroll(props, autoHeight, stickyContext)
+    const scrollContext = useScroll(props, mergedAutoHeight, stickyContext)
     const columnsContext = useColumns(props, slots, config, scrollContext.scrollBarSizeOnFixedHolder)
     const sortableContext = useSortable(columnsContext.flattedColumns)
     const filterableContext = useFilterable(columnsContext.flattedColumns)
@@ -92,7 +92,7 @@ export default defineComponent({
       const { borderless = config.borderless, size = config.size, scroll } = props
       return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-auto-height`]: autoHeight.value,
+        [`${prefixCls}-auto-height`]: mergedAutoHeight.value,
         [`${prefixCls}-borderless`]: borderless,
         [`${prefixCls}-empty`]: flattedData.value.length === 0,
         [`${prefixCls}-full-height`]: scroll?.fullHeight,

packages/components/table/src/composables/useScroll.ts

@@ -7,6 +7,7 @@
 
 import { type ComputedRef, type Ref, computed, onBeforeUnmount, ref } from 'vue'
 
+import { useResizeObserver } from '@idux/cdk/resize'
 import { type VirtualScrollInstance, type VirtualScrollToFn, getScrollBarSize } from '@idux/cdk/scroll'
 import { Logger, convertCssPixel, convertElement } from '@idux/cdk/utils'
 
@@ -15,7 +16,7 @@ import { type StickyContext } from './useSticky'
 
 export function useScroll(
   props: TableProps,
-  autoHeight: ComputedRef<boolean>,
+  mergedAutoHeight: ComputedRef<boolean>,
   { isSticky, setStickyScrollLeft }: StickyContext,
 ): ScrollContext {
   const { scrollHeadRef, scrollBodyRef, scrollFootRef, handleScroll, pingedStart, pingedEnd } =
@@ -29,9 +30,18 @@ export function useScroll(
     props.scroll?.y &&
     Logger.warn('components/table', '`scroll.y` was deprecated, please use `scroll.height` instead')
 
+  const scrollWithAutoHeight = ref(mergedAutoHeight.value)
+  useResizeObserver(scrollBodyRef, entry => {
+    if (!mergedAutoHeight.value) {
+      scrollWithAutoHeight.value = false
+    } else {
+      scrollWithAutoHeight.value = entry.target.scrollHeight > entry.target.clientHeight
+    }
+  })
+
   const scrollWidth = computed(() => convertCssPixel(props.scroll?.width || props.scroll?.x))
   const scrollHeight = computed(
-    () => convertCssPixel(props.scroll?.height || props.scroll?.y) || (autoHeight.value ? 'auto' : ''),
+    () => convertCssPixel(props.scroll?.height || props.scroll?.y) || (scrollWithAutoHeight.value ? 'auto' : ''),
   )
 
   const scrollBarSize = computed(() => getScrollBarSize(convertElement(scrollBodyRef)))

packages/components/table/style/border.less

@@ -1,5 +1,37 @@
 @table-border: @table-border-width @table-border-style @table-border-color;
 
+.@{table-prefix} {
+  th {
+    border-bottom: @table-border;
+  }
+
+  thead > tr:not(:last-child) > th {
+    &[colspan] {
+      border-bottom: 0;
+    }
+  }
+
+  td {
+    border-bottom: @table-border;
+  }
+
+  &-footer {
+    border-bottom: @table-border;
+  }
+
+  &-filterable-trigger {
+    &-footer {
+      border-top: @table-border;
+    }
+  }
+
+  &-sticky {
+    &-scroll {
+      border-top: @table-border;
+    }
+  }
+}
+
 .@{table-prefix}:not(.@{table-prefix}-borderless),
 .@{table-prefix}:not(.@{table-prefix}-borderless) > .@{spin-prefix} > .@{spin-prefix}-container {
   > .@{header-prefix} {
@@ -11,14 +43,15 @@
     > .@{table-prefix}-fixed-holder,
     > .@{table-prefix}-content {
       border-left: @table-border;
-
+      border-right: @table-border;
+      border-bottom: @table-border;
       > table {
         border-top: @table-border;
 
-        > thead > tr > th,
-        > tbody > tr > td,
-        > tfoot > tr > th,
-        > tfoot > tr > td {
+        > thead > tr > th:not(:last-child),
+        > tbody > tr > td:not(:last-child),
+        > tfoot > tr > th:not(:last-child),
+        > tfoot > tr > td:not(:last-child) {
           border-right: @table-border;
         }
 
@@ -41,6 +74,10 @@
             border-right: @table-border;
           }
         }
+
+        > tbody > tr:last-child > td {
+          border-bottom: none;
+        }
       }
     }
 
@@ -55,4 +92,26 @@
     border: @table-border;
     border-top: 0;
   }
+
+  > .@{table-prefix}-pagination {
+    border: @table-border;
+    border-top: 0;
+    padding: 4px 8px 3px;
+  }
+}
+
+.@{table-prefix}.@{table-prefix}-auto-height,
+.@{table-prefix}.@{table-prefix}-auto-height > .@{spin-prefix} > .@{spin-prefix}-container {
+  > .@{table-prefix}-container:not(.@{table-prefix}-scroll-vertical) {
+    > .@{table-prefix}-fixed-holder,
+    > .@{table-prefix}-content {
+      border-bottom: @table-border;
+
+      > table {
+        > tbody > tr:last-child > td {
+          border-bottom: @table-border;
+        }
+      }
+    }
+  }
 }

packages/components/table/style/index.less

@@ -56,7 +56,6 @@
     font-weight: @table-head-font-weight;
     line-height: @table-head-line-height;
     overflow-wrap: break-word;
-    border-bottom: @table-border-width @table-border-style @table-border-color;
 
     &:not(:last-child)::before {
       position: absolute;
@@ -70,19 +69,12 @@
     }
   }
 
-  thead > tr:not(:last-child) > th {
-    &[colspan] {
-      border-bottom: 0;
-    }
-  }
-
   thead > tr > th[colspan]:not([colspan='1']) {
     text-align: center;
   }
 
   td {
     position: relative;
-    border-bottom: @table-border-width @table-border-style @table-border-color;
     line-height: @table-body-line-height;
     overflow-wrap: break-word;
     transition: background @transition-duration-base;
@@ -146,7 +138,7 @@
   &-pagination {
     display: flex;
     flex-wrap: wrap;
-    margin: @table-pagination-margin;
+    padding: 12px 0;
 
     > * {
       flex: none;
@@ -247,7 +239,6 @@
     font-size: @table-filterable-trigger-font-size;
 
     &-footer {
-      border-top: @table-border-width @table-border-style @table-border-color;
       padding: 8px 16px;
       text-align: right;
 
@@ -351,7 +342,6 @@
       display: flex;
       align-items: center;
       background: lighten(@border-color, 80%);
-      border-top: 1px solid @border-color;
       opacity: 0.6;
 
       &:hover {

packages/components/table/style/themes/default.variable.less

@@ -42,8 +42,6 @@
 
 @table-body-hover-background: @background-color-light;
 
-@table-pagination-margin: @spacing-lg 0;
-
 @table-icon-margin: @spacing-xs;
 @table-filterable-trigger-font-size: @font-size-md;
 @table-expandable-icon-size: @font-size-lg;

packages/pro/table/style/index.less

@@ -1,7 +1,5 @@
-@import '../../style/mixins/reset.less';
-
 .@{pro-table-prefix} {
-  .reset-component();
+  // .reset-component();
 
   &-layout-tool {
     &-tree-without-children {