naive-ui 2.20.3 → 2.21.0

package/lib/data-table/src/DataTable.js

@@ -37,7 +37,7 @@ exports.dataTableProps = Object.assign(Object.assign({}, _mixins_1.useTheme.prop
     }, bottomBordered: {
         type: Boolean,
         default: undefined
-    }, scrollX: [Number, String], defaultCheckedRowKeys: {
+    }, striped: Boolean, scrollX: [Number, String], defaultCheckedRowKeys: {
         type: Array,
         default: () => []
     }, checkedRowKeys: Array, singleLine: {
@@ -130,7 +130,7 @@ exports.default = (0, vue_1.defineComponent)({
         const scrollPartRef = (0, vue_1.ref)('body');
         const mainTableInstRef = (0, vue_1.ref)(null);
         const { rowsRef, colsRef, dataRelatedColsRef, hasEllipsisRef } = (0, use_group_header_1.useGroupHeader)(props);
-        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, firstContentfulColIndexRef, doUpdateFilters, deriveNextSorter, filter, filters, clearFilter, clearFilters, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
+        const { treeMateRef, mergedCurrentPageRef, paginatedDataRef, rawPaginatedDataRef, selectionColumnRef, hoverKeyRef, mergedPaginationRef, mergedFilterStateRef, mergedSortStateRef, firstContentfulColIndexRef, doUpdateFilters, deriveNextSorter, filter, filters, clearFilter, clearFilters, clearSorter, page, sort } = (0, use_table_data_1.useTableData)(props, { dataRelatedColsRef });
         const { doCheckAll, doUncheckAll, doCheck, doUncheck, headerCheckboxDisabledRef, someRowsCheckedRef, allRowsCheckedRef, mergedCheckedRowKeySetRef, mergedInderminateRowKeySetRef } = (0, use_check_1.useCheck)(props, {
             selectionColumnRef,
             treeMateRef,
@@ -191,6 +191,7 @@ exports.default = (0, vue_1.defineComponent)({
             summaryRef: (0, vue_1.toRef)(props, 'summary'),
             virtualScrollRef: (0, vue_1.toRef)(props, 'virtualScroll'),
             rowPropsRef: (0, vue_1.toRef)(props, 'rowProps'),
+            stripedRef: (0, vue_1.toRef)(props, 'striped'),
             checkOptionsRef: (0, vue_1.computed)(() => {
                 const { value: selectionColumn } = selectionColumnRef;
                 return selectionColumn === null || selectionColumn === void 0 ? void 0 : selectionColumn.options;
@@ -228,14 +229,15 @@ exports.default = (0, vue_1.defineComponent)({
         const exposedMethods = {
             filter,
             filters,
-            clearFilter,
             clearFilters,
+            clearSorter,
             page,
-            sort
+            sort,
+            clearFilter
         };
         return Object.assign(Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef }, exposedMethods), { cssVars: (0, vue_1.computed)(() => {
                 const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
+                const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('thPadding', size)]: thPadding, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding } } = themeRef.value;
                 return {
                     '--font-size': fontSize,
                     '--th-padding': thPadding,
@@ -272,7 +274,10 @@ exports.default = (0, vue_1.defineComponent)({
                     '--sorter-size': sorterSize,
                     '--loading-size': loadingSize,
                     '--loading-color': loadingColor,
-                    '--opacity-loading': opacityLoading
+                    '--opacity-loading': opacityLoading,
+                    '--td-color-striped': tdColorStriped,
+                    '--td-color-striped-modal': tdColorStripedModal,
+                    '--td-color-striped-popover': tdColorStripedPopover
                 };
             }) });
     },

package/lib/data-table/src/HeaderButton/FilterButton.d.ts

@@ -83,6 +83,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -119,6 +122,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -130,11 +134,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -171,20 +177,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -331,9 +347,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

package/lib/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -108,6 +108,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -144,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -155,11 +159,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -196,20 +202,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -356,9 +372,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;

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

@@ -95,6 +95,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -131,6 +134,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -142,11 +146,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -183,20 +189,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -343,9 +359,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;
@@ -960,7 +975,11 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
-    paginatedData: import("vue").Ref<TmNode[]>;
+    paginatedData: import("vue").ComputedRef<{
+        tmNode: TmNode;
+        key: import("treemate").Key;
+        striped: boolean;
+    }[]>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[]>;
     fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
         start: number;

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

@@ -16,20 +16,34 @@ const Cell_1 = __importDefault(require("./Cell"));
 const ExpandTrigger_1 = __importDefault(require("./ExpandTrigger"));
 const BodyCheckbox_1 = __importDefault(require("./BodyCheckbox"));
 const Header_1 = __importDefault(require("./Header"));
-function flatten(rows, expandedRowKeys) {
+function flatten(rowInfos, expandedRowKeys) {
     const fRows = [];
     function traverse(rs) {
         rs.forEach((r) => {
             if (r.children && expandedRowKeys.has(r.key)) {
-                fRows.push(r);
+                fRows.push({
+                    tmNode: r,
+                    striped: false,
+                    key: r.key
+                });
                 traverse(r.children);
             }
             else {
-                fRows.push(r);
+                fRows.push({
+                    key: r.key,
+                    tmNode: r,
+                    striped: false
+                });
             }
         });
     }
-    traverse(rows);
+    rowInfos.forEach((rowInfo) => {
+        fRows.push(rowInfo);
+        const { children } = rowInfo.tmNode;
+        if (children) {
+            traverse(children);
+        }
+    });
     return fRows;
 }
 const VirtualListItemWrapper = (0, vue_1.defineComponent)({
@@ -64,7 +78,7 @@ exports.default = (0, vue_1.defineComponent)({
         flexHeight: Boolean
     },
     setup(props) {
-        const { mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
+        const { mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, hasChildrenRef, firstContentfulColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         const scrollbarInstRef = (0, vue_1.ref)(null);
@@ -196,7 +210,24 @@ exports.default = (0, vue_1.defineComponent)({
         });
         return Object.assign({ componentId,
             scrollbarInstRef,
-            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: paginatedDataRef, rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, hasChildren: hasChildrenRef, firstContentfulColIndex: firstContentfulColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, setHeaderScrollLeft,
+            virtualListRef, summary: summaryRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: mergedThemeRef, scrollX: scrollXRef, cols: colsRef, paginatedData: (0, vue_1.computed)(() => {
+                const { value: striped } = stripedRef;
+                return paginatedDataRef.value.map(striped
+                    ? (tmNode, index) => {
+                        return {
+                            tmNode,
+                            key: tmNode.key,
+                            striped: index % 2 === 1
+                        };
+                    }
+                    : (tmNode) => {
+                        return {
+                            tmNode,
+                            key: tmNode.key,
+                            striped: false
+                        };
+                    });
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, hasChildren: hasChildrenRef, firstContentfulColIndex: firstContentfulColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, setHeaderScrollLeft,
             handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
@@ -230,7 +261,7 @@ exports.default = (0, vue_1.defineComponent)({
                 const { cols, paginatedData, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, componentId, showHeader, hasChildren, firstContentfulColIndex, rowProps, handleMouseenterTable, handleMouseleaveTable, renderExpand, summary, handleCheckboxUpdateChecked, handleUpdateExpanded } = this;
                 const { length: colCount } = cols;
                 const rowIndexToKey = {};
-                paginatedData.forEach((tmNode, rowIndex) => {
+                paginatedData.forEach(({ tmNode }, rowIndex) => {
                     rowIndexToKey[rowIndex] = tmNode.key;
                 });
                 let mergedData;
@@ -244,10 +275,12 @@ exports.default = (0, vue_1.defineComponent)({
                         mergedData = [
                             ...mergedPaginationData,
                             ...summaryRows.map((row, i) => ({
-                                summary: true,
-                                rawNode: row,
+                                isSummaryRow: true,
                                 key: `__n_summary__${i}`,
-                                disabled: true
+                                tmNode: {
+                                    rawNode: row,
+                                    disabled: true
+                                }
                             }))
                         ];
                     }
@@ -255,10 +288,12 @@ exports.default = (0, vue_1.defineComponent)({
                         mergedData = [
                             ...mergedPaginationData,
                             {
-                                summary: true,
-                                rawNode: summaryRows,
+                                isSummaryRow: true,
                                 key: '__n_summary__',
-                                disabled: true
+                                tmNode: {
+                                    rawNode: summaryRows,
+                                    disabled: true
+                                }
                             }
                         ];
                     }
@@ -281,9 +316,11 @@ exports.default = (0, vue_1.defineComponent)({
                                         `${mergedClsPrefix}-data-table-td--last-row`
                                 ], colspan: colCount }, renderExpand(rawNode, rowIndex))));
                     }
-                    const { rawNode: rowData, key: rowKey } = rowInfo;
-                    const isSummary = 'summary' in rowInfo;
-                    const expanded = mergedExpandedRowKeySet.has(rowInfo.key);
+                    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 mergedRowClassName = typeof rowClassName === 'string'
                         ? rowClassName
@@ -292,6 +329,7 @@ exports.default = (0, vue_1.defineComponent)({
                             this.hoverKey = rowKey;
                         }, key: rowKey, class: [
                             `${mergedClsPrefix}-data-table-tr`,
+                            striped && `${mergedClsPrefix}-data-table-tr--striped`,
                             mergedRowClassName
                         ] }, props), cols.map((col, colIndex) => {
                         var _a, _b, _c, _d, _e;
@@ -308,12 +346,12 @@ exports.default = (0, vue_1.defineComponent)({
                         const colKey = (0, utils_1.getColKey)(col);
                         const { rowSpan, colSpan } = column;
                         const mergedColSpan = isSummary
-                            ? ((_a = rowInfo.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
+                            ? ((_a = rowInfo.tmNode.rawNode[colKey]) === null || _a === void 0 ? void 0 : _a.colSpan) || 1 // optional for #1276
                             : colSpan
                                 ? colSpan(rowData, rowIndex)
                                 : 1;
                         const mergedRowSpan = isSummary
-                            ? ((_b = rowInfo.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
+                            ? ((_b = rowInfo.tmNode.rawNode[colKey]) === null || _b === void 0 ? void 0 : _b.rowSpan) || 1 // optional for #1276
                             : rowSpan
                                 ? rowSpan(rowData, rowIndex)
                                 : 1;
@@ -373,13 +411,13 @@ exports.default = (0, vue_1.defineComponent)({
                             ] },
                             hasChildren && colIndex === firstContentfulColIndex
                                 ? [
-                                    (0, seemly_1.repeat)(isSummary ? 0 : rowInfo.level, (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
-                                    isSummary || !rowInfo.children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => {
+                                    (0, seemly_1.repeat)(isSummary ? 0 : rowInfo.tmNode.level, (0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
+                                    isSummary || !rowInfo.tmNode.children ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : ((0, vue_1.h)(ExpandTrigger_1.default, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => {
                                             handleUpdateExpanded(rowKey);
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? ((0, vue_1.h)(BodyCheckbox_1.default, { key: currentPage, rowKey: rowKey, disabled: rowInfo.disabled, onUpdateChecked: (checked, e) => handleCheckboxUpdateChecked(rowInfo, checked, e.shiftKey) })) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
+                            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, rowIndex)) ? ((0, vue_1.h)(ExpandTrigger_1.default, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey) })) : null) : null) : ((0, vue_1.h)(Cell_1.default, { index: rowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme }))));
                     })));
                     return row;
@@ -391,7 +429,7 @@ exports.default = (0, vue_1.defineComponent)({
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
                             key: rowInfo.key,
-                            tmNode: rowInfo
+                            tmNode: rowInfo.tmNode
                         });
                     }
                     else {

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

@@ -26,7 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
          } = (0, vue_1.inject)(interface_1.dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
-            return ((0, vue_1.h)(checkbox_1.NCheckbox, { disabled: props.disabled, indeterminate: mergedInderminateRowKeySetRef.value.has(rowKey), checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));
+            return ((0, vue_1.h)(checkbox_1.NCheckbox, { privateInsideTable: true, disabled: props.disabled, indeterminate: mergedInderminateRowKeySetRef.value.has(rowKey), checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked }));
         };
     }
 });

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

@@ -88,6 +88,9 @@ declare const _default: import("vue").DefineComponent<{
                 pressedColor: string;
                 opacityDisabled: string;
                 inputColorDisabled: string;
+                buttonColor2: string;
+                buttonColor2Hover: string;
+                buttonColor2Pressed: string;
                 boxShadow1: string;
                 boxShadow2: string;
                 boxShadow3: string;
@@ -124,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeLarge: string;
                 borderColor: string;
                 tdColorHover: string;
+                tdColorStriped: string;
                 thColor: string;
                 thColorHover: string;
                 tdColor: string;
@@ -135,11 +139,13 @@ declare const _default: import("vue").DefineComponent<{
                 thIconColorActive: string;
                 borderColorModal: string;
                 tdColorHoverModal: string;
+                tdColorStripedModal: string;
                 thColorModal: string;
                 thColorHoverModal: string;
                 tdColorModal: string;
                 borderColorPopover: string;
                 tdColorHoverPopover: string;
+                tdColorStripedPopover: string;
                 thColorPopover: string;
                 thColorHoverPopover: string;
                 tdColorPopover: string;
@@ -176,20 +182,30 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: number;
+                    colorOpacitySecondaryHover: number;
+                    colorOpacitySecondaryPressed: number;
+                    colorSecondary: string;
+                    colorSecondaryHover: string;
+                    colorSecondaryPressed: string;
+                    colorTertiary: string;
+                    colorTertiaryHover: string;
+                    colorTertiaryPressed: string;
+                    colorQuaternary: string;
+                    colorQuaternaryHover: string;
+                    colorQuaternaryPressed: string;
                     color: string;
                     colorHover: string;
                     colorPressed: string;
                     colorFocus: string;
                     colorDisabled: string;
                     textColor: string;
+                    textColorTertiary: string;
                     textColorHover: string;
                     textColorPressed: string;
                     textColorFocus: string;
                     textColorDisabled: string;
                     textColorText: string;
-                    textColorTextDepth1: string;
-                    textColorTextDepth2: string;
-                    textColorTextDepth3: string;
                     textColorTextHover: string;
                     textColorTextPressed: string;
                     textColorTextFocus: string;
@@ -336,9 +352,8 @@ declare const _default: import("vue").DefineComponent<{
                     borderDisabledError: string;
                     rippleColorError: string;
                     waveOpacity: string;
-                    fontWeightText: string;
                     fontWeight: string;
-                    fontWeighGhost: string;
+                    fontWeightStrong: string;
                     paddingTiny: string;
                     paddingSmall: string;
                     paddingMedium: string;
@@ -1036,6 +1051,9 @@ declare const _default: import("vue").DefineComponent<{
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1072,6 +1090,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -1083,11 +1102,13 @@ declare const _default: import("vue").DefineComponent<{
             thIconColorActive: string;
             borderColorModal: string;
             tdColorHoverModal: string;
+            tdColorStripedModal: string;
             thColorModal: string;
             thColorHoverModal: string;
             tdColorModal: string;
             borderColorPopover: string;
             tdColorHoverPopover: string;
+            tdColorStripedPopover: string;
             thColorPopover: string;
             thColorHoverPopover: string;
             tdColorPopover: string;
@@ -1124,20 +1145,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: number;
+                colorOpacitySecondaryHover: number;
+                colorOpacitySecondaryPressed: number;
+                colorSecondary: string;
+                colorSecondaryHover: string;
+                colorSecondaryPressed: string;
+                colorTertiary: string;
+                colorTertiaryHover: string;
+                colorTertiaryPressed: string;
+                colorQuaternary: string;
+                colorQuaternaryHover: string;
+                colorQuaternaryPressed: string;
                 color: string;
                 colorHover: string;
                 colorPressed: string;
                 colorFocus: string;
                 colorDisabled: string;
                 textColor: string;
+                textColorTertiary: string;
                 textColorHover: string;
                 textColorPressed: string;
                 textColorFocus: string;
                 textColorDisabled: string;
                 textColorText: string;
-                textColorTextDepth1: string;
-                textColorTextDepth2: string;
-                textColorTextDepth3: string;
                 textColorTextHover: string;
                 textColorTextPressed: string;
                 textColorTextFocus: string;
@@ -1284,9 +1315,8 @@ declare const _default: import("vue").DefineComponent<{
                 borderDisabledError: string;
                 rippleColorError: string;
                 waveOpacity: string;
-                fontWeightText: string;
                 fontWeight: string;
-                fontWeighGhost: string;
+                fontWeightStrong: string;
                 paddingTiny: string;
                 paddingSmall: string;
                 paddingMedium: string;