naive-ui 2.38.2 → 2.40.0

package/es/data-table/src/TableParts/Body.mjs

@@ -1,7 +1,6 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, ref, defineComponent, inject, watchEffect, onUnmounted, computed, Fragment } from 'vue';
+import { Fragment, computed, defineComponent, h, inject, onUnmounted, ref, watchEffect } from 'vue';
 import { pxfy, repeat } from 'seemly';
-import { VirtualList, VResizeObserver } from 'vueuc';
+import { VResizeObserver, VirtualList } from 'vueuc';
 import { useMemo } from 'vooks';
 import { cssrAnchorMetaName } from "../../../_mixins/common.mjs";
 import { c } from "../../../_utils/cssr/index.mjs";
@@ -10,6 +9,7 @@ import { formatLength, resolveSlot, warn } from "../../../_utils/index.mjs";
 import { NEmpty } from "../../../empty/index.mjs";
 import { dataTableInjectionKey } from "../interface.mjs";
 import { createRowClassName, getColKey, isColumnSorting } from "../utils.mjs";
+import { configProviderInjectionKey } from "../../../config-provider/src/context.mjs";
 import Cell from "./Cell.mjs";
 import ExpandTrigger from "./ExpandTrigger.mjs";
 import RenderSafeCheckbox from "./BodyCheckbox.mjs";
@@ -121,6 +121,9 @@ export default defineComponent({
       summaryRef,
       mergedSortStateRef,
       virtualScrollRef,
+      virtualScrollXRef,
+      heightForRowRef,
+      minRowHeightRef,
       componentId,
       mergedTableLayoutRef,
       childTriggerColIndexRef,
@@ -143,8 +146,8 @@ export default defineComponent({
       doCheck,
       doUncheck,
       renderCell
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(dataTableInjectionKey);
+    const NConfigProvider = inject(configProviderInjectionKey);
     const scrollbarInstRef = ref(null);
     const virtualListRef = ref(null);
     const emptyElRef = ref(null);
@@ -294,10 +297,8 @@ export default defineComponent({
       scrollTo(arg0, arg1) {
         var _a, _b;
         if (virtualScrollRef.value) {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
           (_a = virtualListRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(arg0, arg1);
         } else {
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
           (_b = scrollbarInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(arg0, arg1);
         }
       }
@@ -348,13 +349,15 @@ export default defineComponent({
         id: `n-${componentId}`,
         force: true,
         props: cProps,
-        anchorMetaName: cssrAnchorMetaName
+        anchorMetaName: cssrAnchorMetaName,
+        parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
       });
       fixedStyleMounted = true;
     });
     onUnmounted(() => {
       style.unmount({
-        id: `n-${componentId}`
+        id: `n-${componentId}`,
+        parent: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.styleMountTarget
       });
     });
     return Object.assign({
@@ -411,6 +414,9 @@ export default defineComponent({
       hoverKey: hoverKeyRef,
       mergedSortState: mergedSortStateRef,
       virtualScroll: virtualScrollRef,
+      virtualScrollX: virtualScrollXRef,
+      heightForRow: heightForRowRef,
+      minRowHeight: minRowHeightRef,
       mergedTableLayout: mergedTableLayoutRef,
       childTriggerColIndex: childTriggerColIndexRef,
       indent: indentRef,
@@ -504,7 +510,10 @@ export default defineComponent({
           summary,
           handleCheckboxUpdateChecked,
           handleRadioUpdateChecked,
-          handleUpdateExpanded
+          handleUpdateExpanded,
+          heightForRow,
+          minRowHeight,
+          virtualScrollX
         } = this;
         const {
           length: colCount
@@ -573,7 +582,29 @@ export default defineComponent({
         });
         const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
         const bodyWidthPx = bodyWidth === null ? undefined : `${bodyWidth}px`;
-        const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
+        const CellComponent = this.virtualScrollX ? 'div' : 'td';
+        let leftFixedColsCount = 0;
+        let rightFixedColsCount = 0;
+        if (virtualScrollX) {
+          cols.forEach(col => {
+            if (col.column.fixed === 'left') {
+              leftFixedColsCount++;
+            } else if (col.column.fixed === 'right') {
+              rightFixedColsCount++;
+            }
+          });
+        }
+        const renderRow = ({
+          // Normal
+          rowInfo,
+          displayedRowIndex,
+          isVirtual,
+          // Virtual X
+          isVirtualX,
+          startColIndex,
+          endColIndex,
+          getLeft
+        }) => {
           const {
             index: actualRowIndex
           } = rowInfo;
@@ -597,7 +628,7 @@ export default defineComponent({
               }
             }, renderExpand(rawNode, actualRowIndex)) : renderExpand(rawNode, actualRowIndex)));
           }
-          const isSummary = ('isSummaryRow' in rowInfo);
+          const isSummary = 'isSummaryRow' in rowInfo;
           const striped = !isSummary && rowInfo.striped;
           const {
             tmNode,
@@ -609,14 +640,17 @@ export default defineComponent({
           const expanded = mergedExpandedRowKeySet.has(rowKey);
           const props = rowProps ? rowProps(rowData, actualRowIndex) : undefined;
           const mergedRowClassName = typeof rowClassName === 'string' ? rowClassName : createRowClassName(rowData, actualRowIndex, rowClassName);
-          const row = h("tr", Object.assign({
-            onMouseenter: () => {
-              this.hoverKey = rowKey;
-            },
-            key: rowKey,
-            class: [`${mergedClsPrefix}-data-table-tr`, isSummary && `${mergedClsPrefix}-data-table-tr--summary`, striped && `${mergedClsPrefix}-data-table-tr--striped`, expanded && `${mergedClsPrefix}-data-table-tr--expanded`, mergedRowClassName]
-          }, props), cols.map((col, colIndex) => {
+          const iteratedCols = isVirtualX ? cols.filter((col, index) => {
+            if (startColIndex <= index && index <= endColIndex) return true;
+            if (col.column.fixed) {
+              return true;
+            }
+            return false;
+          }) : cols;
+          const virtualXRowHeight = isVirtualX ? pxfy((heightForRow === null || heightForRow === void 0 ? void 0 : heightForRow(rowData, actualRowIndex)) || minRowHeight) : undefined;
+          const cells = iteratedCols.map(col => {
             var _a, _b, _c, _d, _e;
+            const colIndex = col.index;
             if (displayedRowIndex in cordToPass) {
               const cordOfRowToPass = cordToPass[displayedRowIndex];
               const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
@@ -671,17 +705,27 @@ export default defineComponent({
             const indentOffsetStyle = {
               '--indent-offset': ''
             };
-            return h("td", Object.assign({}, resolvedCellProps, {
+            const FinalCellComponent = column.fixed ? 'td' : CellComponent;
+            return h(FinalCellComponent, Object.assign({}, resolvedCellProps, {
               key: colKey,
               style: [{
                 textAlign: column.align || undefined,
+                width: pxfy(column.width)
+              }, isVirtualX && {
+                height: virtualXRowHeight
+              }, isVirtualX && !column.fixed ? {
+                position: 'absolute',
+                left: pxfy(getLeft(colIndex)),
+                top: 0,
+                bottom: 0
+              } : {
                 left: pxfy((_c = fixedColumnLeftMap[colKey]) === null || _c === void 0 ? void 0 : _c.start),
                 right: pxfy((_d = fixedColumnRightMap[colKey]) === null || _d === void 0 ? void 0 : _d.start)
               }, indentOffsetStyle, (resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.style) || ''],
               colspan: mergedColSpan,
               rowspan: isVirtual ? undefined : mergedRowSpan,
               "data-col-key": colKey,
-              class: [`${mergedClsPrefix}-data-table-td`, column.className, resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class, isSummary && `${mergedClsPrefix}-data-table-td--summary`, (hoverKey !== null && cordKey[displayedRowIndex][colIndex].includes(hoverKey) || isColumnSorting(column, mergedSortState)) && `${mergedClsPrefix}-data-table-td--hover`, column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`, column.align && `${mergedClsPrefix}-data-table-td--${column.align}-align`, column.type === 'selection' && `${mergedClsPrefix}-data-table-td--selection`, column.type === 'expand' && `${mergedClsPrefix}-data-table-td--expand`, isLastCol && `${mergedClsPrefix}-data-table-td--last-col`, isLastRow && `${mergedClsPrefix}-data-table-td--last-row`]
+              class: [`${mergedClsPrefix}-data-table-td`, column.className, resolvedCellProps === null || resolvedCellProps === void 0 ? void 0 : resolvedCellProps.class, isSummary && `${mergedClsPrefix}-data-table-td--summary`, hoverKey !== null && cordKey[displayedRowIndex][colIndex].includes(hoverKey) && `${mergedClsPrefix}-data-table-td--hover`, isColumnSorting(column, mergedSortState) && `${mergedClsPrefix}-data-table-td--sorting`, column.fixed && `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`, column.align && `${mergedClsPrefix}-data-table-td--${column.align}-align`, column.type === 'selection' && `${mergedClsPrefix}-data-table-td--selection`, column.type === 'expand' && `${mergedClsPrefix}-data-table-td--expand`, isLastCol && `${mergedClsPrefix}-data-table-td--last-col`, isLastRow && `${mergedClsPrefix}-data-table-td--last-row`]
             }), hasChildren && colIndex === childTriggerColIndex ? [repeat(indentOffsetStyle['--indent-offset'] = isSummary ? 0 : rowInfo.tmNode.level, h("div", {
               class: `${mergedClsPrefix}-data-table-indent`,
               style: indentStyle
@@ -691,6 +735,7 @@ export default defineComponent({
               class: `${mergedClsPrefix}-data-table-expand-trigger`,
               clsPrefix: mergedClsPrefix,
               expanded: expanded,
+              rowData: rowData,
               renderExpandIcon: this.renderExpandIcon,
               loading: loadingKeySet.has(rowInfo.key),
               onClick: () => {
@@ -712,6 +757,7 @@ export default defineComponent({
               }
             }) : null : column.type === 'expand' ? !isSummary ? !column.expandable || ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? h(ExpandTrigger, {
               clsPrefix: mergedClsPrefix,
+              rowData: rowData,
               expanded: expanded,
               renderExpandIcon: this.renderExpandIcon,
               onClick: () => {
@@ -726,7 +772,27 @@ export default defineComponent({
               mergedTheme: mergedTheme,
               renderCell: this.renderCell
             }));
-          }));
+          });
+          if (isVirtualX) {
+            if (leftFixedColsCount && rightFixedColsCount) {
+              cells.splice(leftFixedColsCount, 0, h("td", {
+                colspan: cols.length - leftFixedColsCount - rightFixedColsCount,
+                style: {
+                  pointerEvents: 'none',
+                  visibility: 'hidden',
+                  height: 0
+                }
+              }));
+            }
+          }
+          const row = h("tr", Object.assign({
+            onMouseenter: () => {
+              this.hoverKey = rowKey;
+            },
+            key: rowKey,
+            class: [`${mergedClsPrefix}-data-table-tr`, isSummary && `${mergedClsPrefix}-data-table-tr--summary`, striped && `${mergedClsPrefix}-data-table-tr--striped`, expanded && `${mergedClsPrefix}-data-table-tr--expanded`, mergedRowClassName, props === null || props === void 0 ? void 0 : props.class],
+            style: props === null || props === void 0 ? void 0 : props.style
+          }, props), cells);
           return row;
         };
         if (!virtualScroll) {
@@ -745,13 +811,23 @@ export default defineComponent({
             "data-n-id": componentId,
             class: `${mergedClsPrefix}-data-table-tbody`
           }, displayedData.map((rowInfo, displayedRowIndex) => {
-            return renderRow(rowInfo, displayedRowIndex, false);
+            return renderRow({
+              rowInfo,
+              displayedRowIndex,
+              isVirtual: false,
+              isVirtualX: false,
+              startColIndex: -1,
+              endColIndex: -1,
+              getLeft(_index) {
+                return -1;
+              }
+            });
           })) : null);
         } else {
           return h(VirtualList, {
             ref: "virtualListRef",
             items: displayedData,
-            itemSize: 28,
+            itemSize: this.minRowHeight,
             visibleItemsTag: VirtualListItemWrapper,
             visibleItemsProps: {
               clsPrefix: mergedClsPrefix,
@@ -763,12 +839,44 @@ export default defineComponent({
             onResize: this.handleVirtualListResize,
             onScroll: this.handleVirtualListScroll,
             itemsStyle: contentStyle,
-            itemResizable: true
+            itemResizable: !virtualScrollX,
+            columns: cols,
+            renderItemWithCols: virtualScrollX ? ({
+              itemIndex,
+              item,
+              startColIndex,
+              endColIndex,
+              getLeft
+            }) => {
+              return renderRow({
+                displayedRowIndex: itemIndex,
+                isVirtual: true,
+                isVirtualX: true,
+                rowInfo: item,
+                startColIndex,
+                endColIndex,
+                getLeft
+              });
+            } : undefined
           }, {
             default: ({
               item,
-              index
-            }) => renderRow(item, index, true)
+              index,
+              renderedItemWithCols
+            }) => {
+              if (renderedItemWithCols) return renderedItemWithCols;
+              return renderRow({
+                rowInfo: item,
+                displayedRowIndex: index,
+                isVirtual: true,
+                isVirtualX: false,
+                startColIndex: 0,
+                endColIndex: 0,
+                getLeft(_index) {
+                  return 0;
+                }
+              });
+            }
           });
         }
       }

package/es/data-table/src/TableParts/BodyCheckbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="vue/jsx" />
 import { type PropType } from 'vue';
 import { type RowKey } from '../interface';
 declare const _default: import("vue").DefineComponent<{

package/es/data-table/src/TableParts/BodyCheckbox.mjs

@@ -22,7 +22,6 @@ export default defineComponent({
     const {
       mergedCheckedRowKeySetRef,
       mergedInderminateRowKeySetRef
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(dataTableInjectionKey);
     return () => {
       const {

package/es/data-table/src/TableParts/BodyRadio.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="vue/jsx" />
 import { type PropType } from 'vue';
 import { type RowKey } from '../interface';
 declare const _default: import("vue").DefineComponent<{

package/es/data-table/src/TableParts/BodyRadio.mjs

@@ -22,7 +22,6 @@ export default defineComponent({
     const {
       mergedCheckedRowKeySetRef,
       componentId
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     } = inject(dataTableInjectionKey);
     return () => {
       const {