naive-ui 2.20.3 → 2.21.3

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

@@ -85,9 +85,13 @@ declare const _default: import("vue").DefineComponent<{
                 tableHeaderColor: string;
                 hoverColor: string;
                 tableColorHover: string;
+                tableColorStriped: string;
                 pressedColor: string;
                 opacityDisabled: string;
                 inputColorDisabled: string;
+                buttonColor2: string;
+                buttonColor2Hover: string;
+                buttonColor2Pressed: string;
                 boxShadow1: string;
                 boxShadow2: string;
                 boxShadow3: string;
@@ -124,6 +128,7 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeLarge: string;
                 borderColor: string;
                 tdColorHover: string;
+                tdColorStriped: string;
                 thColor: string;
                 thColorHover: string;
                 tdColor: string;
@@ -135,11 +140,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 +183,30 @@ declare const _default: import("vue").DefineComponent<{
                     fontSizeMedium: string;
                     fontSizeLarge: string;
                     opacityDisabled: string;
+                    colorOpacitySecondary: string;
+                    colorOpacitySecondaryHover: string;
+                    colorOpacitySecondaryPressed: string;
+                    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 +353,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;
@@ -1033,9 +1049,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -1072,6 +1092,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -1083,11 +1104,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 +1147,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
+                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 +1317,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.d.ts

@@ -92,9 +92,13 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
+            buttonColor2: string;
+            buttonColor2Hover: string;
+            buttonColor2Pressed: string;
             boxShadow1: string;
             boxShadow2: string;
             boxShadow3: string;
@@ -131,6 +135,7 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeLarge: string;
             borderColor: string;
             tdColorHover: string;
+            tdColorStriped: string;
             thColor: string;
             thColorHover: string;
             tdColor: string;
@@ -142,11 +147,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 +190,30 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
+                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 +360,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;
@@ -84,19 +85,15 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  margin-right: 8px;
  cursor: pointer;
  font-size: 16px;
- vertical-align: -.125em;
+ vertical-align: -0.2em;
  `), 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);
+ `, [cM('striped', 'background-color: var(--merged-td-color-striped);', [cB('data-table-td', 'background-color: var(--merged-td-color-striped);')]), 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);
  position: relative;
  text-align: start;
@@ -239,15 +236,11 @@ c('&::after', {
   borderRight: '1px solid var(--merged-border-color)'
 }, [cM('last-col', {
   borderRight: '0 solid var(--merged-border-color)'
-})])]), cM('bordered', [cB('data-table-wrapper', {
-  border: '1px solid var(--merged-border-color)',
-  borderBottomLeftRadius: 'var(--border-radius)',
-  borderBottomRightRadius: 'var(--border-radius)'
-}), cB('data-table-td', [cM('last-row', {
-  borderBottom: '0 solid var(--merged-border-color)'
-})]), cB('data-table-base-table-body', `
- border-bottom-left-radius: calc(var(--border-radius) - 1px);
- border-bottom-right-radius: calc(var(--border-radius) - 1px);
+})])]), 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);
+ 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', {
@@ -313,12 +306,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/src/use-table-data.js

@@ -208,7 +208,7 @@ export function useTableData(props, { dataRelatedColsRef }) {
     const mergedPaginationRef = computed(() => {
         return Object.assign(Object.assign({}, props.pagination), { 
             // reset deprecated methods
-            onChange: undefined, onPageSizeChange: undefined, 'onUpdate:page': mergedOnUpdatePage, 'onUpdate:pageSize': mergedOnUpdatePageSize, 
+            onChange: undefined, onUpdatePage: undefined, onUpdatePageSize: undefined, onPageSizeChange: undefined, 'onUpdate:page': mergedOnUpdatePage, 'onUpdate:pageSize': mergedOnUpdatePageSize, 
             // writing merged props after pagination to avoid
             // pagination[key] === undefined
             // key still exists but value is undefined
@@ -220,10 +220,10 @@ export function useTableData(props, { dataRelatedColsRef }) {
         const { 'onUpdate:page': _onUpdatePage, onPageChange, onUpdatePage } = props;
         if (onUpdatePage)
             call(onUpdatePage, page);
-        if (onPageChange)
-            call(onPageChange, page);
         if (_onUpdatePage)
             call(_onUpdatePage, page);
+        if (onPageChange)
+            call(onPageChange, page);
         uncontrolledCurrentPageRef.value = page;
     }
     function doUpdatePageSize(pageSize) {

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: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
+        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

@@ -11,16 +11,16 @@ import { emptyLight } from '../../empty/styles';
 import { commonLight } from '../../_styles/common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { cardColor, modalColor, popoverColor, textColor2, textColor1, tableHeaderColor, tableColorHover, iconColor, primaryColor, fontWeightStrong, borderRadius, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge, dividerColor, heightSmall, opacityDisabled } = vars;
+    const { cardColor, modalColor, popoverColor, textColor2, textColor1, tableHeaderColor, tableColorHover, iconColor, primaryColor, fontWeightStrong, borderRadius, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge, dividerColor, heightSmall, opacityDisabled, tableColorStriped } = vars;
     return Object.assign(Object.assign({}, commonVariables), { actionDividerColor: dividerColor, lineHeight,
         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, tableColorStriped), 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, tableColorStriped), 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, tableColorStriped), 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 });
 };