naive-ui 2.23.1 → 2.24.2

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

@@ -9,15 +9,17 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<() => void>;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-    expanded?: unknown;
-    onClick?: unknown;
-} & {
-    expanded: boolean;
-    onClick: () => void;
-    clsPrefix: string;
-} & {}>, {
+}, 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;
+        required: true;
+    };
+    expanded: BooleanConstructor;
+    onClick: {
+        type: PropType<() => void>;
+        required: true;
+    };
+}>>, {
     expanded: boolean;
 }>;
 export default _default;

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

@@ -539,6 +539,7 @@ declare const _default: import("vue").DefineComponent<{
                         clearColorHover: string;
                         clearColorPressed: string;
                         paddingSingle: string;
+                        paddingMultiple: string;
                         clearSize: string;
                         arrowSize: string;
                     }, {
@@ -798,6 +799,7 @@ declare const _default: import("vue").DefineComponent<{
                             clearColorHover: string;
                             clearColorPressed: string;
                             paddingSingle: string;
+                            paddingMultiple: string;
                             clearSize: string;
                             arrowSize: string;
                         }, {
@@ -981,11 +983,12 @@ declare const _default: import("vue").DefineComponent<{
     handleCheckboxUpdateChecked: () => void;
     handleColHeaderClick: (e: MouseEvent, column: TableBaseColumn) => void;
     handleTableHeaderScroll: (e: Event) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    discrete?: unknown;
-} & {
-    discrete: boolean;
-} & {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    discrete: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
     discrete: boolean;
 }>;
 export default _default;

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

@@ -10,9 +10,10 @@ declare const _default: import("vue").DefineComponent<{
         label: string;
         key: string | number;
     }[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    clsPrefix?: unknown;
-} & {
-    clsPrefix: 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<{
+    clsPrefix: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { TreeNode } from 'treemate';
-import { CSSProperties, InjectionKey, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
+import { CSSProperties, Ref, VNodeChild, HTMLAttributes, Slots } from 'vue';
 import { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import { NLocale } from '../../locales';
 import { MergedTheme } from '../../_mixins';
@@ -33,7 +33,7 @@ export declare type SortOrder = 'ascend' | 'descend' | false;
 export declare type Ellipsis = boolean | EllipsisProps;
 export interface CommonColumnInfo {
     fixed?: 'left' | 'right';
-    width?: number;
+    width?: number | string;
     className?: string;
     align?: 'left' | 'center' | 'right';
     ellipsis?: Ellipsis;
@@ -65,9 +65,10 @@ export declare type TableBaseColumn<T = InternalRowData> = {
     defaultFilterOptionValue?: FilterOptionValue | null;
     filterMultiple?: boolean;
     render?: (rowData: T, rowIndex: number) => VNodeChild;
-    renderSorter?: RenderSorter;
     renderFilter?: RenderFilter;
-    renderFilterIcon?: RenderFilter;
+    renderFilterIcon?: RenderFilterIcon;
+    renderSorter?: RenderSorter;
+    renderSorterIcon?: RenderSorterIcon;
     renderFilterMenu?: RenderFilterMenu;
     colSpan?: (rowData: T, rowIndex: number) => number;
     rowSpan?: (rowData: T, rowIndex: number) => number;
@@ -92,7 +93,7 @@ export interface TableExpandColumn<T = InternalRowData> extends Omit<TableSelect
     renderExpand: RenderExpand<T>;
     expandable?: Expandable<T>;
 }
-export declare type TableColumn<T = InternalRowData> = TableColumnGroup | TableBaseColumn<T> | TableSelectionColumn<T> | TableExpandColumn<T>;
+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 | {
     label: string;
@@ -165,7 +166,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
 }
-export declare const dataTableInjectionKey: InjectionKey<DataTableInjection>;
+export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;
 export interface MainTableInjection {
     leftActiveFixedColKey: ColumnKey | null;
     rightActiveFixedColKey: ColumnKey | null;
@@ -174,9 +175,11 @@ export declare type RenderFilter = (props: {
     active: boolean;
     show: boolean;
 }) => VNodeChild;
+export declare type RenderFilterIcon = RenderFilter;
 export declare type RenderSorter = (props: {
-    order: SortOrder | false;
+    order: SortOrder;
 }) => VNodeChild;
+export declare type RenderSorterIcon = RenderSorter;
 export declare type RenderFilterMenu = (actions: {
     hide: () => void;
 }) => VNodeChild;

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

@@ -1 +1,2 @@
-export const dataTableInjectionKey = Symbol('dataTable');
+import { createInjectionKey } from '../../_utils';
+export const dataTableInjectionKey = createInjectionKey('n-data-table');

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

@@ -1,58 +1,58 @@
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr';
 import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr';
 const fixedColumnStyle = createFixedColumnStyle(); // vars:
-// --font-size
-// --th-padding
-// --td-padding
-// --bezier
-// --border-radius
-// --line-height
-// --border-color
-// --border-color-modal
-// --border-color-popover
-// --th-color
-// --th-color-hover
-// --th-color-modal
-// --th-color-hover-modal
-// --th-color-popover
-// --th-color-hover-popover
-// --td-color
-// --td-color-hover
-// --td-color-modal
-// --td-color-hover-modal
-// --td-color-popover
-// --td-color-hover-popover
-// --th-text-color
-// --td-text-color
-// --th-font-weight
-// --th-button-color-hover
-// --th-icon-color
-// --th-icon-color-active
-// --filter-size
-// --action-divider-color
-// --action-padding
-// --action-button-margin
-// --pagination-margin
-// --empty-padding
-// --sorter-size
-// --loading-size
-// --loading-color
-// --opacity-loading
-// --box-shadow-before used in Body.tsx
-// --box-shadow-after used in Body.tsx
+// --n-font-size
+// --n-th-padding
+// --n-td-padding
+// --n-bezier
+// --n-border-radius
+// --n-line-height
+// --n-border-color
+// --n-border-color-modal
+// --n-border-color-popover
+// --n-th-color
+// --n-th-color-hover
+// --n-th-color-modal
+// --n-th-color-hover-modal
+// --n-th-color-popover
+// --n-th-color-hover-popover
+// --n-td-color
+// --n-td-color-hover
+// --n-td-color-modal
+// --n-td-color-hover-modal
+// --n-td-color-popover
+// --n-td-color-hover-popover
+// --n-th-text-color
+// --n-td-text-color
+// --n-th-font-weight
+// --n-th-button-color-hover
+// --n-th-icon-color
+// --n-th-icon-color-active
+// --n-filter-size
+// --n-action-divider-color
+// --n-action-padding
+// --n-action-button-margin
+// --n-pagination-margin
+// --n-empty-padding
+// --n-sorter-size
+// --n-loading-size
+// --n-loading-color
+// --n-opacity-loading
+// --n-box-shadow-before used in Body.tsx
+// --n-box-shadow-after used in Body.tsx
 
 export default c([cB('data-table', `
  width: 100%;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: flex;
  flex-direction: column;
  position: relative;
- --merged-th-color: var(--th-color);
- --merged-td-color: var(--td-color);
- --merged-border-color: var(--border-color);
- --merged-th-color-hover: var(--th-color-hover);
- --merged-td-color-hover: var(--td-color-hover);
- --merged-td-color-striped: var(--td-color-striped);
+ --n-merged-th-color: var(--n-th-color);
+ --n-merged-td-color: var(--n-td-color);
+ --n-merged-border-color: var(--n-border-color);
+ --n-merged-th-color-hover: var(--n-th-color-hover);
+ --n-merged-td-color-hover: var(--n-td-color-hover);
+ --n-merged-td-color-striped: var(--n-td-color-striped);
  `, [cB('data-table-wrapper', `
  flex-grow: 1;
  display: flex;
@@ -64,13 +64,13 @@ export default c([cB('data-table', `
  `, [c('>', [cB('data-table-base-table-body', 'flex-basis: 0;', [// last-child means there is no empty icon
 // body is a scrollbar, we need to override height 100%
 c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
- color: var(--loading-color);
- font-size: var(--loading-size);
+ color: var(--n-loading-color);
+ font-size: var(--n-loading-size);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `, [fadeInScaleUpTransition({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })])]), cB('data-table-expand-trigger', 'cursor: pointer;'), cB('data-table-expand-placeholder', `
@@ -87,26 +87,26 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  font-size: 16px;
  vertical-align: -0.2em;
  `), cB('data-table-thead', {
-  transition: 'background-color .3s var(--bezier)',
-  backgroundColor: 'var(--merged-th-color)'
+  transition: 'background-color .3s var(--n-bezier)',
+  backgroundColor: 'var(--n-merged-th-color)'
 }), cB('data-table-tr', `
  box-sizing: border-box;
  background-clip: padding-box;
- transition: background-color .3s var(--bezier);
- `, [cM('striped', 'background-color: var(--merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--merged-td-color-striped);')]), cNotM('summary', [c('&:hover', 'background-color: var(--merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--merged-td-color-hover);')])])]), cB('data-table-th', `
- padding: var(--th-padding);
+ 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', `
+ padding: var(--n-th-padding);
  position: relative;
  text-align: start;
  box-sizing: border-box;
- background-color: var(--merged-th-color);
- border-color: var(--merged-border-color);
- border-bottom: 1px solid var(--merged-border-color);
- color: var(--th-text-color);
+ background-color: var(--n-merged-th-color);
+ border-color: var(--n-merged-border-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
+ color: var(--n-th-text-color);
  transition:
- border-color .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
- font-weight: var(--th-font-weight);
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ font-weight: var(--n-th-font-weight);
  `, [cM('filterable', {
   paddingRight: '36px'
 }), fixedColumnStyle, cM('selection', `
@@ -122,30 +122,30 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  white-space: nowrap;
  max-width: 100%;
  `), cM('hover', {
-  backgroundColor: 'var(--merged-th-color-hover)'
+  backgroundColor: 'var(--n-merged-th-color-hover)'
 }), cM('sortable', {
   cursor: 'pointer'
 }, [cE('ellipsis', {
   maxWidth: 'calc(100% - 18px)'
 }), c('&:hover', {
-  backgroundColor: 'var(--merged-th-color-hover)'
+  backgroundColor: 'var(--n-merged-th-color-hover)'
 })]), cB('data-table-sorter', `
- height: var(--sorter-size);
- width: var(--sorter-size);
+ height: var(--n-sorter-size);
+ width: var(--n-sorter-size);
  margin-left: 4px;
  position: relative;
  display: inline-flex;
+ align-items: center;
+ justify-content: center;
  vertical-align: -0.2em;
- color: var(--th-icon-color);
- transition: 
- transform .3s var(--bezier),
- color .3s var(--bezier);
- `, [cM('desc', {
-  transform: 'rotate(0)'
-}), cM('asc', {
+ color: var(--n-th-icon-color);
+ transition: color .3s var(--n-bezier);
+ `, [cB('base-icon', 'transition: transform .3s var(--n-bezier)'), cM('desc', [cB('base-icon', {
+  transform: 'rotate(0deg)'
+})]), cM('asc', [cB('base-icon', {
   transform: 'rotate(-180deg)'
-}), cM('asc, desc', {
-  color: 'var(--th-icon-color-active)'
+})]), cM('asc, desc', {
+  color: 'var(--n-th-icon-color-active)'
 })]), cB('data-table-filter', `
  position: absolute;
  z-index: auto;
@@ -158,32 +158,32 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  justify-content: center;
  align-items: center;
  transition:
- background-color .3s var(--bezier),
- color .3s var(--bezier);
- font-size: var(--filter-size);
- color: var(--th-icon-color);
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ font-size: var(--n-filter-size);
+ color: var(--n-th-icon-color);
  `, [c('&:hover', `
- background-color: var(--th-button-color-hover);
+ background-color: var(--n-th-button-color-hover);
  `), cM('show', `
- background-color: var(--th-button-color-hover);
+ background-color: var(--n-th-button-color-hover);
  `), cM('active', `
- background-color: var(--th-button-color-hover);
- color: var(--th-icon-color-active);
+ background-color: var(--n-th-button-color-hover);
+ color: var(--n-th-icon-color-active);
  `)])]), cB('data-table-td', `
- padding: var(--td-padding);
+ padding: var(--n-td-padding);
  text-align: start;
  box-sizing: border-box;
  border: none;
- background-color: var(--merged-td-color);
- color: var(--td-text-color);
- border-bottom: 1px solid var(--merged-border-color);
+ background-color: var(--n-merged-td-color);
+ color: var(--n-td-text-color);
+ border-bottom: 1px solid var(--n-merged-border-color);
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  `, [cM('last-row', {
-  borderBottom: '0 solid var(--merged-border-color)'
+  borderBottom: '0 solid var(--n-merged-border-color)'
 }, [// make sure there is no overlap between bottom border and
 // fixed column box shadow
 c('&::after', {
@@ -191,9 +191,9 @@ c('&::after', {
 }), c('&::before', {
   bottom: '0 !important'
 })]), cM('summary', `
- background-color: var(--merged-th-color);
+ background-color: var(--n-merged-th-color);
  `), cM('hover', {
-  backgroundColor: 'var(--merged-td-color-hover)'
+  backgroundColor: 'var(--n-merged-td-color-hover)'
 }), cM('ellipsis', `
  text-overflow: ellipsis;
  overflow: hidden;
@@ -204,73 +204,76 @@ c('&::after', {
  line-height: 0;
  `), fixedColumnStyle]), cB('data-table-empty', `
  box-sizing: border-box;
- padding: var(--empty-padding);
+ padding: var(--n-empty-padding);
  flex-grow: 1;
  flex-shrink: 0;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  `, [cM('hide', {
   opacity: 0
 })]), cE('pagination', `
- margin: var(--pagination-margin);
+ margin: var(--n-pagination-margin);
  display: flex;
  justify-content: flex-end;
  `), cB('data-table-wrapper', `
  position: relative;
  opacity: 1;
- transition: opacity .3s var(--bezier), border-color .3s var(--bezier);
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- line-height: var(--line-height);
- `), cM('loading', [cB('data-table-wrapper', 'opacity: var(--opacity-loading);')]), cM('single-column', [cB('data-table-td', {
-  borderBottom: '0 solid var(--merged-border-color)'
+ transition: opacity .3s var(--n-bezier), border-color .3s var(--n-bezier);
+ border-top-left-radius: var(--n-border-radius);
+ border-top-right-radius: var(--n-border-radius);
+ line-height: var(--n-line-height);
+ `), cM('loading', [cB('data-table-wrapper', `
+ opacity: var(--n-opacity-loading);
+ pointer-events: none;
+ `)]), cM('single-column', [cB('data-table-td', {
+  borderBottom: '0 solid var(--n-merged-border-color)'
 }, [c('&::after, &::before', {
   bottom: '0 !important'
 })])]), cNotM('single-line', [cB('data-table-th', {
-  borderRight: '1px solid var(--merged-border-color)'
+  borderRight: '1px solid var(--n-merged-border-color)'
 }, [cM('last', {
-  borderRight: '0 solid var(--merged-border-color)'
+  borderRight: '0 solid var(--n-merged-border-color)'
 })]), cB('data-table-td', {
-  borderRight: '1px solid var(--merged-border-color)'
+  borderRight: '1px solid var(--n-merged-border-color)'
 }, [cM('last-col', {
-  borderRight: '0 solid var(--merged-border-color)'
+  borderRight: '0 solid var(--n-merged-border-color)'
 })])]), cM('bordered', [cB('data-table-wrapper', `
- border: 1px solid var(--merged-border-color);
- border-bottom-left-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
+ border: 1px solid var(--n-merged-border-color);
+ border-bottom-left-radius: var(--n-border-radius);
+ border-bottom-right-radius: var(--n-border-radius);
  overflow: hidden;
  `)]), cB('data-table-base-table', [cM('transition-disabled', [cB('data-table-th', [c('&::after, &::before', {
   transition: 'none'
 })]), cB('data-table-td', [c('&::after, &::before', {
   transition: 'none'
 })])])]), cM('bottom-bordered', [cB('data-table-td', [cM('last-row', {
-  borderBottom: '1px solid var(--merged-border-color)'
+  borderBottom: '1px solid var(--n-merged-border-color)'
 })])]), cB('data-table-table', `
  font-variant-numeric: tabular-nums;
  width: 100%;
  word-wrap: break-word;
  word-break: break-all;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  border-collapse: separate;
  border-spacing: 0;
- background-color: var(--merged-td-color);
+ background-color: var(--n-merged-td-color);
  `), cB('data-table-base-table-header', `
- border-top-left-radius: calc(var(--border-radius) - 1px);
- border-top-right-radius: calc(var(--border-radius) - 1px);
+ border-top-left-radius: calc(var(--n-border-radius) - 1px);
+ border-top-right-radius: calc(var(--n-border-radius) - 1px);
  z-index: 3;
  overflow: scroll;
  flex-shrink: 0;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  scrollbar-width: none;
  `, [c('&::-webkit-scrollbar', {
   width: 0,
   height: 0
 })]), cB('data-table-check-extra', `
- transition: color .3s var(--bezier);
- color: var(--th-icon-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-th-icon-color);
  position: absolute;
  font-size: 14px;
  right: -4px;
@@ -290,31 +293,31 @@ c('&::after', {
   marginBottom: '12px',
   marginRight: 0
 })]), cE('action', `
- padding: var(--action-padding);
+ padding: var(--n-action-padding);
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
- border-top: 1px solid var(--action-divider-color);
+ border-top: 1px solid var(--n-action-divider-color);
  `, [cB('button', [c('&:not(:last-child)', {
-  margin: 'var(--action-button-margin)'
+  margin: 'var(--n-action-button-margin)'
 }), c('&:last-child', {
   marginRight: 0
 })])]), cB('divider', {
   margin: '0!important'
 })]), insideModal(cB('data-table', `
- --merged-th-color: var(--th-color-modal);
- --merged-td-color: var(--td-color-modal);
- --merged-border-color: var(--border-color-modal);
- --merged-th-color-hover: var(--th-color-hover-modal);
- --merged-td-color-hover: var(--td-color-hover-modal);
- --merged-td-color-striped: var(--td-color-striped-modal);
+ --n-merged-th-color: var(--n-th-color-modal);
+ --n-merged-td-color: var(--n-td-color-modal);
+ --n-merged-border-color: var(--n-border-color-modal);
+ --n-merged-th-color-hover: var(--n-th-color-hover-modal);
+ --n-merged-td-color-hover: var(--n-td-color-hover-modal);
+ --n-merged-td-color-striped: var(--n-td-color-striped-modal);
  `)), insidePopover(cB('data-table', `
- --merged-th-color: var(--th-color-popover);
- --merged-td-color: var(--td-color-popover);
- --merged-border-color: var(--border-color-popover);
- --merged-th-color-hover: var(--th-color-hover-popover);
- --merged-td-color-hover: var(--td-color-hover-popover);
- --merged-td-color-striped: var(--td-color-striped-popover);
+ --n-merged-th-color: var(--n-th-color-popover);
+ --n-merged-td-color: var(--n-td-color-popover);
+ --n-merged-border-color: var(--n-border-color-popover);
+ --n-merged-th-color-hover: var(--n-th-color-hover-popover);
+ --n-merged-td-color-hover: var(--n-td-color-hover-popover);
+ --n-merged-td-color-striped: var(--n-td-color-striped-popover);
  `))]);
 
 function createFixedColumnStyle() {
@@ -330,7 +333,7 @@ function createFixedColumnStyle() {
  position: absolute;
  top: 0;
  bottom: -1px;
- transition: box-shadow .2s var(--bezier);
+ transition: box-shadow .2s var(--n-bezier);
  right: -36px;
  `)]), cM('fixed-right', {
     right: 0,
@@ -344,7 +347,7 @@ function createFixedColumnStyle() {
  position: absolute;
  top: 0;
  bottom: -1px;
- transition: box-shadow .2s var(--bezier);
+ transition: box-shadow .2s var(--n-bezier);
  left: -36px;
  `)])];
 }

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

@@ -1,4 +1,4 @@
-import { pxfy } from 'seemly';
+import { depx, pxfy } from 'seemly';
 export const selectionColWidth = 40;
 export const expandColWidth = 40;
 export function getColWidth(col) {
@@ -8,6 +8,9 @@ export function getColWidth(col) {
         return expandColWidth;
     if ('children' in col)
         return undefined;
+    if (typeof col.width === 'string') {
+        return depx(col.width);
+    }
     return col.width;
 }
 export function getColKey(col) {

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

@@ -461,6 +461,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
                 clearColorHover: string;
                 clearColorPressed: string;
                 paddingSingle: string;
+                paddingMultiple: string;
                 clearSize: string;
                 arrowSize: string;
             }, {

package/es/date-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NDatePicker } from './src/DatePicker';
 export type { DatePickerProps } from './src/DatePicker';
+export type { DatePickerInst } from './src/interface';