naive-ui 2.22.0 → 2.24.0

package/lib/pagination/src/styles/index.cssr.js

@@ -5,72 +5,72 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --item-font-size
-// --select-width
-// --input-width
-// --input-margin
-// --item-size
-// --item-text-color
-// --item-text-color-disabled
-// --item-text-color-hover
-// --item-text-color-active
-// --item-color
-// --item-color-hover
-// --item-color-disabled
-// --item-color-active
-// --item-color-active-hover
-// --item-border
-// --item-border-hover
-// --item-border-disabled
-// --item-border-active
-// --item-padding
-// --item-font-size
-// --item-border-radius
-// --bezier
-// --jumper-font-size
-// --jumper-text-color
-// --jumper-text-color-disabled
-// --item-margin
-// --button-icon-size
-// --button-icon-color
-// --button-icon-color-hover
-// --button-icon-color-pressed
-// --prefix-margin
-// --suffix-margin
-// --button-color
-// --button-color-hover
-// --button-color-pressed
+// --n-item-font-size
+// --n-select-width
+// --n-input-width
+// --n-input-margin
+// --n-item-size
+// --n-item-text-color
+// --n-item-text-color-disabled
+// --n-item-text-color-hover
+// --n-item-text-color-active
+// --n-item-color
+// --n-item-color-hover
+// --n-item-color-disabled
+// --n-item-color-active
+// --n-item-color-active-hover
+// --n-item-border
+// --n-item-border-hover
+// --n-item-border-disabled
+// --n-item-border-active
+// --n-item-padding
+// --n-item-font-size
+// --n-item-border-radius
+// --n-bezier
+// --n-jumper-font-size
+// --n-jumper-text-color
+// --n-jumper-text-color-disabled
+// --n-item-margin
+// --n-button-icon-size
+// --n-button-icon-color
+// --n-button-icon-color-hover
+// --n-button-icon-color-pressed
+// --n-prefix-margin
+// --n-suffix-margin
+// --n-button-color
+// --n-button-color-hover
+// --n-button-color-pressed
 
 
 exports.default = (0, cssr_1.cB)('pagination', `
  display: flex;
  vertical-align: middle;
- font-size: var(--item-font-size);
+ font-size: var(--n-item-font-size);
  flex-wrap: nowrap;
 `, [(0, cssr_1.cB)('pagination-prefix', `
  display: flex;
  align-items: center;
- margin: var(--prefix-margin);
+ margin: var(--n-prefix-margin);
  `), (0, cssr_1.cB)('pagination-suffix', `
  display: flex;
  align-items: center;
- margin: var(--suffix-margin);
+ margin: var(--n-suffix-margin);
  `), (0, cssr_1.c)('> *:not(:first-child)', {
-  margin: 'var(--item-margin)'
+  margin: 'var(--n-item-margin)'
 }), (0, cssr_1.cB)('select', {
-  width: 'var(--select-width)'
+  width: 'var(--n-select-width)'
 }), (0, cssr_1.c)('&.transition-disabled', [(0, cssr_1.cB)('pagination-item', {
   transition: 'none!important'
 })]), (0, cssr_1.cB)('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
- color: var(--jumper-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-jumper-text-color);
+ transition: color .3s var(--n-bezier);
  align-items: center;
- font-size: var(--jumter-font-size);
+ font-size: var(--n-jumter-font-size);
  `, [(0, cssr_1.cB)('input', `
- margin: var(--input-margin);
- width: var(--input-width);
+ margin: var(--n-input-margin);
+ width: var(--n-input-width);
  `)]), (0, cssr_1.cB)('pagination-item', `
  position: relative;
  cursor: pointer;
@@ -79,55 +79,55 @@ exports.default = (0, cssr_1.cB)('pagination', `
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
- min-width: var(--item-size);
- height: var(--item-size);
- padding: var(--item-padding);
- background-color: var(--item-color);
- color: var(--item-text-color);
- border-radius: var(--item-border-radius);
- border: var(--item-border);
- fill: var(--button-icon-color);
+ min-width: var(--n-item-size);
+ height: var(--n-item-size);
+ padding: var(--n-item-padding);
+ background-color: var(--n-item-color);
+ color: var(--n-item-text-color);
+ border-radius: var(--n-item-border-radius);
+ border: var(--n-item-border);
+ fill: var(--n-button-icon-color);
  transition:
- color .3s var(--bezier),
- border-color .3s var(--bezier),
- background-color .3s var(--bezier),
- fill .3s var(--bezier);
+ color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ fill .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('button', `
- background: var(--button-color);
- color: var(--button-icon-color);
- border: var(--button-border);
+ background: var(--n-button-color);
+ color: var(--n-button-icon-color);
+ border: var(--n-button-border);
  `, [(0, cssr_1.cB)('base-icon', `
- font-size: var(--button-icon-size);
+ font-size: var(--n-button-icon-size);
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  background: 'var(--item-color-hover)',
-  color: 'var(--item-text-color-hover)',
-  border: 'var(--item-border-hover)'
+  background: 'var(--n-item-color-hover)',
+  color: 'var(--n-item-text-color-hover)',
+  border: 'var(--n-item-border-hover)'
 }, [(0, cssr_1.cM)('button', {
-  background: 'var(--button-color-hover)',
-  border: 'var(--button-border-hover)',
-  color: 'var(--button-icon-color-hover)'
+  background: 'var(--n-button-color-hover)',
+  border: 'var(--n-button-border-hover)',
+  color: 'var(--n-button-icon-color-hover)'
 })]), (0, cssr_1.c)('&:active', {
-  background: 'var(--item-color-pressed)',
-  color: 'var(--item-text-color-pressed)',
-  border: 'var(--item-border-pressed)'
+  background: 'var(--n-item-color-pressed)',
+  color: 'var(--n-item-text-color-pressed)',
+  border: 'var(--n-item-border-pressed)'
 }, [(0, cssr_1.cM)('button', {
-  background: 'var(--button-color-pressed)',
-  border: 'var(--button-border-pressed)',
-  color: 'var(--button-icon-color-pressed)'
+  background: 'var(--n-button-color-pressed)',
+  border: 'var(--n-button-border-pressed)',
+  color: 'var(--n-button-icon-color-pressed)'
 })]), (0, cssr_1.cM)('active', {
-  background: 'var(--item-color-active)',
-  color: 'var(--item-text-color-active)',
-  border: 'var(--item-border-active)'
+  background: 'var(--n-item-color-active)',
+  color: 'var(--n-item-text-color-active)',
+  border: 'var(--n-item-border-active)'
 }, [(0, cssr_1.c)('&:hover', {
-  background: 'var(--item-color-active-hover)'
+  background: 'var(--n-item-color-active-hover)'
 })])]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
- color: var(--item-text-color-disabled);
+ color: var(--n-item-text-color-disabled);
  `, [(0, cssr_1.cM)('active, button', {
-  backgroundColor: 'var(--item-color-disabled)',
-  border: 'var(--item-border-disabled)'
+  backgroundColor: 'var(--n-item-color-disabled)',
+  border: 'var(--n-item-border-disabled)'
 })])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed'
 }, [(0, cssr_1.cB)('pagination-quick-jumper', {
-  color: 'var(--jumper-text-color-disabled)'
+  color: 'var(--n-jumper-text-color-disabled)'
 })])]);

package/lib/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/lib/pagination/src/utils.js

@@ -49,14 +49,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/lib/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;
@@ -1907,16 +1910,17 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;
     overlap: boolean;
+    showIcon: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    showIcon: boolean;
 } & {
     show?: boolean | undefined;
     x?: number | undefined;
@@ -2620,16 +2624,17 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;
     overlap: boolean;
+    showIcon: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     arrow: boolean | undefined;
-    showIcon: boolean;
 }>;
 export default _default;

package/lib/popconfirm/src/PopconfirmPanel.d.ts

@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--icon-size': string;
-        '--icon-color': string;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-icon-size': string;
+        '--n-icon-color': string;
     }>;
     localizedPositiveText: import("vue").ComputedRef<string>;
     localizedNegativeText: import("vue").ComputedRef<string>;

package/lib/popconfirm/src/PopconfirmPanel.js

@@ -35,10 +35,10 @@ exports.default = (0, vue_1.defineComponent)({
         return Object.assign(Object.assign({}, (0, _mixins_1.useLocale)('Popconfirm')), { mergedClsPrefix: mergedClsPrefixRef, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, iconSize, iconColor } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--icon-size': iconSize,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-icon-size': iconSize,
+                    '--n-icon-color': iconColor
                 };
             }), localizedPositiveText: (0, vue_1.computed)(() => {
                 return props.positiveText || localeRef.value.positiveText;

package/lib/popconfirm/src/styles/index.cssr.js

@@ -5,23 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --font-size
-// --icon-size
-// --bezier
-// --icon-color
+// --n-font-size
+// --n-icon-size
+// --n-bezier
+// --n-icon-color
 
 
 exports.default = (0, cssr_1.cB)('popconfirm', [(0, cssr_1.cE)('body', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  `, [(0, cssr_1.cE)('icon', `
  display: flex;
- font-size: var(--icon-size);
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-icon-size);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  margin: 0 8px 0 0;
  `)]), (0, cssr_1.cE)('action', `
  margin-top: 8px;

package/lib/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/lib/popover/src/Popover.js

@@ -26,6 +26,7 @@ const vooks_1 = require("vooks");
 const _utils_1 = require("../../_utils");
 const _mixins_1 = require("../../_mixins");
 const PopoverBody_1 = __importStar(require("./PopoverBody"));
+const vdirs_1 = require("vdirs");
 const bodyPropKeys = Object.keys(PopoverBody_1.popoverBodyProps);
 const triggerEventMap = {
     focus: ['onFocus', 'onBlur'],
@@ -118,6 +119,7 @@ exports.popoverBaseProps = {
         type: Array,
         default: () => []
     },
+    internalTrapFocus: Boolean,
     /** @deprecated */
     onShow: [Function, Array],
     /** @deprecated */
@@ -314,6 +316,15 @@ exports.default = (0, vue_1.defineComponent)({
                 doUpdateShow(nextShow);
             }
         }
+        function handleKeydown(e) {
+            if (!props.internalTrapFocus)
+                return;
+            if (e.code === 'Escape') {
+                clearShowTimer();
+                clearHideTimer();
+                doUpdateShow(false);
+            }
+        }
         function setShow(value) {
             uncontrolledShowRef.value = value;
         }
@@ -326,6 +337,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         (0, vue_1.provide)('NPopover', {
             getTriggerElement,
+            handleKeydown,
             handleMouseEnter,
             handleMouseLeave,
             handleClickOutside,
@@ -448,6 +460,17 @@ exports.default = (0, vue_1.defineComponent)({
                 void this.mergedShowConsideringDisabledProp;
                 const mergedShow = this.getMergedShow();
                 return [
+                    this.internalTrapFocus && mergedShow
+                        ? (0, vue_1.withDirectives)((0, vue_1.h)("div", { style: { position: 'fixed', inset: 0 } }), [
+                            [
+                                vdirs_1.zindexable,
+                                {
+                                    enabled: mergedShow,
+                                    zIndex: this.zIndex
+                                }
+                            ]
+                        ])
+                        : null,
                     positionManually
                         ? null
                         : (0, vue_1.h)(vueuc_1.VTarget, null, {

package/lib/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/lib/popover/src/PopoverBody.js

@@ -14,7 +14,7 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const interface_1 = require("./interface");
 const interface_2 = require("../../drawer/src/interface");
 const interface_3 = require("../../modal/src/interface");
-exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.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], 
+exports.popoverBodyProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { to: _utils_1.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 */
@@ -68,21 +68,21 @@ exports.default = (0, vue_1.defineComponent)({
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { space, spaceArrow, padding, fontSize, textColor, dividerColor, color, boxShadow, borderRadius, arrowHeight, arrowOffset, arrowOffsetVertical } } = themeRef.value;
             return {
-                '--box-shadow': boxShadow,
-                '--bezier': cubicBezierEaseInOut,
-                '--bezier-ease-in': cubicBezierEaseIn,
-                '--bezier-ease-out': cubicBezierEaseOut,
-                '--font-size': fontSize,
-                '--text-color': textColor,
-                '--color': color,
-                '--divider-color': dividerColor,
-                '--border-radius': borderRadius,
-                '--arrow-height': arrowHeight,
-                '--arrow-offset': arrowOffset,
-                '--arrow-offset-vertical': arrowOffsetVertical,
-                '--padding': padding,
-                '--space': space,
-                '--space-arrow': spaceArrow
+                '--n-box-shadow': boxShadow,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-bezier-ease-in': cubicBezierEaseIn,
+                '--n-bezier-ease-out': cubicBezierEaseOut,
+                '--n-font-size': fontSize,
+                '--n-text-color': textColor,
+                '--n-color': color,
+                '--n-divider-color': dividerColor,
+                '--n-border-radius': borderRadius,
+                '--n-arrow-height': arrowHeight,
+                '--n-arrow-offset': arrowOffset,
+                '--n-arrow-offset-vertical': arrowOffsetVertical,
+                '--n-padding': padding,
+                '--n-space': space,
+                '--n-space-arrow': spaceArrow
             };
         });
         NPopover.setBodyInstance({
@@ -105,7 +105,6 @@ exports.default = (0, vue_1.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) {
@@ -143,6 +142,18 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
             if (!renderBody) {
                 const { value: extraClass } = NPopover.extraClassRef;
+                const { internalTrapFocus } = props;
+                const renderContentInnerNode = () => [
+                    slots.header ? ((0, vue_1.h)(vue_1.Fragment, null,
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
+                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : ((0, vue_1.renderSlot)(slots, 'default')),
+                    props.showArrow
+                        ? (0, exports.renderArrow)({
+                            arrowStyle: props.arrowStyle,
+                            clsPrefix: mergedClsPrefix
+                        })
+                        : null
+                ];
                 contentNode = (0, vue_1.h)('div', (0, vue_1.mergeProps)({
                     class: [
                         `${mergedClsPrefix}-popover`,
@@ -156,19 +167,10 @@ exports.default = (0, vue_1.defineComponent)({
                     ],
                     ref: bodyRef,
                     style: styleRef.value,
+                    onKeydown: NPopover.handleKeydown,
                     onMouseenter: handleMouseEnter,
                     onMouseleave: handleMouseLeave
-                }, attrs), [
-                    slots.header ? ((0, vue_1.h)(vue_1.Fragment, null,
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : ((0, vue_1.renderSlot)(slots, 'default')),
-                    props.showArrow
-                        ? (0, exports.renderArrow)({
-                            arrowStyle: props.arrowStyle,
-                            clsPrefix: mergedClsPrefix
-                        })
-                        : null
-                ]);
+                }, attrs), internalTrapFocus ? ((0, vue_1.h)(vueuc_1.VFocusTrap, { active: props.show, focusFirstDescendant: true }, { default: renderContentInnerNode })) : (renderContentInnerNode()));
             }
             else {
                 contentNode = renderBody(
@@ -195,39 +197,19 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        return (0, vue_1.h)(vueuc_1.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 === _utils_1.useAdjustedTo.tdkey
-        }, {
+        return ((0, vue_1.h)(vueuc_1.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 === _utils_1.useAdjustedTo.tdkey }, {
             default: () => {
-                return this.animated
-                    ? (0, vue_1.h)(vue_1.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 ? ((0, vue_1.h)(vue_1.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());
             }
-        });
+        }));
     }
 });