naive-ui 2.23.2 → 2.24.0

package/es/pagination/src/Pagination.d.ts

@@ -1,9 +1,9 @@
 import { PropType } from 'vue';
 import type { PageItem } from './utils';
-import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { Size as InputSize } from '../../input/src/interface';
 import type { Size as SelectSize } from '../../select/src/interface';
-import { RenderPrefix, PaginationSizeOption } from './interface';
+import { RenderPrefix, PaginationRenderLabel, PaginationSizeOption } from './interface';
 declare const paginationProps: {
     readonly page: NumberConstructor;
     readonly defaultPage: {
@@ -17,7 +17,7 @@ declare const paginationProps: {
         readonly default: 1;
     };
     readonly showSizePicker: BooleanConstructor;
-    readonly pageSize: PropType<number>;
+    readonly pageSize: NumberConstructor;
     readonly defaultPageSize: {
         readonly type: NumberConstructor;
         readonly default: 10;
@@ -36,6 +36,7 @@ declare const paginationProps: {
     readonly next: PropType<RenderPrefix>;
     readonly prefix: PropType<RenderPrefix>;
     readonly suffix: PropType<RenderPrefix>;
+    readonly label: PropType<PaginationRenderLabel>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -740,7 +741,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: 1;
     };
     readonly showSizePicker: BooleanConstructor;
-    readonly pageSize: PropType<number>;
+    readonly pageSize: NumberConstructor;
     readonly defaultPageSize: {
         readonly type: NumberConstructor;
         readonly default: 10;
@@ -759,6 +760,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly next: PropType<RenderPrefix>;
     readonly prefix: PropType<RenderPrefix>;
     readonly suffix: PropType<RenderPrefix>;
+    readonly label: PropType<PaginationRenderLabel>;
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -2011,6 +2013,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly next?: unknown;
     readonly prefix?: unknown;
     readonly suffix?: unknown;
+    readonly label?: unknown;
     readonly 'onUpdate:page'?: unknown;
     readonly onUpdatePage?: unknown;
     readonly 'onUpdate:pageSize'?: unknown;
@@ -2030,6 +2033,7 @@ declare const _default: import("vue").DefineComponent<{
     showQuickJumper: boolean;
     pageSlot: number;
 } & {
+    label?: PaginationRenderLabel | undefined;
     prefix?: RenderPrefix | undefined;
     page?: number | undefined;
     onChange?: MaybeArray<(page: number) => void> | undefined;

package/es/pagination/src/Pagination.js

@@ -9,7 +9,7 @@ import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { paginationLight } from '../styles';
 import { pageItems } from './utils';
 import style from './styles/index.cssr';
-import { call, warn } from '../../_utils';
+import { call, warn, warnOnce } from '../../_utils';
 const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page: Number, defaultPage: {
         type: Number,
         default: 1
@@ -27,7 +27,7 @@ const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page:
     }, showQuickJumper: Boolean, disabled: Boolean, pageSlot: {
         type: Number,
         default: 9
-    }, prev: Function, next: Function, prefix: Function, suffix: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
+    }, prev: Function, next: Function, prefix: Function, suffix: Function, label: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
     /** @deprecated */
     onPageSizeChange: [Function, Array], 
     /** @deprecated */
@@ -41,6 +41,12 @@ export default defineComponent({
                 if (props.pageCount !== undefined && props.itemCount !== undefined) {
                     warn('pagination', "`page-count` and `item-count` should't be specified together. Only `item-count` will take effect.");
                 }
+                if (props.onPageSizeChange) {
+                    warnOnce('pagination', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
+                }
+                if (props.onChange) {
+                    warnOnce('pagination', '`on-change` is deprecated, please use `on-update:page` instead.');
+                }
             });
         }
         const { NConfigProvider, mergedClsPrefixRef } = useConfig(props);
@@ -195,10 +201,10 @@ export default defineComponent({
                 case 'page':
                     doUpdatePage(pageItem.label);
                     break;
-                case 'fastBackward':
+                case 'fast-backward':
                     fastBackward();
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     fastForward();
                     break;
             }
@@ -207,10 +213,10 @@ export default defineComponent({
             if (props.disabled)
                 return;
             switch (pageItem.type) {
-                case 'fastBackward':
+                case 'fast-backward':
                     showFastBackwardRef.value = true;
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     showFastForwardRef.value = true;
                     break;
                 default:
@@ -222,10 +228,10 @@ export default defineComponent({
             if (props.disabled)
                 return;
             switch (pageItem.type) {
-                case 'fastBackward':
+                case 'fast-backward':
                     showFastBackwardRef.value = false;
                     break;
-                case 'fastForward':
+                case 'fast-forward':
                     showFastForwardRef.value = false;
                     break;
                 default:
@@ -318,16 +324,17 @@ export default defineComponent({
     },
     render() {
         // it's ok to expand all prop here since no slots' deps
-        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const renderPrefix = $slots.prefix || prefix;
+        const renderSuffix = $slots.suffix || suffix;
         const renderPrev = prev || $slots.prev;
         const renderNext = next || $slots.next;
+        const renderLabel = label || $slots.label;
         return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-pagination`,
                 disabled && `${mergedClsPrefix}-pagination--disabled`
             ], style: cssVars },
-            prefix || $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, ($slots.prefix
-                ? $slots.prefix
-                : prefix)({
+            renderPrefix ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,
@@ -349,16 +356,58 @@ export default defineComponent({
                 itemCount: this.mergedItemCount
             })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(BackwardIcon, null) }))),
             pageItems.map((pageItem, index) => {
+                let contentNode;
+                switch (pageItem.type) {
+                    case 'page':
+                        // eslint-disable-next-line no-case-declarations
+                        const pageNode = pageItem.label;
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'page',
+                                node: pageNode,
+                                active: pageItem.active
+                            });
+                        }
+                        else {
+                            contentNode = pageNode;
+                        }
+                        break;
+                    case 'fast-forward':
+                        // eslint-disable-next-line no-case-declarations
+                        const fastForwardNode = showFastForward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastForwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'fast-forward',
+                                node: fastForwardNode,
+                                active: showFastForward
+                            });
+                        }
+                        else {
+                            contentNode = fastForwardNode;
+                        }
+                        break;
+                    case 'fast-backward':
+                        // eslint-disable-next-line no-case-declarations
+                        const fastBackwardNode = showFastBackward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastBackwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                        if (renderLabel) {
+                            contentNode = renderLabel({
+                                type: 'fast-backward',
+                                node: fastBackwardNode,
+                                active: showFastBackward
+                            });
+                        }
+                        else {
+                            contentNode = fastBackwardNode;
+                        }
+                        break;
+                }
                 return (h("div", { key: index, class: [
                         `${mergedClsPrefix}-pagination-item`,
                         {
                             [`${mergedClsPrefix}-pagination-item--active`]: pageItem.active,
                             [`${mergedClsPrefix}-pagination-item--disabled`]: disabled
                         }
-                    ], onClick: () => handlePageItemClick(pageItem), onMouseenter: () => handlePageItemMouseEnter(pageItem), onMouseleave: () => handlePageItemMouseLeave(pageItem) },
-                    pageItem.type === 'page' ? pageItem.label : null,
-                    pageItem.type === 'fastBackward' ? (showFastBackward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastBackwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }))) : null,
-                    pageItem.type === 'fastForward' ? (showFastForward ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(FastForwardIcon, null) })) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }))) : null));
+                    ], onClick: () => handlePageItemClick(pageItem), onMouseenter: () => handlePageItemMouseEnter(pageItem), onMouseleave: () => handlePageItemMouseLeave(pageItem) }, contentNode));
             }),
             h("div", { class: [
                     `${mergedClsPrefix}-pagination-item`,
@@ -378,9 +427,7 @@ export default defineComponent({
             showQuickJumper ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
                 locale.goto,
                 h(NInput, { ref: "jumperRef", value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleQuickJumperKeyUp }))) : null,
-            suffix || $slots.suffix ? (h("div", { class: `${mergedClsPrefix}-pagination-suffix` }, ($slots.suffix
-                ? $slots.suffix
-                : suffix)({
+            renderSuffix ? (h("div", { class: `${mergedClsPrefix}-pagination-suffix` }, renderSuffix({
                 page: mergedPage,
                 pageSize: mergedPageSize,
                 pageCount: mergedPageCount,

package/es/pagination/src/interface.d.ts

@@ -1,4 +1,4 @@
-import { VNodeChild } from 'vue';
+import { VNode, VNodeChild } from 'vue';
 import { SelectBaseOption } from '../../select/src/interface';
 export declare type PaginationInfo = Parameters<RenderPrefix>[0];
 export declare type RenderPrefix = (info: {
@@ -13,3 +13,12 @@ export declare type PaginationSizeOption = SelectBaseOption<number, string>;
 export declare type RenderSuffix = RenderPrefix;
 export declare type RenderNext = RenderPrefix;
 export declare type RenderPrev = RenderPrefix;
+export declare type PaginationRenderLabel = (info: {
+    type: 'fast-backward' | 'fast-forward';
+    node: VNode;
+    active: boolean;
+} | {
+    type: 'page';
+    node: number;
+    active: boolean;
+}) => VNodeChild;

package/es/pagination/src/utils.d.ts

@@ -1,7 +1,7 @@
 declare function pagesToShow(currentPage: number, pageCount: number, pageSlot?: number): number[];
 export declare type PageItem = {
-    type: 'fastBackward' | 'fastForward';
-    label: string;
+    type: 'fast-backward' | 'fast-forward';
+    label?: undefined;
     active: false;
 } | {
     type: 'page';

package/es/pagination/src/utils.js

@@ -45,14 +45,12 @@ function mapPagesToPageItems(pages, currentPage) {
         switch (page) {
             case -2:
                 return {
-                    type: 'fastBackward',
-                    label: 'fastBackward',
+                    type: 'fast-backward',
                     active: false
                 };
             case -1:
                 return {
-                    type: 'fastForward',
-                    label: 'fastForward',
+                    type: 'fast-forward',
                     active: false
                 };
             default:

package/es/popconfirm/src/Popconfirm.d.ts

@@ -75,6 +75,7 @@ declare const popconfirmProps: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -831,6 +832,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -1892,6 +1894,7 @@ declare const _default: import("vue").DefineComponent<{
     to?: unknown;
     internalSyncTargetWithParent?: unknown;
     internalInheritedEventHandlers?: unknown;
+    internalTrapFocus?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -1912,6 +1915,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -2625,6 +2629,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/es/popover/src/Popover.d.ts

@@ -18,6 +18,7 @@ export interface PopoverInjection {
     handleMouseEnter: (e: MouseEvent) => void;
     handleMouseMoveOutside: (e: MouseEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     getTriggerElement: () => HTMLElement;
     setBodyInstance: (value: BodyInstance | null) => void;
     zIndexRef: Ref<number | undefined>;
@@ -92,6 +93,7 @@ export declare const popoverBaseProps: {
         type: PropType<TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     /** @deprecated */
     onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
@@ -173,6 +175,7 @@ declare const popoverProps: {
         type: PropType<TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     /** @deprecated */
     onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
@@ -298,6 +301,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     /** @deprecated */
     onShow: PropType<MaybeArray<(value: boolean) => void> | undefined>;
     /** @deprecated */
@@ -397,6 +401,7 @@ declare const _default: import("vue").DefineComponent<{
     to?: unknown;
     internalSyncTargetWithParent?: unknown;
     internalInheritedEventHandlers?: unknown;
+    internalTrapFocus?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -416,6 +421,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -495,6 +501,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/es/popover/src/Popover.js

@@ -1,9 +1,10 @@
-import { h, ref, computed, createTextVNode, defineComponent, provide, toRef, cloneVNode, watchEffect } from 'vue';
+import { h, ref, computed, createTextVNode, defineComponent, provide, toRef, cloneVNode, watchEffect, withDirectives } from 'vue';
 import { VBinder, VTarget } from 'vueuc';
 import { useMergedState, useCompitable, useIsMounted, useMemo } from 'vooks';
 import { call, keep, getFirstSlotVNode, warnOnce, useAdjustedTo } from '../../_utils';
 import { useTheme } from '../../_mixins';
 import NPopoverBody, { popoverBodyProps } from './PopoverBody';
+import { zindexable } from 'vdirs';
 const bodyPropKeys = Object.keys(popoverBodyProps);
 const triggerEventMap = {
     focus: ['onFocus', 'onBlur'],
@@ -96,6 +97,7 @@ export const popoverBaseProps = {
         type: Array,
         default: () => []
     },
+    internalTrapFocus: Boolean,
     /** @deprecated */
     onShow: [Function, Array],
     /** @deprecated */
@@ -292,6 +294,15 @@ export default defineComponent({
                 doUpdateShow(nextShow);
             }
         }
+        function handleKeydown(e) {
+            if (!props.internalTrapFocus)
+                return;
+            if (e.code === 'Escape') {
+                clearShowTimer();
+                clearHideTimer();
+                doUpdateShow(false);
+            }
+        }
         function setShow(value) {
             uncontrolledShowRef.value = value;
         }
@@ -304,6 +315,7 @@ export default defineComponent({
         }
         provide('NPopover', {
             getTriggerElement,
+            handleKeydown,
             handleMouseEnter,
             handleMouseLeave,
             handleClickOutside,
@@ -426,6 +438,17 @@ export default defineComponent({
                 void this.mergedShowConsideringDisabledProp;
                 const mergedShow = this.getMergedShow();
                 return [
+                    this.internalTrapFocus && mergedShow
+                        ? withDirectives(h("div", { style: { position: 'fixed', inset: 0 } }), [
+                            [
+                                zindexable,
+                                {
+                                    enabled: mergedShow,
+                                    zIndex: this.zIndex
+                                }
+                            ]
+                        ])
+                        : null,
                     positionManually
                         ? null
                         : h(VTarget, null, {

package/es/popover/src/PopoverBody.d.ts

@@ -20,6 +20,7 @@ export declare const popoverBodyProps: {
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
+    internalTrapFocus: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     /** @deprecated */
@@ -92,6 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
+    internalTrapFocus: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
     /** @deprecated */
@@ -165,6 +167,7 @@ declare const _default: import("vue").DefineComponent<{
     overlap?: unknown;
     placement?: unknown;
     width?: unknown;
+    internalTrapFocus?: unknown;
     animated?: unknown;
     onClickoutside?: unknown;
     minWidth?: unknown;
@@ -178,6 +181,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
+    internalTrapFocus: boolean;
     animated: boolean;
 } & {
     x?: number | undefined;
@@ -242,6 +246,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
+    internalTrapFocus: boolean;
     animated: boolean;
 }>;
 export default _default;

package/es/popover/src/PopoverBody.js

@@ -1,5 +1,5 @@
 import { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide, renderSlot, Fragment } from 'vue';
-import { VFollower } from 'vueuc';
+import { VFollower, VFocusTrap } from 'vueuc';
 import { clickoutside, mousemoveoutside } from 'vdirs';
 import { useTheme, useConfig } from '../../_mixins';
 import { formatLength, useAdjustedTo } from '../../_utils';
@@ -8,7 +8,7 @@ import style from './styles/index.cssr';
 import { popoverBodyInjectionKey } from './interface';
 import { drawerBodyInjectionKey } from '../../drawer/src/interface';
 import { modalBodyInjectionKey } from '../../modal/src/interface';
-export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], 
+export const popoverBodyProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, show: Boolean, trigger: String, showArrow: Boolean, delay: Number, duration: Number, raw: Boolean, arrowStyle: [String, Object], displayDirective: String, x: Number, y: Number, flip: Boolean, overlap: Boolean, placement: String, width: [Number, String], internalTrapFocus: Boolean, 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -98,7 +98,6 @@ export default defineComponent({
         });
         function syncPosition() {
             var _a;
-            // eslint-disable-next-line no-unused-expressions
             (_a = followerRef.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
         }
         function handleMouseEnter(e) {
@@ -136,6 +135,18 @@ export default defineComponent({
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
             if (!renderBody) {
                 const { value: extraClass } = NPopover.extraClassRef;
+                const { internalTrapFocus } = props;
+                const renderContentInnerNode = () => [
+                    slots.header ? (h(Fragment, null,
+                        h("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
+                        h("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : (renderSlot(slots, 'default')),
+                    props.showArrow
+                        ? renderArrow({
+                            arrowStyle: props.arrowStyle,
+                            clsPrefix: mergedClsPrefix
+                        })
+                        : null
+                ];
                 contentNode = h('div', mergeProps({
                     class: [
                         `${mergedClsPrefix}-popover`,
@@ -149,19 +160,10 @@ export default defineComponent({
                     ],
                     ref: bodyRef,
                     style: styleRef.value,
+                    onKeydown: NPopover.handleKeydown,
                     onMouseenter: handleMouseEnter,
                     onMouseleave: handleMouseLeave
-                }, attrs), [
-                    slots.header ? (h(Fragment, null,
-                        h("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
-                        h("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : (renderSlot(slots, 'default')),
-                    props.showArrow
-                        ? renderArrow({
-                            arrowStyle: props.arrowStyle,
-                            clsPrefix: mergedClsPrefix
-                        })
-                        : null
-                ]);
+                }, attrs), internalTrapFocus ? (h(VFocusTrap, { active: props.show, focusFirstDescendant: true }, { default: renderContentInnerNode })) : (renderContentInnerNode()));
             }
             else {
                 contentNode = renderBody(
@@ -188,39 +190,19 @@ export default defineComponent({
         };
     },
     render() {
-        return h(VFollower, {
-            zIndex: this.zIndex,
-            show: this.show,
-            enabled: this.followerEnabled,
-            to: this.adjustedTo,
-            x: this.x,
-            y: this.y,
-            flip: this.flip,
-            placement: this.placement,
-            containerClass: this.namespace,
-            ref: 'followerRef',
-            overlap: this.overlap,
-            width: this.width === 'trigger' ? 'target' : undefined,
-            teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey
-        }, {
+        return (h(VFollower, { zIndex: this.zIndex, show: this.show, enabled: this.followerEnabled, to: this.adjustedTo, x: this.x, y: this.y, flip: this.flip, placement: this.placement, containerClass: this.namespace, ref: "followerRef", overlap: this.overlap, width: this.width === 'trigger' ? 'target' : undefined, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
             default: () => {
-                return this.animated
-                    ? h(Transition, {
-                        name: 'popover-transition',
-                        appear: this.isMounted,
-                        // Don't use watch to enable follower, since the transition may
-                        // make position sync timing very subtle and buggy.
-                        onEnter: () => {
-                            this.followerEnabled = true;
-                        },
-                        onAfterLeave: () => {
-                            this.followerEnabled = false;
-                        }
-                    }, {
-                        default: this.renderContentNode
-                    })
-                    : this.renderContentNode();
+                return this.animated ? (h(Transition, { name: "popover-transition", appear: this.isMounted, 
+                    // Don't use watch to enable follower, since the transition may
+                    // make position sync timing very subtle and buggy.
+                    onEnter: () => {
+                        this.followerEnabled = true;
+                    }, onAfterLeave: () => {
+                        this.followerEnabled = false;
+                    } }, {
+                    default: this.renderContentNode
+                })) : (this.renderContentNode());
             }
-        });
+        }));
     }
 });

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

@@ -70,44 +70,45 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  pointer-events: all;
  `)])]), placementStyle('top-start', `
  top: calc(-0.707 * var(--n-arrow-height));
- left: var(--n-arrow-offset);
+ left: calc(var(--n-arrow-offset) - var(--v-offset-left));
  `), placementStyle('top', `
  top: calc(-0.707 * var(--n-arrow-height));
  transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
  top: calc(-0.707 * var(--n-arrow-height));
- right: var(--n-arrow-offset);
+ right: calc(var(--n-arrow-offset) + var(--v-offset-left));
  `), placementStyle('bottom-start', `
  bottom: calc(-0.707 * var(--n-arrow-height));
- left: var(--n-arrow-offset);
+ left: calc(var(--n-arrow-offset) - var(--v-offset-left));
  `), placementStyle('bottom', `
  bottom: calc(-0.707 * var(--n-arrow-height));
  transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
  bottom: calc(-0.707 * var(--n-arrow-height));
- right: var(--n-arrow-offset);
+ right: calc(var(--n-arrow-offset) + var(--v-offset-left));
  `), placementStyle('left-start', `
  left: calc(-0.707 * var(--n-arrow-height));
- top: var(--n-arrow-offset-vertical);
+ top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
  `), placementStyle('left', `
  left: calc(-0.707 * var(--n-arrow-height));
  transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
  left: calc(-0.707 * var(--n-arrow-height));
- bottom: var(--n-arrow-offset-vertical);
+ bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
+ 
  `), placementStyle('right-start', `
  right: calc(-0.707 * var(--n-arrow-height));
- top: var(--n-arrow-offset-vertical);
+ top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
  `), placementStyle('right', `
  right: calc(-0.707 * var(--n-arrow-height));
  transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
  right: calc(-0.707 * var(--n-arrow-height));
- bottom: var(--n-arrow-offset-vertical);
+ bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
  `)]);
 
 function placementStyle(placement, arrowStyleLiteral) {