feat(components): [virtual-list] renderers

- Add Footer renderer.
- Add footer rendering for table-v2.
- Update table-v2.scss for footer rendering.
- Update utils typing.

packages/components/table-v2/src/renderers/footer.tsx

@@ -0,0 +1,18 @@
+import type { CSSProperties, FunctionalComponent } from 'vue'
+
+type FooterRendererProps = {
+  class?: JSX.IntrinsicAttributes['class']
+  style: CSSProperties
+}
+
+const Footer: FunctionalComponent<FooterRendererProps> = (props, { slots }) => {
+  return (
+    <div class={props.class} style={props.style}>
+      {slots.default?.()}
+    </div>
+  )
+}
+
+Footer.displayName = 'ElTableV2Footer'
+
+export default Footer

packages/components/table-v2/src/table-v2.tsx

@@ -11,6 +11,7 @@ import Row from './renderers/row'
 import Cell from './renderers/cell'
 import Header from './renderers/header'
 import HeaderCell from './renderers/header-cell'
+import Footer from './renderers/footer'
 
 import type { TableGridRowSlotParams } from './table-grid'
 import type { TableV2RowCellRenderParam } from './table-row'
@@ -50,6 +51,7 @@ const TableV2 = defineComponent({
       bodyWidth,
       rootStyle,
       headerWidth,
+      footerHeight,
 
       getRowHeight,
       onColumnSorted,
@@ -258,11 +260,17 @@ const TableV2 = defineComponent({
         },
       ]
 
+      const footerProps = {
+        class: ns.e('footer'),
+        style: unref(footerHeight),
+      }
+
       return (
         <div class={rootKls} style={unref(rootStyle)}>
           <MainTable {...mainTableProps}>{tableSlots}</MainTable>
           <LeftTable {...leftTableProps}>{tableSlots}</LeftTable>
           <RightTable {...rightTableProps}>{tableSlots}</RightTable>
+          <Footer {...footerProps}>{{ default: slots.footer }}</Footer>
         </div>
       )
     }

packages/components/table-v2/src/use-table.ts

@@ -78,7 +78,7 @@ function useTable(props: TableV2Props) {
   })
 
   const flattenedData = computed(() => {
-    const depths = {}
+    const depths: Record<KeyType, number> = {}
     const { data, rowKey } = props
 
     const _expandedRowKeys = unref(expandedRowKeys)
@@ -153,6 +153,10 @@ function useTable(props: TableV2Props) {
     return height - footerHeight
   })
 
+  const footerHeight = computed(() =>
+    enforceUnit({ height: props.footerHeight })
+  )
+
   const fixedTableHeight = computed(() => {
     const { maxHeight } = props
     const tableHeight = unref(mainTableHeight)
@@ -421,6 +425,7 @@ function useTable(props: TableV2Props) {
     bodyWidth,
     rootStyle,
     headerWidth,
+    footerHeight,
     mainTableHeight,
     fixedTableHeight,
     leftTableWidth,

packages/components/table-v2/src/utils.ts

@@ -18,7 +18,7 @@ export const tryCall = <T>(
 }
 
 export const enforceUnit = (style: CSSProperties) => {
-  ;['width', 'maxWidth', 'minWidth', 'height'].forEach((key) => {
+  ;(['width', 'maxWidth', 'minWidth', 'height'] as const).forEach((key) => {
     style[key] = addUnit(style[key])
   })
 

packages/theme-chalk/src/table-v2.scss

@@ -110,6 +110,14 @@
     overflow: hidden;
   }
 
+  @include e('footer') {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+  }
+
   @include e('header-row') {
     display: flex;
     border-bottom: getCssVar('table', 'border');

packages/utils/vue/style.ts

@@ -3,7 +3,10 @@ import { debugWarn } from '../error'
 
 const SCOPE = 'utils/vue/style'
 
-export function addUnit(value: string | number, defaultUnit = 'px') {
+export function addUnit(
+  value: string | number | undefined,
+  defaultUnit = 'px'
+) {
   if (!value) return ''
   if (isString(value)) {
     return value