naive-ui 2.21.2 → 2.22.0

package/es/color-picker/src/ColorPicker.d.ts

@@ -130,9 +130,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -410,9 +410,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -690,9 +690,9 @@ export declare const colorPickerPanelProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1009,9 +1009,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1289,9 +1289,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1569,9 +1569,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1906,9 +1906,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2186,9 +2186,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2466,9 +2466,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;

package/es/color-picker/styles/light.d.ts

@@ -104,9 +104,9 @@ declare const colorPickerLight: import("../../_mixins/use-theme").Theme<"ColorPi
         fontSizeMedium: string;
         fontSizeLarge: string;
         opacityDisabled: string;
-        colorOpacitySecondary: number;
-        colorOpacitySecondaryHover: number;
-        colorOpacitySecondaryPressed: number;
+        colorOpacitySecondary: string;
+        colorOpacitySecondaryHover: string;
+        colorOpacitySecondaryPressed: string;
         colorSecondary: string;
         colorSecondaryHover: string;
         colorSecondaryPressed: string;

package/es/config-provider/src/ConfigProvider.d.ts

@@ -36,6 +36,11 @@ export declare const configProviderProps: {
             yearFormat: string;
             monthFormat: string;
             dayFormat: string;
+            yearTypeFormat: string;
+            monthTypeFormat: string;
+            dateFormat: string;
+            dateTimeFormat: string;
+            quarterFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -44,6 +49,8 @@ export declare const configProviderProps: {
             datePlaceholder: string;
             datetimePlaceholder: string;
             monthPlaceholder: string;
+            yearPlaceholder: string;
+            quarterPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -155,6 +162,11 @@ declare const _default: import("vue").DefineComponent<{
             yearFormat: string;
             monthFormat: string;
             dayFormat: string;
+            yearTypeFormat: string;
+            monthTypeFormat: string;
+            dateFormat: string;
+            dateTimeFormat: string;
+            quarterFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -163,6 +175,8 @@ declare const _default: import("vue").DefineComponent<{
             datePlaceholder: string;
             datetimePlaceholder: string;
             monthPlaceholder: string;
+            yearPlaceholder: string;
+            quarterPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;
@@ -298,6 +312,11 @@ declare const _default: import("vue").DefineComponent<{
             yearFormat: string;
             monthFormat: string;
             dayFormat: string;
+            yearTypeFormat: string;
+            monthTypeFormat: string;
+            dateFormat: string;
+            dateTimeFormat: string;
+            quarterFormat: string;
             clear: string;
             now: string;
             confirm: string;
@@ -306,6 +325,8 @@ declare const _default: import("vue").DefineComponent<{
             datePlaceholder: string;
             datetimePlaceholder: string;
             monthPlaceholder: string;
+            yearPlaceholder: string;
+            quarterPlaceholder: string;
             startDatePlaceholder: string;
             endDatePlaceholder: string;
             startDatetimePlaceholder: string;

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

@@ -170,9 +170,9 @@ export declare const dataTableProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -770,9 +770,9 @@ export declare const dataTableProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -1370,9 +1370,9 @@ export declare const dataTableProps: {
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2078,9 +2078,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -2678,9 +2678,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -3278,9 +3278,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -4037,9 +4037,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -4959,9 +4959,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -5559,9 +5559,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;
@@ -6159,9 +6159,9 @@ declare const _default: import("vue").DefineComponent<{
             fontSizeMedium: string;
             fontSizeLarge: string;
             opacityDisabled: string;
-            colorOpacitySecondary: number;
-            colorOpacitySecondaryHover: number;
-            colorOpacitySecondaryPressed: number;
+            colorOpacitySecondary: string;
+            colorOpacitySecondaryHover: string;
+            colorOpacitySecondaryPressed: string;
             colorSecondary: string;
             colorSecondaryHover: string;
             colorSecondaryPressed: string;

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

@@ -1,8 +1,7 @@
-import { h, computed, defineComponent, ref, provide, toRef, renderSlot, Transition } from 'vue';
+import { h, computed, defineComponent, ref, provide, toRef, Transition } from 'vue';
 import { createId } from 'seemly';
 import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { NBaseLoading } from '../../_internal';
-import { NEmpty } from '../../empty';
 import { NPagination } from '../../pagination';
 import { warn, createKey } from '../../_utils';
 import { dataTableLight } from '../styles';
@@ -107,7 +106,7 @@ export default defineComponent({
     name: 'DataTable',
     alias: ['AdvancedTable'],
     props: dataTableProps,
-    setup(props) {
+    setup(props, { slots }) {
         const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
         const mergedBottomBorderedRef = computed(() => {
             const { bottomBordered } = props;
@@ -131,7 +130,7 @@ export default defineComponent({
             paginatedDataRef
         });
         const { mergedExpandedRowKeysRef, renderExpandRef, doUpdateExpandedRowKeys } = useExpand(props);
-        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, rightActiveFixedColKeyRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = useScroll(props, {
+        const { handleTableBodyScroll, handleTableHeaderScroll, syncScrollState, setHeaderScrollLeft, leftActiveFixedColKeyRef, leftActiveFixedChildrenColKeysRef, rightActiveFixedColKeyRef, rightActiveFixedChildrenColKeysRef, leftFixedColumnsRef, rightFixedColumnsRef, fixedColumnLeftMapRef, fixedColumnRightMapRef } = useScroll(props, {
             scrollPartRef,
             bodyWidthRef,
             mainTableInstRef,
@@ -151,6 +150,7 @@ export default defineComponent({
             return props.tableLayout;
         });
         provide(dataTableInjectionKey, {
+            slots,
             indentRef: toRef(props, 'indent'),
             firstContentfulColIndexRef,
             bodyWidthRef,
@@ -163,7 +163,9 @@ export default defineComponent({
             colsRef,
             paginatedDataRef,
             leftActiveFixedColKeyRef,
+            leftActiveFixedChildrenColKeysRef,
             rightActiveFixedColKeyRef,
+            rightActiveFixedChildrenColKeysRef,
             leftFixedColumnsRef,
             rightFixedColumnsRef,
             fixedColumnLeftMapRef,
@@ -289,16 +291,7 @@ export default defineComponent({
                 }
             ], style: this.cssVars },
             h("div", { class: `${mergedClsPrefix}-data-table-wrapper` },
-                h(MainTable, { ref: "mainTableInstRef" }, {
-                    default: () => this.paginatedData.length === 0 ? (h("div", { class: [
-                            `${mergedClsPrefix}-data-table-empty`,
-                            {
-                                [`${mergedClsPrefix}-data-table-empty--hide`]: this.loading
-                            }
-                        ] }, renderSlot(this.$slots, 'empty', undefined, () => [
-                        h(NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
-                    ]))) : null
-                })),
+                h(MainTable, { ref: "mainTableInstRef" })),
             this.pagination ? (h("div", { class: `${mergedClsPrefix}-data-table__pagination` },
                 h(NPagination, Object.assign({ theme: this.mergedTheme.peers.Pagination, themeOverrides: this.mergedTheme.peerOverrides.Pagination, disabled: this.loading }, this.mergedPagination)))) : null,
             h(Transition, { name: "fade-in-scale-up-transition" }, {

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

@@ -178,9 +178,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

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

@@ -203,9 +203,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;

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

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, ref, defineComponent, inject, computed, renderSlot, watchEffect } from 'vue';
+import { h, ref, defineComponent, inject, computed, watchEffect } from 'vue';
 import { formatLength } from '../../_utils';
 import TableHeader from './TableParts/Header';
 import TableBody from './TableParts/Body';
@@ -67,7 +67,6 @@ export default defineComponent({
         const headerInBody = maxHeight === undefined && !flexHeight;
         return (h("div", { class: `${mergedClsPrefix}-data-table-base-table`, ref: "selfElRef" },
             headerInBody ? null : h(TableHeader, { ref: "headerInstRef" }),
-            h(TableBody, { ref: "bodyInstRef", style: this.bodyStyle, showHeader: headerInBody, flexHeight: flexHeight, onResize: this.handleBodyResize }),
-            renderSlot(this.$slots, 'default')));
+            h(TableBody, { ref: "bodyInstRef", bodyStyle: this.bodyStyle, showHeader: headerInBody, flexHeight: flexHeight, onResize: this.handleBodyResize })));
     }
 });

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

@@ -1,12 +1,16 @@
-import { PropType } from 'vue';
-import { RowKey, TmNode } from '../interface';
+import { PropType, CSSProperties } from 'vue';
+import { RowKey, ColumnKey, TmNode } from '../interface';
 import type { ColItem } from '../use-group-header';
 declare const _default: import("vue").DefineComponent<{
     onResize: PropType<(e: ResizeObserverEntry) => void>;
     showHeader: BooleanConstructor;
     flexHeight: BooleanConstructor;
+    bodyStyle: PropType<CSSProperties>;
 }, {
     getScrollContainer: () => HTMLElement | null;
+    dataTableSlots: Readonly<{
+        [name: string]: import("vue").Slot | undefined;
+    }>;
     componentId: string;
     scrollbarInstRef: import("vue").Ref<{
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
@@ -20,6 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         itemsElRef: HTMLElement | null;
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
+    emptyElRef: import("vue").Ref<HTMLElement | null>;
     summary: import("vue").Ref<import("../interface").CreateSummary<import("../interface").InternalRowData> | undefined>;
     mergedClsPrefix: import("vue").Ref<string>;
     mergedTheme: import("vue").Ref<{
@@ -190,9 +195,9 @@ declare const _default: import("vue").DefineComponent<{
                 fontSizeMedium: string;
                 fontSizeLarge: string;
                 opacityDisabled: string;
-                colorOpacitySecondary: number;
-                colorOpacitySecondaryHover: number;
-                colorOpacitySecondaryPressed: number;
+                colorOpacitySecondary: string;
+                colorOpacitySecondaryHover: string;
+                colorOpacitySecondaryPressed: string;
                 colorSecondary: string;
                 colorSecondaryHover: string;
                 colorSecondaryPressed: string;
@@ -976,17 +981,21 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     scrollX: import("vue").Ref<string | number | undefined>;
     cols: import("vue").Ref<ColItem[]>;
+    loading: import("vue").Ref<boolean>;
+    bodyShowHeaderOnly: import("vue").ComputedRef<boolean>;
+    shouldDisplaySomeTablePart: import("vue").ComputedRef<boolean>;
+    empty: import("vue").ComputedRef<boolean>;
     paginatedData: import("vue").ComputedRef<{
         tmNode: TmNode;
         key: import("treemate").Key;
         striped: boolean;
     }[]>;
     rawPaginatedData: import("vue").Ref<import("../interface").InternalRowData[]>;
-    fixedColumnLeftMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnLeftMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
-    fixedColumnRightMap: import("vue").Ref<Record<import("../interface").ColumnKey, {
+    fixedColumnRightMap: import("vue").Ref<Record<ColumnKey, {
         start: number;
         end: number;
     } | undefined>>;
@@ -1019,11 +1028,13 @@ declare const _default: import("vue").DefineComponent<{
     onResize?: unknown;
     showHeader?: unknown;
     flexHeight?: unknown;
+    bodyStyle?: unknown;
 } & {
     flexHeight: boolean;
     showHeader: boolean;
 } & {
     onResize?: ((e: ResizeObserverEntry) => void) | undefined;
+    bodyStyle?: CSSProperties | undefined;
 }>, {
     flexHeight: boolean;
     showHeader: boolean;