naive-ui 2.33.4 → 2.34.0

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

@@ -83,8 +83,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn<import("./interface").InternalRowData>) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<() => import("vue").VNodeChild>;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
@@ -3815,8 +3820,13 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: import("vue").PropType<import("../..").ScrollbarProps>;
     readonly renderCell: import("vue").PropType<(value: any, rowData: object, column: import("./interface").TableBaseColumn<import("./interface").InternalRowData>) => import("vue").VNodeChild>;
     readonly renderExpandIcon: import("vue").PropType<() => import("vue").VNodeChild>;
+    readonly spinProps: {
+        readonly type: import("vue").PropType<import("../../_internal").BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: import("vue").PropType<import("./interface").DataTableOnLoad>;
     readonly 'onUpdate:page': import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: import("vue").PropType<import("../../_utils").MaybeArray<(page: number) => void> | undefined>;
@@ -6199,5 +6209,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly flexHeight: boolean;
     readonly summaryPlacement: "bottom" | "top";
     readonly paginationBehaviorOnFilter: "first" | "current";
+    readonly spinProps: import("../../_internal").BaseLoadingExposedProps;
 }>;
 export default _default;

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

@@ -3,7 +3,7 @@ import { createId } from 'seemly';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseLoading } from '../../_internal';
 import { NPagination } from '../../pagination';
-import { createKey, warnOnce } from '../../_utils';
+import { createKey, resolveSlot, warnOnce } from '../../_utils';
 import { dataTableLight } from '../styles';
 import MainTable from './MainTable';
 import { useCheck } from './use-check';
@@ -86,6 +86,7 @@ export default defineComponent({
         });
         provide(dataTableInjectionKey, {
             props,
+            treeMateRef,
             renderExpandIconRef: toRef(props, 'renderExpandIcon'),
             loadingKeySetRef: ref(new Set()),
             slots,
@@ -150,6 +151,7 @@ export default defineComponent({
             headerCheckboxDisabledRef,
             paginationBehaviorOnFilterRef: toRef(props, 'paginationBehaviorOnFilter'),
             summaryPlacementRef: toRef(props, 'summaryPlacement'),
+            scrollbarPropsRef: toRef(props, 'scrollbarProps'),
             syncScrollState,
             doUpdatePage,
             doUpdateFilters,
@@ -247,7 +249,7 @@ export default defineComponent({
         return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, mergedShowPagination: mergedShowPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, themeClass, onRender } = this;
+        const { mergedClsPrefix, themeClass, onRender, $slots, spinProps } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-data-table`,
@@ -267,7 +269,9 @@ export default defineComponent({
                 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" }, {
                 default: () => {
-                    return this.loading ? (h(NBaseLoading, { clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : null;
+                    return this.loading ? (h("div", { class: `${mergedClsPrefix}-data-table-loading-wrapper` }, resolveSlot($slots.loading, () => [
+                        h(NBaseLoading, Object.assign({ clsPrefix: mergedClsPrefix, strokeWidth: 20 }, spinProps))
+                    ]))) : null;
                 }
             })));
     }

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

@@ -1300,6 +1300,7 @@ declare const _default: import("vue").DefineComponent<{
     expandable: import("vue").Ref<import("../interface").Expandable<any> | undefined>;
     stickyExpandedRows: import("vue").Ref<boolean>;
     renderExpandIcon: import("vue").Ref<(() => import("vue").VNodeChild) | undefined>;
+    scrollbarProps: import("vue").Ref<import("../../..").ScrollbarProps | undefined>;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     handleMouseenterTable: () => void;
     handleVirtualListScroll: (e: Event) => void;

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

@@ -6,7 +6,7 @@ import { useMemo } from 'vooks';
 import { cssrAnchorMetaName } from '../../../_mixins/common';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
-import { formatLength, resolveSlot } from '../../../_utils';
+import { formatLength, resolveSlot, warn } from '../../../_utils';
 import { NEmpty } from '../../../empty';
 import { dataTableInjectionKey } from '../interface';
 import { createRowClassName, getColKey, isColumnSorting } from '../utils';
@@ -80,7 +80,7 @@ export default defineComponent({
         bodyStyle: Object
     },
     setup(props) {
-        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, summaryPlacementRef, 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, summaryPlacementRef, treeMateRef, scrollbarPropsRef, setHeaderScrollLeft, doUpdateExpandedRowKeys, handleTableBodyScroll, doCheck, doUncheck, renderCell
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
         const scrollbarInstRef = ref(null);
@@ -99,11 +99,15 @@ export default defineComponent({
             return new Set(mergedExpandedRowKeysRef.value);
         });
         function getRowInfo(key) {
-            const currentIndex = paginatedDataRef.value.findIndex((item) => item.key === key);
-            return paginatedDataRef.value[currentIndex].rawNode;
+            var _a;
+            return (_a = treeMateRef.value.getNode(key)) === null || _a === void 0 ? void 0 : _a.rawNode;
         }
         function handleCheckboxUpdateChecked(tmNode, checked, shiftKey) {
             const rowInfo = getRowInfo(tmNode.key);
+            if (!rowInfo) {
+                warn('data-table', `fail to get row data with key ${tmNode.key}`);
+                return;
+            }
             if (shiftKey) {
                 const lastIndex = paginatedDataRef.value.findIndex((item) => item.key === lastSelectedKey);
                 if (lastIndex !== -1) {
@@ -136,6 +140,10 @@ export default defineComponent({
         }
         function handleRadioUpdateChecked(tmNode) {
             const rowInfo = getRowInfo(tmNode.key);
+            if (!rowInfo) {
+                warn('data-table', `fail to get row data with key ${tmNode.key}`);
+                return;
+            }
             doCheck(tmNode.key, true, rowInfo);
         }
         function getScrollContainer() {
@@ -313,7 +321,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, expandable: expandableRef, stickyExpandedRows: stickyExpandedRowsRef, renderExpandIcon: renderExpandIconRef, 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, scrollbarProps: scrollbarPropsRef, setHeaderScrollLeft,
             handleMouseenterTable,
             handleVirtualListScroll,
             handleVirtualListResize,
@@ -340,7 +348,7 @@ export default defineComponent({
         };
         if (scrollX)
             contentStyle.width = '100%';
-        const tableNode = (h(NScrollbar, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }, {
+        const tableNode = (h(NScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", scrollable: scrollable || isBasicAutoLayout, class: `${mergedClsPrefix}-data-table-base-table-body`, style: this.bodyStyle, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, contentStyle: contentStyle, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, horizontalRailStyle: { zIndex: 3 }, verticalRailStyle: { zIndex: 3 }, xScrollable: xScrollable, onScroll: virtualScroll ? undefined : this.handleTableBodyScroll, internalOnUpdateScrollLeft: setHeaderScrollLeft, onResize: onResize }), {
             default: () => {
                 // coordinate to pass if there are cells that cross row & col
                 const cordToPass = {};

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

@@ -113,11 +113,13 @@ export default defineComponent({
                             checkOptions ? (h(SelectionMenu, { clsPrefix: mergedClsPrefix })) : null)) : null;
                     }
                     return (h(Fragment, 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 && typeof ellipsis === 'object' ? (h(NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
-                                default: () => renderTitle(column)
-                            })) : (renderTitle(column)),
-                        isColumnSortable(column) ? (h(SortButton, { column: column })) : null,
+                        h("div", { class: `${mergedClsPrefix}-data-table-th__title` },
+                            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 && typeof ellipsis === 'object' ? (h(NEllipsis, Object.assign({}, ellipsis, { theme: mergedTheme.peers.Ellipsis, themeOverrides: mergedTheme.peerOverrides.Ellipsis }), {
+                                    default: () => renderTitle(column)
+                                })) : (renderTitle(column)),
+                            isColumnSortable(column) ? (h(SortButton, { column: column })) : null),
                         isColumnFilterable(column) ? (h(FilterButton, { column: column, options: column.filterOptions })) : null,
                         isColumnResizable(column) ? (h(ResizeButton, { onResizeStart: () => handleColumnResizeStart(column), onResize: (displacementX) => handleColumnResize(column, displacementX) })) : null));
                 };

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

@@ -1,6 +1,6 @@
-import { TreeNode } from 'treemate';
+import { TreeMate, TreeNode } from 'treemate';
 import { CSSProperties, Ref, HTMLAttributes, Slots, PropType, ExtractPropTypes, VNodeChild } from 'vue';
-import type { ScrollTo } from '../../scrollbar/src/Scrollbar';
+import type { ScrollbarProps, ScrollTo } from '../../scrollbar/src/Scrollbar';
 import type { EllipsisProps } from '../../ellipsis/src/Ellipsis';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { NLocale } from '../../locales';
@@ -8,6 +8,7 @@ import type { MergedTheme } from '../../_mixins';
 import type { PaginationProps } from '../../pagination';
 import type { DataTableTheme } from '../styles';
 import type { RowItem, ColItem } from './use-group-header';
+import { BaseLoadingExposedProps } from '../../_internal';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -92,8 +93,13 @@ export declare const dataTableProps: {
         readonly type: PropType<"first" | "current">;
         readonly default: "current";
     };
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly renderCell: PropType<(value: any, rowData: object, column: TableBaseColumn) => VNodeChild>;
     readonly renderExpandIcon: PropType<() => VNodeChild>;
+    readonly spinProps: {
+        readonly type: PropType<BaseLoadingExposedProps>;
+        readonly default: {};
+    };
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void> | undefined>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void> | undefined>;
@@ -2619,6 +2625,8 @@ export interface DataTableInjection {
     stickyExpandedRowsRef: Ref<boolean>;
     renderExpandIconRef: Ref<undefined | (() => VNodeChild)>;
     summaryPlacementRef: Ref<'top' | 'bottom'>;
+    treeMateRef: Ref<TreeMate<InternalRowData, InternalRowData, InternalRowData>>;
+    scrollbarPropsRef: Ref<ScrollbarProps | undefined>;
     doUpdatePage: (page: number) => void;
     doUpdateExpandedRowKeys: (keys: RowKey[]) => void;
     doUpdateFilters: (filters: FilterState, sourceColumn: TableBaseColumn) => void;

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

@@ -50,7 +50,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, renderCell: Function, renderExpandIcon: Function, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 export const dataTableInjectionKey = createInjectionKey('n-data-table');

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

@@ -1,7 +1,8 @@
 import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
 import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr';
 import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr';
-const fixedColumnStyle = createFixedColumnStyle(); // vars:
+const fixedColumnStyle = createFixedColumnStyle();
+// vars:
 // --n-font-size
 // --n-th-padding
 // --n-td-padding
@@ -43,7 +44,6 @@ const fixedColumnStyle = createFixedColumnStyle(); // vars:
 // --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(--n-font-size);
@@ -64,9 +64,10 @@ export default c([cB('data-table', `
  display: flex;
  flex-direction: column;
  flex-grow: 1;
- `, [c('>', [cB('data-table-base-table-body', 'flex-basis: 0;', [// last-child means there is no empty icon
+ `, [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', `
+c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('data-table-loading-wrapper', `
  color: var(--n-loading-color);
  font-size: var(--n-loading-size);
  position: absolute;
@@ -74,6 +75,9 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: color .3s var(--n-bezier);
+ display: flex;
+ align-items: center;
+ justify-content: center;
  `, [fadeInScaleUpTransition({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })])]), cB('data-table-expand-placeholder', `
@@ -133,7 +137,7 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  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', `
+ `), 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);', [c('>', [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;
@@ -149,12 +153,20 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  font-weight: var(--n-th-font-weight);
  `, [cM('filterable', {
   paddingRight: '36px'
-}), fixedColumnStyle, cM('selection', `
+}, [cM('sortable', {
+  paddingRight: 'calc(var(--n-th-padding) + 36px)'
+})]), fixedColumnStyle, cM('selection', `
  padding: 0;
  text-align: center;
  line-height: 0;
  z-index: 3;
- `), cE('ellipsis', `
+ `), cE('title', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flex: 'auto',
+  maxWidth: '100%'
+}), cE('ellipsis', `
  display: inline-block;
  vertical-align: bottom;
  text-overflow: ellipsis;
@@ -250,7 +262,8 @@ c('&:last-child', 'flex-grow: 1;')])])])])])])]), c('>', [cB('base-loading', `
  margin-right: 0;
  `)]), cM('last-row', {
   borderBottom: '0 solid var(--n-merged-border-color)'
-}, [// make sure there is no overlap between bottom border and
+}, [
+// make sure there is no overlap between bottom border and
 // fixed column box shadow
 c('&::after', {
   bottom: '0 !important'
@@ -387,7 +400,6 @@ c('&::after', {
  --n-merged-td-color-hover: var(--n-td-color-hover-popover);
  --n-merged-td-color-striped: var(--n-td-color-striped-popover);
  `))]);
-
 function createFixedColumnStyle() {
   return [cM('fixed-left', `
  left: 0;

package/es/date-picker/src/DatePicker.js

@@ -452,6 +452,8 @@ export default defineComponent({
             // TODO, fix conflict with clear
             if (v === '') {
                 doUpdateValue(null, { doConfirm: false });
+                pendingValueRef.value = null;
+                singleInputValueRef.value = '';
                 return;
             }
             const newSelectedDateTime = strictParse(v, mergedFormatRef.value, new Date(), dateFnsOptionsRef.value);
@@ -467,6 +469,9 @@ export default defineComponent({
             if (v[0] === '' && v[1] === '') {
                 // clear or just delete all the inputs
                 doUpdateValue(null, { doConfirm: false });
+                pendingValueRef.value = null;
+                rangeStartInputValueRef.value = '';
+                rangeEndInputValueRef.value = '';
                 return;
             }
             const [startTime, endTime] = v;

package/es/date-picker/src/panel/panelHeader.d.ts

@@ -76,8 +76,8 @@ declare const _default: import("vue").DefineComponent<{
         $slots: Readonly<{
             [name: string]: import("vue").Slot | undefined;
         }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
@@ -1236,7 +1236,7 @@ declare const _default: import("vue").DefineComponent<{
             actions: string[];
             panel: boolean;
             useAsQuickJump: boolean;
-        }> & {
+        }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -1251,11 +1251,11 @@ declare const _default: import("vue").DefineComponent<{
             unmounted?: ((() => void) | (() => void)[]) | undefined;
             renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
             renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
         type: {
             type: PropType<"month" | "year" | "quarter">;
@@ -2406,7 +2406,7 @@ declare const _default: import("vue").DefineComponent<{
         handleConfirmClick: () => void;
         handleSingleShortcutMouseenter: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
         handleSingleShortcutClick: (shortcut: number | [number, number] | (() => number) | readonly [number, number] | (() => [number, number] | readonly [number, number])) => void;
-    }> & {} & import("vue").ComponentCustomProperties) | null>;
+    }> & {} & import("vue").ComponentCustomProperties & {}) | null>;
     handleHeaderClick: () => void;
     handleClickOutside: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/date-picker/src/styles/index.cssr.js

@@ -1,5 +1,6 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-bezier
 // --n-icon-color-override
 // --n-icon-color-disabled-override
@@ -48,7 +49,6 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // panel arrow
 // --n-arrow-size
 // --n-arrow-color
-
 export default c([cB('date-picker', `
  position: relative;
  z-index: auto;

package/es/descriptions/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr'; // vars:
+import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_utils/cssr';
+// vars:
 // --n-th-padding
 // --n-td-padding
 // --n-font-size
@@ -18,7 +19,6 @@ import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_util
 // --n-border-color-modal
 // --n-border-color-popover
 // --n-title-text-color
-
 export default c([cB('descriptions', {
   fontSize: 'var(--n-font-size)'
 }, [cB('descriptions-separator', `

package/es/dialog/src/DialogEnvironment.d.ts

@@ -2,6 +2,7 @@ import { PropType, CSSProperties } from 'vue';
 export declare const exposedDialogEnvProps: {
     readonly onAfterEnter: PropType<() => void>;
     readonly onAfterLeave: PropType<() => void>;
+    readonly transformOrigin: PropType<"center" | "mouse">;
     readonly blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -60,6 +61,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     };
     onAfterEnter: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
+    transformOrigin: PropType<"center" | "mouse">;
     blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -127,6 +129,7 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     };
     onAfterEnter: PropType<() => void>;
     onAfterLeave: PropType<() => void>;
+    transformOrigin: PropType<"center" | "mouse">;
     blockScroll: {
         readonly type: BooleanConstructor;
         readonly default: true;

package/es/dialog/src/DialogEnvironment.js

@@ -5,7 +5,7 @@ import NModal from '../../modal/src/Modal';
 import { keep } from '../../_utils';
 import { NDialog } from './Dialog';
 import { dialogProps, dialogPropKeys } from './dialogProps';
-export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { onAfterEnter: Function, onAfterLeave: Function, blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
+export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), { onAfterEnter: Function, onAfterLeave: Function, transformOrigin: String, blockScroll: { type: Boolean, default: true }, closeOnEsc: { type: Boolean, default: true }, onEsc: Function, autoFocus: {
         type: Boolean,
         default: true
     }, internalStyle: [String, Object], maskClosable: {
@@ -104,7 +104,7 @@ export const NDialogEnvironment = defineComponent({
     },
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, handleEsc, to, maskClosable, show } = this;
-        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, onEsc: handleEsc, to: to, maskClosable: maskClosable, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, closeOnEsc: this.closeOnEsc, blockScroll: this.blockScroll, autoFocus: this.autoFocus, internalAppear: true, internalDialog: true }, {
+        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, onEsc: handleEsc, to: to, maskClosable: maskClosable, onAfterEnter: this.onAfterEnter, onAfterLeave: handleAfterLeave, closeOnEsc: this.closeOnEsc, blockScroll: this.blockScroll, autoFocus: this.autoFocus, transformOrigin: this.transformOrigin, internalAppear: true, internalDialog: true }, {
             default: () => (h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), { style: this.internalStyle, onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
         }));
     }

package/es/dialog/src/DialogProvider.d.ts

@@ -44,6 +44,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         type?: "default" | "error" | "info" | "success" | "warning" | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
         icon?: (() => import("vue").VNodeChild) | undefined;
+        transformOrigin?: "center" | "mouse" | undefined;
         onAfterEnter?: (() => void) | undefined;
         onAfterLeave?: (() => void) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
@@ -387,6 +388,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
+            renderIcon?: (() => import("vue").VNodeChild) | undefined;
             tertiary?: boolean | undefined;
             ghost?: boolean | undefined;
             secondary?: boolean | undefined;
@@ -725,6 +727,7 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
+            renderIcon?: (() => import("vue").VNodeChild) | undefined;
             tertiary?: boolean | undefined;
             ghost?: boolean | undefined;
             secondary?: boolean | undefined;

package/es/dialog/src/styles/index.cssr.js

@@ -1,4 +1,5 @@
-import { asModal, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'; // vars:
+import { asModal, c, cB, cE, cM, insideModal } from '../../../_utils/cssr';
+// vars:
 // --n-icon-color
 // --n-bezier
 // --n-icon-margin
@@ -22,7 +23,6 @@ import { asModal, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'; // v
 // --n-title-font-weight
 // --n-title-text-color
 // --n-action-space
-
 export default c([cB('dialog', `
  word-break: break-word;
  line-height: var(--n-line-height);

package/es/divider/src/styles/index.cssr.js

@@ -1,9 +1,9 @@
-import { cB, cNotM, cE, cM } from '../../../_utils/cssr'; // vars:
+import { cB, cNotM, cE, cM } from '../../../_utils/cssr';
+// vars:
 // --n-bezier
 // --n-color
 // --n-text-color
 // --n-font-weight
-
 export default cB('divider', `
  position: relative;
  display: flex;

package/es/drawer/src/styles/index.cssr.js

@@ -3,7 +3,8 @@ import { slideInFromRightTransition } from '../../../_styles/transitions/slide-i
 import { slideInFromLeftTransition } from '../../../_styles/transitions/slide-in-from-left';
 import { slideInFromTopTransition } from '../../../_styles/transitions/slide-in-from-top';
 import { slideInFromBottomTransition } from '../../../_styles/transitions/slide-in-from-bottom';
-import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr'; // vars:
+import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr';
+// vars:
 // --n-line-height
 // --n-color
 // --n-text-color
@@ -27,7 +28,6 @@ import { fadeInTransition } from '../../../_styles/transitions/fade-in.cssr'; //
 // --n-close-icon-color-pressed
 // --n-close-size
 // --n-close-icon-size
-
 export default c([cB('drawer', `
  word-break: break-word;
  line-height: var(--n-line-height);

package/es/dropdown/src/styles/index.cssr.js

@@ -1,5 +1,6 @@
 import { c, cB, cM, cE, cNotM } from '../../../_utils/cssr';
-import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
+import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-scale-up.cssr';
+// vars:
 // --n-bezier
 // --n-font-size
 // --n-padding
@@ -23,7 +24,6 @@ import { fadeInScaleUpTransition } from '../../../_styles/transitions/fade-in-sc
 // --n-option-opacity-disabled
 // shared with popover
 // --n-box-shadow
-
 export default cB('dropdown-menu', `
  transform-origin: var(--v-transform-origin);
  background-color: var(--n-color);

package/es/dynamic-input/src/styles/index.cssr.js

@@ -1,6 +1,6 @@
-import { c, cB, cM, cE } from '../../../_utils/cssr'; // vars:
+import { c, cB, cM, cE } from '../../../_utils/cssr';
+// vars:
 // --action-margin
-
 export default cB('dynamic-input', {
   width: '100%'
 }, [cB('dynamic-input-item', `

package/es/dynamic-tags/src/styles/index.cssr.js

@@ -1,6 +1,6 @@
-import { cB } from '../../../_utils/cssr'; // vars:
+import { cB } from '../../../_utils/cssr';
+// vars:
 // --input-width
-
 export default cB('dynamic-tags', [cB('input', {
   minWidth: 'var(--n-input-width)'
 })]);

package/es/empty/src/styles/index.cssr.js

@@ -1,11 +1,11 @@
-import { c, cB, cE } from '../../../_utils/cssr'; // vars:
+import { c, cB, cE } from '../../../_utils/cssr';
+// vars:
 // --n-font-size
 // --n-icon-size
 // --n-icon-color
 // --n-bezier
 // --n-text-color
 // --n-extra-text-color
-
 export default cB('empty', `
  display: flex;
  flex-direction: column;

package/es/equation/index.d.ts

@@ -0,0 +1 @@
+export { Equation as NEquation, equationProps } from './src/Equation';

package/es/equation/index.js

@@ -0,0 +1 @@
+export { Equation as NEquation, equationProps } from './src/Equation';

package/es/equation/src/Equation.d.ts

@@ -0,0 +1,18 @@
+import { PropType } from 'vue';
+import { KatexOptions } from 'katex';
+export declare const equationProps: {
+    readonly value: StringConstructor;
+    readonly katex: PropType<typeof import("katex").default>;
+    readonly katexOptions: PropType<KatexOptions>;
+};
+export declare const Equation: import("vue").DefineComponent<{
+    readonly value: StringConstructor;
+    readonly katex: PropType<typeof import("katex").default>;
+    readonly katexOptions: PropType<KatexOptions>;
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly value: StringConstructor;
+    readonly katex: PropType<typeof import("katex").default>;
+    readonly katexOptions: PropType<KatexOptions>;
+}>>, {}>;