naive-ui 2.20.3 → 2.21.0

package/es/data-table/src/TableParts/Header.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;

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

@@ -103,7 +103,7 @@ export default defineComponent({
                         }
                         : undefined },
                     column.type === 'selection' ? (h(Fragment, null,
-                        h(NCheckbox, { key: currentPage, privateTableHeader: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
+                        h(NCheckbox, { key: currentPage, privateInsideTable: true, checked: allRowsChecked, indeterminate: someRowsChecked, disabled: headerCheckboxDisabled, onUpdateChecked: handleCheckboxUpdateChecked }),
                         checkOptions ? (h(SelectionMenu, { clsPrefix: mergedClsPrefix })) : null)) : ellipsis === true || (ellipsis && !ellipsis.tooltip) ? (h("div", { class: `${mergedClsPrefix}-data-table-th__ellipsis` }, renderTitle(column))) // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
                         : ellipsis && ellipsis.tooltip ? (h(NEllipsis, { tooltip: ellipsis.tooltip, theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }, {
                             default: () => renderTitle(column)

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

@@ -149,6 +149,7 @@ export interface DataTableInjection {
     rowPropsRef: Ref<CreateRowProps | undefined>;
     flexHeightRef: Ref<boolean>;
     headerCheckboxDisabledRef: Ref<boolean>;
+    stripedRef: Ref<boolean>;
     doUpdateExpandedRowKeys: (keys: RowKey[]) => void;
     doUpdateFilters: (filters: FilterState, sourceColumn?: TableBaseColumn) => void;
     deriveNextSorter: (sorter: SortState | null) => void;
@@ -204,10 +205,12 @@ export declare type OnFilterMenuChangeImpl = (value: FilterOptionValue[] | Filte
 export interface DataTableInst {
     filter: (filters: FilterState | null) => void;
     filters: (filters: FilterState | null) => void;
-    clearFilter: () => void;
     clearFilters: () => void;
+    clearSorter: () => void;
     page: (page: number) => void;
     sort: (columnKey: ColumnKey, order: SortOrder) => void;
+    /** @deprecated it but just leave it here, it does no harm */
+    clearFilter: () => void;
 }
 export declare type CreateSummary<T = InternalRowData> = (pageData: T[]) => SummaryRowData | SummaryRowData[];
 export interface SummaryCell {

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

@@ -52,6 +52,7 @@ export default c([cB('data-table', `
  --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);
  `, [cM('flex-height', [c('>', [cB('data-table-wrapper', `
  flex-grow: 1;
  display: flex;
@@ -88,15 +89,11 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  `), cB('data-table-thead', {
   transition: 'background-color .3s var(--bezier)',
   backgroundColor: 'var(--merged-th-color)'
-}), cB('data-table-tr', {
-  boxSizing: 'border-box',
-  backgroundClip: 'padding-box',
-  transition: 'background-color .3s var(--bezier)'
-}, [c('&:hover', {
-  backgroundColor: 'var(--merged-td-color-hover)'
-}, [cB('data-table-td', {
-  backgroundColor: 'var(--merged-td-color-hover)'
-})])]), cB('data-table-th', `
+}), cB('data-table-tr', `
+ box-sizing: border-box;
+ background-clip: padding-box;
+ transition: background-color .3s var(--bezier);
+ `, [c('&:hover', 'background-color: var(--merged-td-color-hover);', [cB('data-table-td', 'background-color: var(--merged-td-color-hover);')]), cM('striped', 'background-color: var(--merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--merged-td-color-striped);')])]), cB('data-table-th', `
  padding: var(--th-padding);
  position: relative;
  text-align: start;
@@ -313,12 +310,14 @@ c('&::after', {
  --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);
  `)), 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);
  `))]);
 
 function createFixedColumnStyle() {

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

@@ -8,6 +8,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeLarge: string;
     borderColor: string;
     tdColorHover: string;
+    tdColorStriped: string;
     thColor: string;
     thColorHover: string;
     tdColor: string;
@@ -19,11 +20,13 @@ export declare const self: (vars: ThemeCommonVars) => {
     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;
@@ -55,6 +58,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     fontSizeLarge: string;
     borderColor: string;
     tdColorHover: string;
+    tdColorStriped: string;
     thColor: string;
     thColorHover: string;
     tdColor: string;
@@ -66,11 +70,13 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
     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;
@@ -106,20 +112,30 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         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;
@@ -266,9 +282,8 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         borderDisabledError: string;
         rippleColorError: string;
         waveOpacity: string;
-        fontWeightText: string;
         fontWeight: string;
-        fontWeighGhost: string;
+        fontWeightStrong: string;
         paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;

package/es/data-table/styles/light.js

@@ -16,11 +16,11 @@ export const self = (vars) => {
         borderRadius,
         fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, borderColor: composite(cardColor, dividerColor), tdColorHover: composite(cardColor, tableColorHover), thColor: composite(cardColor, tableHeaderColor), thColorHover: composite(composite(cardColor, tableHeaderColor), tableColorHover), tdColor: cardColor, tdTextColor: textColor2, thTextColor: textColor1, thFontWeight: fontWeightStrong, thButtonColorHover: tableColorHover, thIconColor: iconColor, thIconColorActive: primaryColor, 
+        fontSizeLarge, borderColor: composite(cardColor, dividerColor), tdColorHover: composite(cardColor, tableColorHover), tdColorStriped: composite(cardColor, tableColorHover), thColor: composite(cardColor, tableHeaderColor), thColorHover: composite(composite(cardColor, tableHeaderColor), tableColorHover), tdColor: cardColor, tdTextColor: textColor2, thTextColor: textColor1, thFontWeight: fontWeightStrong, thButtonColorHover: tableColorHover, thIconColor: iconColor, thIconColorActive: primaryColor, 
         // modal
-        borderColorModal: composite(modalColor, dividerColor), tdColorHoverModal: composite(modalColor, tableColorHover), thColorModal: composite(modalColor, tableHeaderColor), thColorHoverModal: composite(composite(modalColor, tableHeaderColor), tableColorHover), tdColorModal: modalColor, 
+        borderColorModal: composite(modalColor, dividerColor), tdColorHoverModal: composite(modalColor, tableColorHover), tdColorStripedModal: composite(modalColor, tableColorHover), thColorModal: composite(modalColor, tableHeaderColor), thColorHoverModal: composite(composite(modalColor, tableHeaderColor), tableColorHover), tdColorModal: modalColor, 
         // popover
-        borderColorPopover: composite(popoverColor, dividerColor), tdColorHoverPopover: composite(popoverColor, tableColorHover), thColorPopover: composite(popoverColor, tableHeaderColor), thColorHoverPopover: composite(composite(popoverColor, tableHeaderColor), tableColorHover), tdColorPopover: popoverColor, boxShadowBefore: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)', boxShadowAfter: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)', 
+        borderColorPopover: composite(popoverColor, dividerColor), tdColorHoverPopover: composite(popoverColor, tableColorHover), tdColorStripedPopover: composite(popoverColor, tableColorHover), thColorPopover: composite(popoverColor, tableHeaderColor), thColorHoverPopover: composite(composite(popoverColor, tableHeaderColor), tableColorHover), tdColorPopover: popoverColor, boxShadowBefore: 'inset -12px 0 8px -12px rgba(0, 0, 0, .18)', boxShadowAfter: 'inset 12px 0 8px -12px rgba(0, 0, 0, .18)', 
         // loading
         loadingColor: primaryColor, loadingSize: heightSmall, opacityLoading: opacityDisabled });
 };