naive-ui 2.32.0 → 2.32.2

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

@@ -9,6 +9,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     getScrollContainer: () => HTMLElement | null;
     scrollTo: import("../../../scrollbar/src/Scrollbar").ScrollTo;
+    bodyWidth: import("vue").Ref<number | null>;
     dataTableSlots: Readonly<{
         [name: string]: import("vue").Slot | undefined;
     }>;
@@ -658,6 +659,7 @@ declare const _default: import("vue").DefineComponent<{
                     }>;
                 }>;
                 Input: import("../../../_mixins").Theme<"Input", {
+                    countTextColorDisabled: string;
                     countTextColor: string;
                     heightTiny: string;
                     heightSmall: string;
@@ -990,6 +992,7 @@ declare const _default: import("vue").DefineComponent<{
                         }>;
                     }>> | undefined;
                     Input?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Input", {
+                        countTextColorDisabled: string;
                         countTextColor: string;
                         heightTiny: string;
                         heightSmall: string;
@@ -1202,6 +1205,9 @@ declare const _default: import("vue").DefineComponent<{
     rowProps: import("vue").Ref<import("../interface").CreateRowProps<import("../interface").InternalRowData> | undefined>;
     maxHeight: import("vue").Ref<string | number | undefined>;
     loadingKeySet: import("vue").Ref<Set<RowKey>>;
+    expandable: import("vue").Ref<import("../interface").Expandable<any> | undefined>;
+    stickyExpandedRows: import("vue").Ref<boolean>;
+    renderExpandIcon: import("vue").Ref<(() => import("vue").VNodeChild) | undefined>;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     handleMouseenterTable: () => void;
     handleVirtualListScroll: (e: Event) => void;

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

@@ -80,7 +80,7 @@ export default defineComponent({
         bodyStyle: Object
     },
     setup(props) {
-        const { slots: dataTableSlots, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
+        const { slots: dataTableSlots, bodyWidthRef, mergedExpandedRowKeysRef, mergedClsPrefixRef, mergedThemeRef, scrollXRef, colsRef, paginatedDataRef, rawPaginatedDataRef, fixedColumnLeftMapRef, fixedColumnRightMapRef, mergedCurrentPageRef, rowClassNameRef, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, renderExpandRef, hoverKeyRef, summaryRef, mergedSortStateRef, virtualScrollRef, componentId, scrollPartRef, mergedTableLayoutRef, childTriggerColIndexRef, indentRef, rowPropsRef, maxHeightRef, stripedRef, loadingRef, onLoadRef, loadingKeySetRef, expandableRef, stickyExpandedRowsRef, renderExpandIconRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -275,7 +275,7 @@ export default defineComponent({
                 id: `n-${componentId}`
             });
         });
-        return Object.assign({ dataTableSlots,
+        return Object.assign({ bodyWidth: bodyWidthRef, dataTableSlots,
             componentId,
             scrollbarInstRef,
             virtualListRef,
@@ -307,7 +307,7 @@ export default defineComponent({
                     data,
                     hasChildren
                 };
-            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, setHeaderScrollLeft,
+            }), rawPaginatedData: rawPaginatedDataRef, fixedColumnLeftMap: fixedColumnLeftMapRef, fixedColumnRightMap: fixedColumnRightMapRef, currentPage: mergedCurrentPageRef, rowClassName: rowClassNameRef, renderExpand: renderExpandRef, mergedExpandedRowKeySet: mergedExpandedRowKeySetRef, hoverKey: hoverKeyRef, mergedSortState: mergedSortStateRef, virtualScroll: virtualScrollRef, mergedTableLayout: mergedTableLayoutRef, childTriggerColIndex: childTriggerColIndexRef, indent: indentRef, rowProps: rowPropsRef, maxHeight: maxHeightRef, loadingKeySet: loadingKeySetRef, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, setHeaderScrollLeft,
             handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
@@ -340,7 +340,7 @@ export default 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, handleRadioUpdateChecked, handleUpdateExpanded } = this;
+                const { cols, paginatedDataAndInfo, mergedTheme, fixedColumnLeftMap, fixedColumnRightMap, currentPage, rowClassName, mergedSortState, mergedExpandedRowKeySet, stickyExpandedRows, componentId, childTriggerColIndex, expandable, 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
@@ -388,7 +388,9 @@ export default defineComponent({
                 // Tile the data of the expanded row
                 const displayedData = [];
                 mergedData.forEach((rowInfo) => {
-                    if (renderExpand && mergedExpandedRowKeySet.has(rowInfo.key)) {
+                    if (renderExpand &&
+                        mergedExpandedRowKeySet.has(rowInfo.key) &&
+                        (!expandable || expandable(rowInfo.tmNode.rawNode))) {
                         displayedData.push(rowInfo, {
                             isExpandedRow: true,
                             key: `${rowInfo.key}-expand`,
@@ -405,6 +407,8 @@ export default defineComponent({
                 paginatedData.forEach(({ tmNode }, rowIndex) => {
                     rowIndexToKey[rowIndex] = tmNode.key;
                 });
+                const bodyWidth = stickyExpandedRows ? this.bodyWidth : null;
+                const bodyWidthPx = bodyWidth === null ? undefined : `${bodyWidth}px`;
                 const renderRow = (rowInfo, displayedRowIndex, isVirtual) => {
                     const { index: actualRowIndex } = rowInfo;
                     if ('isExpandedRow' in rowInfo) {
@@ -415,7 +419,9 @@ export default defineComponent({
                                     `${mergedClsPrefix}-data-table-td--last-col`,
                                     displayedRowIndex + 1 === rowCount &&
                                         `${mergedClsPrefix}-data-table-td--last-row`
-                                ], colspan: colCount }, renderExpand(rawNode, actualRowIndex))));
+                                ], colspan: colCount }, stickyExpandedRows ? (h("div", { class: `${mergedClsPrefix}-data-table-expand`, style: {
+                                    width: bodyWidthPx
+                                } }, renderExpand(rawNode, actualRowIndex))) : (renderExpand(rawNode, actualRowIndex)))));
                     }
                     const isSummary = 'isSummaryRow' in rowInfo;
                     const striped = !isSummary && rowInfo.striped;
@@ -509,23 +515,25 @@ export default defineComponent({
                                     `${mergedClsPrefix}-data-table-td--fixed-${column.fixed}`,
                                 column.align &&
                                     `${mergedClsPrefix}-data-table-td--${column.align}-align`,
-                                {
-                                    [`${mergedClsPrefix}-data-table-td--selection`]: column.type === 'selection',
-                                    [`${mergedClsPrefix}-data-table-td--expand`]: column.type === 'expand',
-                                    [`${mergedClsPrefix}-data-table-td--last-col`]: isLastCol,
-                                    [`${mergedClsPrefix}-data-table-td--last-row`]: isLastRow
-                                }
+                                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(isSummary ? 0 : rowInfo.tmNode.level, h("div", { class: `${mergedClsPrefix}-data-table-indent`, style: indentStyle })),
-                                    isSummary || rowInfo.tmNode.isLeaf ? (h("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : (h(ExpandTrigger, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
+                                    isSummary || rowInfo.tmNode.isLeaf ? (h("div", { class: `${mergedClsPrefix}-data-table-expand-placeholder` })) : (h(ExpandTrigger, { class: `${mergedClsPrefix}-data-table-expand-trigger`, clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, loading: loadingKeySet.has(rowInfo.key), onClick: () => {
                                             handleUpdateExpanded(rowKey, rowInfo.tmNode);
                                         } }))
                                 ]
                                 : null,
                             column.type === 'selection' ? (!isSummary ? (column.multiple === false ? (h(RenderSafeRadio, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => handleRadioUpdateChecked(rowInfo.tmNode) })) : (h(RenderSafeCheckbox, { 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)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : (h(Cell, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
+                                ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => handleUpdateExpanded(rowKey, null) })) : null) : null) : (h(Cell, { clsPrefix: mergedClsPrefix, index: actualRowIndex, row: rowData, column: column, isSummary: isSummary, mergedTheme: mergedTheme, renderCell: this.renderCell }))));
                     })));
                     return row;
                 };

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

@@ -644,6 +644,7 @@ declare const _default: import("vue").DefineComponent<{
                         }>;
                     }>;
                     Input: import("../../../_mixins").Theme<"Input", {
+                        countTextColorDisabled: string;
                         countTextColor: string;
                         heightTiny: string;
                         heightSmall: string;
@@ -976,6 +977,7 @@ declare const _default: import("vue").DefineComponent<{
                             }>;
                         }>> | undefined;
                         Input?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Input", {
+                            countTextColorDisabled: string;
                             countTextColor: string;
                             heightTiny: string;
                             heightSmall: string;
@@ -1798,6 +1800,7 @@ declare const _default: import("vue").DefineComponent<{
                         }>;
                     }>;
                     Input: import("../../../_mixins").Theme<"Input", {
+                        countTextColorDisabled: string;
                         countTextColor: string;
                         heightTiny: string;
                         heightSmall: string;
@@ -2130,6 +2133,7 @@ declare const _default: import("vue").DefineComponent<{
                             }>;
                         }>> | undefined;
                         Input?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Input", {
+                            countTextColorDisabled: string;
                             countTextColor: string;
                             heightTiny: string;
                             heightSmall: string;

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

@@ -1,4 +1,4 @@
-import { PropType } from 'vue';
+import { PropType, VNodeChild } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
@@ -10,6 +10,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<() => void>;
         required: true;
     };
+    renderExpandIcon: {
+        type: PropType<() => VNodeChild>;
+    };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     clsPrefix: {
         type: StringConstructor;
@@ -21,6 +24,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<() => void>;
         required: true;
     };
+    renderExpandIcon: {
+        type: PropType<() => VNodeChild>;
+    };
 }>>, {
     expanded: boolean;
     loading: boolean;

package/es/data-table/src/TableParts/ExpandTrigger.js

@@ -13,17 +13,23 @@ export default defineComponent({
         onClick: {
             type: Function,
             required: true
+        },
+        renderExpandIcon: {
+            type: Function
         }
     },
     render() {
-        return (h(NBaseIcon, { class: `${this.clsPrefix}-data-table-expand-trigger`, clsPrefix: this.clsPrefix, onClick: this.onClick }, {
-            default: () => {
-                return (h(NIconSwitchTransition, null, {
-                    default: () => this.loading ? (h(NBaseLoading, { clsPrefix: this.clsPrefix, radius: 85, strokeWidth: 15, scale: 0.88 })) : (h(ChevronRightIcon, { class: `${this.clsPrefix}-data-table-expand-trigger__icon`, style: this.expanded
-                            ? 'transform: rotate(90deg);'
-                            : undefined }))
-                }));
-            }
-        }));
+        const { clsPrefix } = this;
+        return (h("div", { class: [
+                `${clsPrefix}-data-table-expand-trigger`,
+                this.expanded && `${clsPrefix}-data-table-expand-trigger--expanded`
+            ], onClick: this.onClick },
+            h(NIconSwitchTransition, null, {
+                default: () => {
+                    return this.loading ? (h(NBaseLoading, { key: "loading", clsPrefix: this.clsPrefix, radius: 85, strokeWidth: 15, scale: 0.88 })) : this.renderExpandIcon ? (this.renderExpandIcon()) : (h(NBaseIcon, { clsPrefix: clsPrefix, key: "base-icon" }, {
+                        default: () => h(ChevronRightIcon, null)
+                    }));
+                }
+            })));
     }
 });

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

@@ -647,6 +647,7 @@ declare const _default: import("vue").DefineComponent<{
                     }>;
                 }>;
                 Input: import("../../../_mixins").Theme<"Input", {
+                    countTextColorDisabled: string;
                     countTextColor: string;
                     heightTiny: string;
                     heightSmall: string;
@@ -979,6 +980,7 @@ declare const _default: import("vue").DefineComponent<{
                         }>;
                     }>> | undefined;
                     Input?: import("../../../_mixins/use-theme").ExtractThemeOverrides<import("../../../_mixins").Theme<"Input", {
+                        countTextColorDisabled: string;
                         countTextColor: string;
                         heightTiny: string;
                         heightSmall: string;
@@ -1154,7 +1156,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
-    checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions | undefined>;
+    checkOptions: import("vue").Ref<import("../interface").DataTableSelectionOptions<import("../interface").InternalRowData> | undefined>;
     mergedTableLayout: import("vue").Ref<"fixed" | "auto">;
     headerCheckboxDisabled: import("vue").Ref<boolean>;
     handleMouseenter: () => void;

package/es/data-table/src/interface.d.ts

@@ -84,7 +84,7 @@ export declare type TableSelectionColumn<T = InternalRowData> = {
     type: 'selection';
     multiple?: boolean;
     disabled?: (row: T) => boolean;
-    options?: DataTableSelectionOptions;
+    options?: DataTableSelectionOptions<T>;
     sorter?: never;
     filter?: never;
     filterOptions?: never;
@@ -103,10 +103,10 @@ export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelect
 }
 export declare type TableColumn<T = InternalRowData> = TableColumnGroup<T> | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
 export declare type TableColumns<T = InternalRowData> = Array<TableColumn<T>>;
-export declare type DataTableSelectionOptions = Array<DataTableSelectionOption | {
+export declare type DataTableSelectionOptions<T = InternalRowData> = Array<DataTableSelectionOption | {
     label: string;
     key: string | number;
-    onSelect: () => void;
+    onSelect: (pageData: T[]) => void;
 }>;
 export interface DataTableInjection {
     slots: Slots;
@@ -164,6 +164,9 @@ export interface DataTableInjection {
     onLoadRef: Ref<DataTableOnLoad | undefined>;
     loadingKeySetRef: Ref<Set<RowKey>>;
     paginationBehaviorOnFilterRef: Ref<'current' | 'first'>;
+    expandableRef: Ref<Expandable<any> | undefined>;
+    stickyExpandedRowsRef: Ref<boolean>;
+    renderExpandIconRef: Ref<undefined | (() => VNodeChild)>;
     doUpdatePage: (page: number) => void;
     doUpdateExpandedRowKeys: (keys: RowKey[]) => void;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;

package/es/data-table/src/styles/index.cssr.js

@@ -83,6 +83,7 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  display: inline-block;
  height: 1px;
  `), cB('data-table-expand-trigger', `
+ display: inline-flex;
  margin-right: 8px;
  cursor: pointer;
  font-size: 16px;
@@ -92,7 +93,11 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  height: 16px;
  color: var(--n-td-text-color);
  transition: color .3s var(--n-bezier);
- `, [cB('base-loading', `
+ `, [cM('expanded', [cB('icon', 'transform: rotate(90deg);', [iconSwitchTransition({
+  originalTransform: 'rotate(90deg)'
+})]), cB('base-icon', 'transform: rotate(90deg);', [iconSwitchTransition({
+  originalTransform: 'rotate(90deg)'
+})])]), cB('base-loading', `
  color: var(--n-loading-color);
  transition: color .3s var(--n-bezier);
  position: absolute;
@@ -100,20 +105,33 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  right: 0;
  top: 0;
  bottom: 0;
- `, [iconSwitchTransition()]), cE('icon', `
+ `, [iconSwitchTransition()]), cB('icon', `
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
- `, [iconSwitchTransition()])]), cB('data-table-thead', {
-  transition: 'background-color .3s var(--n-bezier)',
-  backgroundColor: 'var(--n-merged-th-color)'
-}), cB('data-table-tr', `
+ `, [iconSwitchTransition()]), cB('base-icon', `
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `, [iconSwitchTransition()])]), cB('data-table-thead', `
+ transition: background-color .3s var(--n-bezier);
+ background-color: var(--n-merged-th-color);
+ `), cB('data-table-tr', `
  box-sizing: border-box;
  background-clip: padding-box;
  transition: background-color .3s var(--n-bezier);
- `, [cM('striped', 'background-color: var(--n-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--n-merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--n-merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--n-merged-td-color-hover);')])])]), cB('data-table-th', `
+ `, [cB('data-table-expand', `
+ position: sticky;
+ left: 0;
+ overflow: hidden;
+ margin: calc(var(--n-th-padding) * -1);
+ padding: var(--n-th-padding);
+ box-sizing: border-box;
+ `), cM('striped', 'background-color: var(--n-merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--n-merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--n-merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--n-merged-td-color-hover);')])])]), cB('data-table-th', `
  padding: var(--n-th-padding);
  position: relative;
  text-align: start;

package/es/data-table/src/use-expand.d.ts

@@ -1,9 +1,11 @@
 import { Ref } from 'vue';
 import { TreeMate } from 'treemate';
 import type { DataTableSetupProps } from './DataTable';
-import type { InternalRowData, RowKey } from './interface';
+import type { Expandable, InternalRowData, RowKey } from './interface';
 export declare function useExpand(props: DataTableSetupProps, treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>): {
+    stickyExpandedRowsRef: Ref<boolean>;
     mergedExpandedRowKeysRef: import("vue").ComputedRef<import("treemate").Key[]>;
     renderExpandRef: import("vue").ComputedRef<import("./interface").RenderExpand<any> | undefined>;
+    expandableRef: import("vue").ComputedRef<Expandable<any> | undefined>;
     doUpdateExpandedRowKeys: (expandedKeys: RowKey[]) => void;
 };

package/es/data-table/src/use-expand.js

@@ -13,20 +13,24 @@ export function useExpand(props, treeMateRef) {
             }
         }
     });
-    // It's not reactive
-    let expandable;
-    for (const col of props.columns) {
-        if (col.type === 'expand') {
-            expandable = col.expandable;
-            break;
+    const expandableRef = useMemo(() => {
+        // It's not reactive
+        let expandable;
+        for (const col of props.columns) {
+            if (col.type === 'expand') {
+                expandable = col.expandable;
+                break;
+            }
         }
-    }
+        return expandable;
+    });
     const uncontrolledExpandedRowKeysRef = ref(props.defaultExpandAll
         ? (renderExpandRef === null || renderExpandRef === void 0 ? void 0 : renderExpandRef.value)
             ? (() => {
                 const expandedKeys = [];
                 treeMateRef.value.treeNodes.forEach((tmNode) => {
-                    if (expandable === null || expandable === void 0 ? void 0 : expandable(tmNode.rawNode)) {
+                    var _a;
+                    if ((_a = expandableRef.value) === null || _a === void 0 ? void 0 : _a.call(expandableRef, tmNode.rawNode)) {
                         expandedKeys.push(tmNode.key);
                     }
                 });
@@ -35,6 +39,7 @@ export function useExpand(props, treeMateRef) {
             : treeMateRef.value.getNonLeafKeys()
         : props.defaultExpandedRowKeys);
     const controlledExpandedRowKeysRef = toRef(props, 'expandedRowKeys');
+    const stickyExpandedRowsRef = toRef(props, 'stickyExpandedRows');
     const mergedExpandedRowKeysRef = useMergedState(controlledExpandedRowKeysRef, uncontrolledExpandedRowKeysRef);
     function doUpdateExpandedRowKeys(expandedKeys) {
         const { onUpdateExpandedRowKeys, 'onUpdate:expandedRowKeys': _onUpdateExpandedRowKeys } = props;
@@ -47,8 +52,10 @@ export function useExpand(props, treeMateRef) {
         uncontrolledExpandedRowKeysRef.value = expandedKeys;
     }
     return {
+        stickyExpandedRowsRef,
         mergedExpandedRowKeysRef,
         renderExpandRef,
+        expandableRef,
         doUpdateExpandedRowKeys
     };
 }

package/es/data-table/src/use-group-header.js

@@ -73,7 +73,7 @@ function getRowsAndCols(columns) {
                 const isLast = currentLeafIndex + colSpan === totalRowSpan;
                 const rowItem = {
                     column,
-                    colSpan: colSpan,
+                    colSpan,
                     rowSpan: maxDepth - currentDepth + 1,
                     isLast
                 };

package/es/data-table/src/use-sorter.js

@@ -165,7 +165,7 @@ export function useSorter(props, { dataRelatedColsRef, filteredDataRef }) {
             deriveNextSorter({
                 columnKey,
                 sorter,
-                order: order
+                order
             });
         }
     }

package/es/data-table/src/use-table-data.js

@@ -302,7 +302,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
         paginatedDataRef,
         rawPaginatedDataRef,
         mergedFilterStateRef,
-        mergedSortStateRef: mergedSortStateRef,
+        mergedSortStateRef,
         hoverKeyRef: ref(null),
         selectionColumnRef,
         childTriggerColIndexRef,

package/es/data-table/styles/light.d.ts

@@ -567,6 +567,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
             }>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/date-picker/src/DatePicker.d.ts

@@ -135,6 +135,7 @@ export declare const datePickerProps: {
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -624,6 +625,7 @@ export declare const datePickerProps: {
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -753,6 +755,7 @@ export declare const datePickerProps: {
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1242,6 +1245,7 @@ export declare const datePickerProps: {
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -1371,6 +1375,7 @@ export declare const datePickerProps: {
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1860,6 +1865,7 @@ export declare const datePickerProps: {
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2058,6 +2064,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2547,6 +2554,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2676,6 +2684,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3165,6 +3174,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -3294,6 +3304,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3783,6 +3794,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -4160,6 +4172,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -4649,6 +4662,7 @@ declare const _default: import("vue").DefineComponent<{
                     rippleDuration: string;
                 }, any>;
                 Input: import("../../_mixins").Theme<"Input", {
+                    countTextColorDisabled: string;
                     countTextColor: string;
                     heightTiny: string;
                     heightSmall: string;
@@ -4936,6 +4950,7 @@ declare const _default: import("vue").DefineComponent<{
                         rippleDuration: string;
                     }, any>> | undefined;
                     Input?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+                        countTextColorDisabled: string;
                         countTextColor: string;
                         heightTiny: string;
                         heightSmall: string;
@@ -5007,8 +5022,8 @@ declare const _default: import("vue").DefineComponent<{
     actions: import("vue").ComputedRef<string[] | undefined>;
     triggerCssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
-        '--n-icon-color': string;
-        '--n-icon-color-disabled': string;
+        '--n-icon-color-override': string;
+        '--n-icon-color-disabled-override': string;
     }> | undefined;
     triggerThemeClass: Ref<string> | undefined;
     triggerOnRender: (() => void) | undefined;
@@ -5191,6 +5206,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -5680,6 +5696,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -5809,6 +5826,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -6298,6 +6316,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -6427,6 +6446,7 @@ declare const _default: import("vue").DefineComponent<{
         calendarRightPaddingYearrange: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -6916,6 +6936,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;