fix(comp:table): empty style (#820)

IDuxFE · Mar 23, 2022 · 689437b · 689437b
1 parent 322f755
commit 689437b
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 30 deletions.
diff --git a/packages/components/pagination/src/Pagination.tsx b/packages/components/pagination/src/Pagination.tsx
@@ -70,20 +70,22 @@ export default defineComponent({
       const children: VNodeTypes[] = showTotal.value ? [<Total />] : []
 
       if (simple.value) {
-        children.push(<Item disabled={activeIndex.value === 1} type="prev" />)
+        const _activeIndex = activeIndex.value
+        const _lastIndex = lastIndex.value
+        children.push(<Item disabled={_activeIndex === 1} type="prev" />)
         children.push(
           <li class={`${prefixCls}-item`}>
             <ɵInput
               disabled={props.disabled}
               size={size.value}
-              value={activeIndex.value.toString()}
+              value={_activeIndex.toString()}
               onKeydown={jumpToIndex}
             />
             <span class={`${prefixCls}-item-slash`}>/</span>
-            <span>{lastIndex.value}</span>
+            <span>{_lastIndex}</span>
           </li>,
         )
-        children.push(<Item disabled={activeIndex.value === lastIndex.value} type="next" />)
+        children.push(<Item disabled={_activeIndex === _lastIndex} type="next" />)
       } else {
         items.value.forEach(item => children.push(<Item key={item.type + '-' + item.index} {...item} />))
         showSizeChanger.value && children.push(<Sizes />)

diff --git a/packages/components/pagination/src/composables/useItems.ts b/packages/components/pagination/src/composables/useItems.ts
@@ -20,18 +20,16 @@ export function useItems(
   lastIndex: ComputedRef<number>,
 ): ComputedRef<PaginationItem[]> {
   return computed(() => {
-    const currActiveIndex = activeIndex.value
-    const currLastIndex = lastIndex.value
+    const _activeIndex = activeIndex.value
+    const _lastIndex = lastIndex.value
     let items: PaginationItem[]
-    if (currLastIndex <= 9) {
-      items = generatePage(1, currLastIndex)
+    if (_lastIndex <= 9) {
+      items = generatePage(1, _lastIndex)
     } else {
-      items = generateRangeItem(currActiveIndex, currLastIndex)
+      items = generateRangeItem(_activeIndex, _lastIndex)
     }
-
-    const prevItem: PaginationItem = { type: 'prev', disabled: currActiveIndex === 1 }
-    const nextItem: PaginationItem = { type: 'next', disabled: currActiveIndex === currLastIndex }
-
+    const prevItem: PaginationItem = { type: 'prev', disabled: _activeIndex === 1 }
+    const nextItem: PaginationItem = { type: 'next', disabled: _activeIndex === _lastIndex }
     return [prevItem, ...items, nextItem]
   })
 }

diff --git a/packages/components/pagination/src/composables/usePages.ts b/packages/components/pagination/src/composables/usePages.ts
@@ -23,7 +23,7 @@ export interface PagesContext {
 export function usePages(props: PaginationProps, config: PaginationConfig): PagesContext {
   const [activeIndex, setActiveIndex] = useControlledProp(props, 'pageIndex', 1)
   const [activeSize, setActiveSize] = useControlledProp(props, 'pageSize', props.pageSize ?? config.pageSize)
-  const lastIndex = computed(() => Math.ceil(props.total / activeSize.value))
+  const lastIndex = computed(() => Math.max(Math.ceil(props.total / activeSize.value), 1))
 
   const changePageIndex = (index: number) => {
     const validIndex = validatePageIndex(index, lastIndex.value)

diff --git a/packages/components/table/src/composables/useScroll.ts b/packages/components/table/src/composables/useScroll.ts
@@ -30,8 +30,8 @@ export function useScroll(
     Logger.warn('components/table', '`scroll.y` was deprecated, please use `scroll.height` instead')
 
   const scrollWidth = computed(() => convertCssPixel(props.scroll?.width || props.scroll?.x))
-  const scrollHeight = computed(() =>
-    convertCssPixel(props.scroll?.height || props.scroll?.y) || autoHeight.value ? 'auto' : '',
+  const scrollHeight = computed(
+    () => convertCssPixel(props.scroll?.height || props.scroll?.y) || (autoHeight.value ? 'auto' : ''),
   )
 
   const scrollBarSize = computed(() => (props.virtual ? 0 : getScrollBarSize(convertElement(scrollBodyRef))))

diff --git a/packages/components/table/src/main/ColGroup.tsx b/packages/components/table/src/main/ColGroup.tsx
@@ -14,7 +14,7 @@ import { type TableColumnMerged } from '../composables/useColumns'
 import { TABLE_TOKEN } from '../token'
 
 export default defineComponent({
-  props: { ixFixedHolder: Boolean },
+  props: { isFixedHolder: Boolean },
   setup(props) {
     const {
       flattedColumns,
@@ -26,10 +26,10 @@ export default defineComponent({
     } = inject(TABLE_TOKEN)!
     const isRender = computed(() => flattedColumns.value.some(column => !!column.width || 'type' in column))
     return () => {
-      const { ixFixedHolder } = props
+      const { isFixedHolder } = props
 
       let children: VNodeTypes[] | undefined
-      if (ixFixedHolder) {
+      if (isFixedHolder) {
         const widths = columnWidthsWithScrollBar.value
         children = flattedColumnsWithScrollBar.value.map((column, colIndex) =>
           renderCol(mergedPrefixCls, mergedSelectableMenus, column as TableColumnMerged, widths[colIndex]),

diff --git a/packages/components/table/src/main/FixedHolder.tsx b/packages/components/table/src/main/FixedHolder.tsx
@@ -55,12 +55,11 @@ export default defineComponent({
     })
 
     return () => {
-      const children = hasData.value && !isMaxContent.value ? <ColGroup ixFixedHolder /> : null
       return (
         <div class={classes.value} style={style.value} ref={scrollHeadRef}>
           <table style={tableStyle.value}>
-            {children}
-            {slots.default?.()}
+            {(hasData.value || !isMaxContent.value) && <ColGroup isFixedHolder />}
+            {slots.default && slots.default()}
           </table>
         </div>
       )

diff --git a/packages/components/table/src/main/body/Body.tsx b/packages/components/table/src/main/body/Body.tsx
@@ -45,7 +45,7 @@ export default defineComponent({
         }
       } else {
         children.push(
-          <BodyRowSingle>
+          <BodyRowSingle isEmpty>
             <ɵEmpty v-slots={tableSlots} empty={props.empty} />
           </BodyRowSingle>,
         )

diff --git a/packages/components/table/src/main/body/BodyRowSingle.tsx b/packages/components/table/src/main/body/BodyRowSingle.tsx
@@ -5,22 +5,46 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, inject } from 'vue'
+import { type VNodeChild, computed, defineComponent, inject } from 'vue'
 
-import { TABLE_TOKEN } from '../../token'
+import { convertCssPixel } from '@idux/cdk/utils'
+
+import { TABLE_TOKEN, tableBodyToken } from '../../token'
 
 export default defineComponent({
-  setup(_, { slots }) {
-    const { flattedColumns, bodyRowTag, bodyColTag } = inject(TABLE_TOKEN)!
+  props: { isEmpty: Boolean },
+  setup(props, { slots }) {
+    const { bodyRowTag, bodyColTag, mergedPrefixCls, flattedColumns, hasFixed, scrollWidth, scrollBarColumn } =
+      inject(TABLE_TOKEN)!
+    const { mainTableWidth } = inject(tableBodyToken)!
     const columnCount = computed(() => flattedColumns.value.length)
     return () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const BodyRowTag = bodyRowTag.value as any
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const BodyColTag = bodyColTag.value as any
+
+      let children: VNodeChild = slots.default!()
+
+      if (props.isEmpty ? scrollWidth.value : hasFixed.value) {
+        const scrollBar = scrollBarColumn.value
+        children = (
+          <div
+            class={`${mergedPrefixCls.value}-fixed-row`}
+            style={{
+              width: convertCssPixel(mainTableWidth.value - (scrollBar ? scrollBar.width : 0)),
+              position: 'sticky',
+              left: 0,
+              overflow: 'hidden',
+            }}
+          >
+            {children}
+          </div>
+        )
+      }
       return (
         <BodyRowTag>
-          <BodyColTag colSpan={columnCount.value}>{slots.default?.()}</BodyColTag>
+          <BodyColTag colSpan={columnCount.value}>{children}</BodyColTag>
         </BodyRowTag>
       )
     }

diff --git a/packages/components/table/style/fixed.less b/packages/components/table/style/fixed.less
@@ -1,7 +1,5 @@
 .@{table-prefix} {
-
   &-fix {
-
     &-start,
     &-end {
       z-index: 2;
@@ -51,4 +49,9 @@
   &-ping-start &-fix-start-last::before {
     background-color: transparent !important;
   }
+
+  &-fixed-row {
+    margin: -12px;
+    padding: 16px;
+  }
 }