naive-ui 2.30.6 → 2.31.0

package/lib/collapse/src/CollapseItem.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseItemProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -11,16 +12,16 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Collapse_1 = require("./Collapse");
 const CollapseItemContent_1 = __importDefault(require("./CollapseItemContent"));
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const use_rtl_1 = require("../../_mixins/use-rtl");
 const _mixins_1 = require("../../_mixins");
-const collapseItemProps = {
+exports.collapseItemProps = {
     title: String,
     name: [String, Number],
     displayDirective: String
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'CollapseItem',
-    props: collapseItemProps,
+    props: exports.collapseItemProps,
     setup(props) {
         const { mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const randomName = (0, seemly_1.createId)();
@@ -45,7 +46,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return true;
         });
-        const rtlEnabledRef = (0, use_rtl_1.default)('Collapse', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Collapse', mergedRtlRef, mergedClsPrefixRef);
         return {
             rtlEnabled: rtlEnabledRef,
             collapseSlots,

package/lib/collapse-transition/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NCollapseTransition } from './src/CollapseTransition';
+export { default as NCollapseTransition, collapseTransitionProps } from './src/CollapseTransition';
 export type { CollapseTransitionProps } from './src/CollapseTransition';

package/lib/collapse-transition/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NCollapseTransition = void 0;
+exports.collapseTransitionProps = exports.NCollapseTransition = void 0;
 var CollapseTransition_1 = require("./src/CollapseTransition");
 Object.defineProperty(exports, "NCollapseTransition", { enumerable: true, get: function () { return __importDefault(CollapseTransition_1).default; } });
+Object.defineProperty(exports, "collapseTransitionProps", { enumerable: true, get: function () { return CollapseTransition_1.collapseTransitionProps; } });

package/lib/collapse-transition/src/CollapseTransition.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const collapseProps: {
+export declare const collapseTransitionProps: {
     readonly show: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -21,7 +21,7 @@ declare const collapseProps: {
         bezier: string;
     }, any>>>;
 };
-export declare type CollapseTransitionProps = ExtractPublicPropTypes<typeof collapseProps>;
+export declare type CollapseTransitionProps = ExtractPublicPropTypes<typeof collapseTransitionProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly show: {
         readonly type: BooleanConstructor;

package/lib/collapse-transition/src/CollapseTransition.js

@@ -3,14 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.collapseTransitionProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
+const use_rtl_1 = require("../../_mixins/use-rtl");
 const _utils_1 = require("../../_utils");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const styles_1 = require("../styles");
 const _internal_1 = require("../../_internal");
-const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: {
+exports.collapseTransitionProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { show: {
         type: Boolean,
         default: true
     }, appear: Boolean, 
@@ -24,7 +25,7 @@ const collapseProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'CollapseTransition',
-    props: collapseProps,
+    props: exports.collapseTransitionProps,
     inheritAttrs: false,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
@@ -36,7 +37,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const mergedThemeRef = (0, _mixins_1.useTheme)('CollapseTransition', '-collapse-transition', index_cssr_1.default, styles_1.collapseTransitionLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = (0, use_rtl_1.default)('CollapseTransition', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('CollapseTransition', mergedRtlRef, mergedClsPrefixRef);
         const mergedShowRef = (0, vue_1.computed)(() => {
             if (props.collapsed !== undefined) {
                 // No mistake, it's implemented with error at first, just keep it here

package/lib/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NColorPicker } from './src/ColorPicker';
+export { default as NColorPicker, colorPickerProps } from './src/ColorPicker';
 export type { ColorPickerProps } from './src/ColorPicker';

package/lib/color-picker/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NColorPicker = void 0;
+exports.colorPickerProps = exports.NColorPicker = void 0;
 var ColorPicker_1 = require("./src/ColorPicker");
 Object.defineProperty(exports, "NColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
+Object.defineProperty(exports, "colorPickerProps", { enumerable: true, get: function () { return ColorPicker_1.colorPickerProps; } });

package/lib/color-picker/src/ColorPicker.d.ts

@@ -4,7 +4,7 @@ import { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { ColorPickerMode } from './utils';
 import { OnUpdateValue, RenderLabel } from './interface';
-export declare const colorPickerPanelProps: {
+export declare const colorPickerProps: {
     readonly value: PropType<string | null>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;
@@ -888,7 +888,7 @@ export declare const colorPickerPanelProps: {
         }, any>;
     }>>>;
 };
-export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
+export declare type ColorPickerProps = ExtractPublicPropTypes<typeof colorPickerProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly value: PropType<string | null>;
     readonly show: {

package/lib/color-picker/src/ColorPicker.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorPickerPanelProps = void 0;
+exports.colorPickerProps = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
 const vooks_1 = require("vooks");
@@ -23,7 +23,7 @@ const ColorPickerSwatches_1 = __importDefault(require("./ColorPickerSwatches"));
 const ColorPreview_1 = __importDefault(require("./ColorPreview"));
 const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
+exports.colorPickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { value: String, show: {
         type: Boolean,
         default: undefined
     }, defaultShow: Boolean, defaultValue: String, modes: {
@@ -45,7 +45,7 @@ exports.colorPickerPanelProps = Object.assign(Object.assign({}, _mixins_1.useThe
     }, internalActions: Array, size: String, renderLabel: Function, onComplete: Function, onConfirm: Function, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'ColorPicker',
-    props: exports.colorPickerPanelProps,
+    props: exports.colorPickerProps,
     setup(props, { slots }) {
         const selfRef = (0, vue_1.ref)(null);
         let upcomingValue = null;

package/lib/countdown/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NCountdown } from './src/Countdown';
-export type { CountdownProps, CountdownTimeInfo } from './src/Countdown';
+export { default as NCountdown, countdownProps } from './src/Countdown';
+export type { CountdownProps, CountdownTimeInfo, CountdownInst } from './src/Countdown';

package/lib/countdown/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NCountdown = void 0;
+exports.countdownProps = exports.NCountdown = void 0;
 var Countdown_1 = require("./src/Countdown");
 Object.defineProperty(exports, "NCountdown", { enumerable: true, get: function () { return __importDefault(Countdown_1).default; } });
+Object.defineProperty(exports, "countdownProps", { enumerable: true, get: function () { return Countdown_1.countdownProps; } });

package/lib/countdown/src/Countdown.d.ts

@@ -6,7 +6,10 @@ export interface CountdownTimeInfo {
     seconds: number;
     milliseconds: number;
 }
-declare const countdownProps: {
+export interface CountdownInst {
+    reset: () => void;
+}
+export declare const countdownProps: {
     duration: {
         type: NumberConstructor;
         default: number;
@@ -38,7 +41,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     render: PropType<(props: CountdownTimeInfo) => VNodeChild>;
     onFinish: PropType<() => void>;
-}, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, CountdownInst & {
+    distance: import("vue").Ref<number>;
+    getTimeInfo: (distance: number) => CountdownTimeInfo;
+    getDisplayValue: (info: CountdownTimeInfo) => string;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     duration: {
         type: NumberConstructor;
         default: number;

package/lib/countdown/src/Countdown.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.countdownProps = void 0;
 const vue_1 = require("vue");
-const countdownProps = {
+exports.countdownProps = {
     duration: {
         type: Number,
         default: 0
@@ -19,7 +20,7 @@ const countdownProps = {
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'Countdown',
-    props: countdownProps,
+    props: exports.countdownProps,
     setup(props) {
         let timerId = null;
         let rafId = null;
@@ -114,32 +115,48 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.onBeforeUnmount)(() => {
             stopTimer();
         });
-        return () => {
-            const { render, precision } = props;
-            const { value: distance } = distanceRef;
-            let timeInfo;
-            switch (precision) {
-                case 0:
-                    timeInfo = getTimeInfo(distance + 999);
-                    timeInfo.milliseconds = 0;
-                    break;
-                case 1:
-                    timeInfo = getTimeInfo(distance + 99);
-                    timeInfo.milliseconds = Math.floor(timeInfo.milliseconds / 100) * 100;
-                    break;
-                case 2:
-                    timeInfo = getTimeInfo(distance + 9);
-                    timeInfo.milliseconds = Math.floor(timeInfo.milliseconds / 10) * 10;
-                    break;
-                case 3:
-                    timeInfo = getTimeInfo(distance);
-            }
-            if (render) {
-                return render(timeInfo);
-            }
-            else {
-                return getDisplayValue(timeInfo);
+        function reset() {
+            distanceRef.value = props.duration;
+            elapsed = 0;
+            pnow = performance.now();
+            if (props.active && finished) {
+                frame();
             }
+            finished = false;
+        }
+        const countdownExposedMethod = {
+            reset
         };
+        return Object.assign(countdownExposedMethod, {
+            distance: distanceRef,
+            getTimeInfo,
+            getDisplayValue
+        });
+    },
+    render() {
+        const { render, precision, distance, getTimeInfo, getDisplayValue } = this;
+        let timeInfo;
+        switch (precision) {
+            case 0:
+                timeInfo = getTimeInfo(distance + 999);
+                timeInfo.milliseconds = 0;
+                break;
+            case 1:
+                timeInfo = getTimeInfo(distance + 99);
+                timeInfo.milliseconds = Math.floor(timeInfo.milliseconds / 100) * 100;
+                break;
+            case 2:
+                timeInfo = getTimeInfo(distance + 9);
+                timeInfo.milliseconds = Math.floor(timeInfo.milliseconds / 10) * 10;
+                break;
+            case 3:
+                timeInfo = getTimeInfo(distance);
+        }
+        if (render) {
+            return render(timeInfo);
+        }
+        else {
+            return getDisplayValue(timeInfo);
+        }
     }
 });

package/lib/data-table/index.d.ts

@@ -1,3 +1,3 @@
-export { default as NDataTable } from './src/DataTable';
+export { default as NDataTable, dataTableProps } from './src/DataTable';
 export type { DataTableProps } from './src/DataTable';
 export type { RowKey as DataTableRowKey, RenderFilter as DataTableRenderFilter, RenderSorter as DataTableRenderSorter, RenderFilterIcon as DataTableRenderFilterIcon, RenderSorterIcon as DataTableRenderSorterIcon, ColumnKey as DataTableColumnKey, TableColumn as DataTableColumn, TableColumns as DataTableColumns, TableBaseColumn as DataTableBaseColumn, TableSelectionColumn as DataTableSelectionColumn, TableExpandColumn as DataTableExpandColumn, CreateRowClassName as DataTableCreateRowClassName, CreateRowKey as DataTableCreateRowKey, CreateRowProps as DataTableCreateRowProps, DataTableInst, CreateSummary as DataTableCreateSummary, FilterState as DataTableFilterState, SortState as DataTableSortState } from './src/interface';

package/lib/data-table/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NDataTable = void 0;
+exports.dataTableProps = exports.NDataTable = void 0;
 var DataTable_1 = require("./src/DataTable");
 Object.defineProperty(exports, "NDataTable", { enumerable: true, get: function () { return __importDefault(DataTable_1).default; } });
+Object.defineProperty(exports, "dataTableProps", { enumerable: true, get: function () { return DataTable_1.dataTableProps; } });

package/lib/data-table/src/TableParts/Body.d.ts

@@ -1176,6 +1176,7 @@ declare const _default: import("vue").DefineComponent<{
             tmNode: TmNode;
             key: import("treemate").Key;
             striped: boolean;
+            index: number;
         }[];
         hasChildren: boolean;
     }>;
@@ -1212,6 +1213,9 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateChecked: (tmNode: {
         key: RowKey;
     }, checked: boolean, shiftKey: boolean) => void;
+    handleRadioUpdateChecked: (tmNode: {
+        key: RowKey;
+    }) => void;
     handleUpdateExpanded: (key: RowKey, tmNode: TmNode | null) => void;
     renderCell: import("vue").Ref<((value: any, rowData: object, column: import("../interface").TableBaseColumn<import("../interface").InternalRowData>) => import("vue").VNodeChild) | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/data-table/src/TableParts/Body.js

@@ -18,24 +18,27 @@ const utils_1 = require("../utils");
 const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
+const BodyRadio_1 = __importDefault(require("./BodyRadio"));
 const Header_1 = __importDefault(require("./Header"));
 function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
-    function traverse(rs) {
+    function traverse(rs, rootIndex) {
         rs.forEach((r) => {
             if (r.children && expandedRowKeys.has(r.key)) {
                 fRows.push({
                     tmNode: r,
                     striped: false,
-                    key: r.key
+                    key: r.key,
+                    index: rootIndex
                 });
-                traverse(r.children);
+                traverse(r.children, rootIndex);
             }
             else {
                 fRows.push({
                     key: r.key,
                     tmNode: r,
-                    striped: false
+                    striped: false,
+                    index: rootIndex
                 });
             }
         });
@@ -44,7 +47,7 @@ function flatten(rowInfos, expandedRowKeys) {
         fRows.push(rowInfo);
         const { children } = rowInfo.tmNode;
         if (children && expandedRowKeys.has(rowInfo.key)) {
-            traverse(children);
+            traverse(children, rowInfo.index);
         }
     });
     return fRows;
@@ -114,7 +117,7 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     });
                     if (checked) {
-                        doCheck(rowKeysToCheck);
+                        doCheck(rowKeysToCheck, false);
                     }
                     else {
                         doUncheck(rowKeysToCheck);
@@ -124,13 +127,16 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
             if (checked) {
-                doCheck(tmNode.key);
+                doCheck(tmNode.key, false);
             }
             else {
                 doUncheck(tmNode.key);
             }
             lastSelectedKey = tmNode.key;
         }
+        function handleRadioUpdateChecked(tmNode) {
+            doCheck(tmNode.key, true);
+        }
         function getScrollContainer() {
             if (!shouldDisplaySomeTablePartRef.value) {
                 const { value: emptyEl } = emptyElRef;
@@ -288,16 +294,18 @@ exports.default = (0, vue_1.defineComponent)({
                         return {
                             tmNode,
                             key: tmNode.key,
-                            striped: index % 2 === 1
+                            striped: index % 2 === 1,
+                            index
                         };
                     }
-                    : (tmNode) => {
+                    : (tmNode, index) => {
                         if (!tmNode.isLeaf)
                             hasChildren = true;
                         return {
                             tmNode,
                             key: tmNode.key,
-                            striped: false
+                            striped: false,
+                            index
                         };
                     });
                 return {
@@ -313,6 +321,7 @@ exports.default = (0, vue_1.defineComponent)({
             virtualListContent,
             handleTableBodyScroll,
             handleCheckboxUpdateChecked,
+            handleRadioUpdateChecked,
             handleUpdateExpanded,
             renderCell }, exposedMethods);
     },
@@ -336,7 +345,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const cordToPass = {};
                 // coordinate to related hover keys
                 const cordKey = {};
-                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, childTriggerColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, childTriggerColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleRadioUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 let mergedData;
                 // if there is children in data, we should expand mergedData first
@@ -355,7 +364,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 tmNode: {
                                     rawNode: row,
                                     disabled: true
-                                }
+                                },
+                                index: -1
                             }))
                         ];
                     }
@@ -368,7 +378,8 @@ exports.default = (0, vue_1.defineComponent)({
                                 tmNode: {
                                     rawNode: summaryRows,
                                     disabled: true
-                                }
+                                },
+                                index: -1
                             }
                         ];
                     }
@@ -386,7 +397,8 @@ exports.default = (0, vue_1.defineComponent)({
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
                             key: `${rowInfo.key}-expand`,
-                            tmNode: rowInfo.tmNode
+                            tmNode: rowInfo.tmNode,
+                            index: rowInfo.index
                         });
                     }
                     else {
@@ -398,26 +410,29 @@ exports.default = (0, vue_1.defineComponent)({
                 paginatedData.forEach(({ tmNode }, rowIndex) => {
                     rowIndexToKey[rowIndex] = tmNode.key;
                 });
-                const renderRow = (rowInfo, rowIndex, isVirtual) => {
+                const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
+                    const { index: actualRowIndex } = rowInfo;
                     if ('isExpandedRow' in rowInfo) {
                         const { tmNode: { key, rawNode } } = rowInfo;
                         return ((0, vue_1.h)("tr", { class: `${mergedClsPrefix}-data-table-tr`, key: `${key}__expand` },
                             (0, vue_1.h)("td", { class: [
                                     `${mergedClsPrefix}-data-table-td`,
                                     `${mergedClsPrefix}-data-table-td--last-col`,
-                                    rowIndex + 1 === rowCount &&
+                                    displayedRowIndex + 1 === rowCount &&
                                         `${mergedClsPrefix}-data-table-td--last-row`
-                                ], colspan: colCount }, renderExpand(rawNode, rowIndex))));
+                                ], colspan: colCount }, renderExpand(rawNode, actualRowIndex))));
                     }
                     const isSummary = 'isSummaryRow' in rowInfo;
                     const striped = !isSummary && rowInfo.striped;
                     const { tmNode, key: rowKey } = rowInfo;
                     const { rawNode: rowData } = tmNode;
                     const expanded = mergedExpandedRowKeySet.has(rowKey);
-                    const props = rowProps ? rowProps(rowData, rowIndex) : undefined;
+                    const props = rowProps
+                        ? rowProps(rowData, actualRowIndex)
+                        : undefined;
                     const mergedRowClassName = typeof rowClassName === 'string'
                         ? rowClassName
-                        : (0, utils_1.createRowClassName)(rowData, rowIndex, rowClassName);
+                        : (0, utils_1.createRowClassName)(rowData, actualRowIndex, rowClassName);
                     const row = ((0, vue_1.h)("tr", Object.assign({ onMouseenter: () => {
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
@@ -427,8 +442,8 @@ exports.default = (0, vue_1.defineComponent)({
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
                         var _a, _b, _c, _d, _e;
-                        if (!isVirtual && rowIndex in cordToPass) {
-                            const cordOfRowToPass = cordToPass[rowIndex];
+                        if (displayedRowIndex in cordToPass) {
+                            const cordOfRowToPass = cordToPass[displayedRowIndex];
                             const indexInCordOfRowToPass = cordOfRowToPass.indexOf(colIndex);
                             if (~indexInCordOfRowToPass) {
                                 cordOfRowToPass.splice(indexInCordOfRowToPass, 1);
@@ -442,29 +457,30 @@ exports.default = (0, vue_1.defineComponent)({
                         const mergedColSpan = isSummary
                             ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
                             : colSpan
-                                ? colSpan(rowData, rowIndex)
+                                ? colSpan(rowData, actualRowIndex)
                                 : 1;
                         const mergedRowSpan = isSummary
                             ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
                             : rowSpan
-                                ? rowSpan(rowData, rowIndex)
+                                ? rowSpan(rowData, actualRowIndex)
                                 : 1;
                         const isLastCol = colIndex + mergedColSpan === colCount;
-                        const isLastRow = rowIndex + mergedRowSpan === rowCount;
+                        const isLastRow = displayedRowIndex + mergedRowSpan === rowCount;
                         const isCrossRowTd = mergedRowSpan > 1;
                         if (isCrossRowTd) {
-                            cordKey[rowIndex] = {
+                            cordKey[displayedRowIndex] = {
                                 [colIndex]: []
                             };
                         }
                         if (mergedColSpan > 1 || isCrossRowTd) {
-                            for (let i = rowIndex; i < rowIndex + mergedRowSpan; ++i) {
+                            for (let i = displayedRowIndex; i < displayedRowIndex + mergedRowSpan; ++i) {
                                 if (isCrossRowTd) {
-                                    cordKey[rowIndex][colIndex].push(rowIndexToKey[i]);
+                                    cordKey[displayedRowIndex][colIndex].push(rowIndexToKey[i]);
                                 }
                                 for (let j = colIndex; j < colIndex + mergedColSpan; ++j) {
-                                    if (i === rowIndex && j === colIndex)
+                                    if (i === displayedRowIndex && j === colIndex) {
                                         continue;
+                                    }
                                     if (!(i in cordToPass)) {
                                         cordToPass[i] = [j];
                                     }
@@ -476,7 +492,7 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                         const hoverKey = isCrossRowTd ? this.hoverKey : null;
                         const { cellProps } = column;
-                        const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, rowIndex);
+                        const resolvedCellProps = cellProps === null || cellProps === void 0 ? void 0 : cellProps(rowData, actualRowIndex);
                         return ((0, vue_1.h)("td", Object.assign({}, resolvedCellProps, { key: colKey, style: [
                                 {
                                     textAlign: column.align || undefined,
@@ -491,7 +507,7 @@ exports.default = (0, vue_1.defineComponent)({
                                 isSummary &&
                                     `${mergedClsPrefix}-data-table-td--summary`,
                                 ((hoverKey !== null &&
-                                    cordKey[rowIndex][colIndex].includes(hoverKey)) ||
+                                    cordKey[displayedRowIndex][colIndex].includes(hoverKey)) ||
                                     (0, utils_1.isColumnSorting)(column, mergedSortState)) &&
                                     `${mergedClsPrefix}-data-table-td--hover`,
                                 column.fixed &&
@@ -513,8 +529,8 @@ exports.default = (0, vue_1.defineComponent)({
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
-                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? ((0, vue_1.h)(BodyRadio_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => handleRadioUpdateChecked(rowInfo.tmNode) })) : ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey) }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };
@@ -524,8 +540,8 @@ exports.default = (0, vue_1.defineComponent)({
                         } },
                         (0, vue_1.h)("colgroup", null, cols.map((col) => ((0, vue_1.h)("col", { key: col.key, style: col.style })))),
                         this.showHeader ? (0, vue_1.h)(Header_1.default, { discrete: false }) : null,
-                        !this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, rowIndex) => {
-                            return renderRow(rowInfo, rowIndex, false);
+                        !this.empty ? ((0, vue_1.h)("tbody", { "data-n-id": componentId, class: `${mergedClsPrefix}-data-table-tbody` }, displayedData.map((rowInfo, displayedRowIndex) => {
+                            return renderRow(rowInfo, displayedRowIndex, false);
                         }))) : null));
                 }
                 else {

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

@@ -0,0 +1,30 @@
+import { PropType } from 'vue';
+import { RowKey } from '../interface';
+declare const _default: import("vue").DefineComponent<{
+    rowKey: {
+        type: PropType<RowKey>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    onUpdateChecked: {
+        type: PropType<(checked: boolean) => void>;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rowKey: {
+        type: PropType<RowKey>;
+        required: true;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    onUpdateChecked: {
+        type: PropType<(checked: boolean) => void>;
+        required: true;
+    };
+}>>, {}>;
+export default _default;