naive-ui 2.23.2 → 2.24.3

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 */
@@ -149,45 +151,32 @@ declare const _default: import("vue").DefineComponent<{
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
     followerEnabled: import("vue").Ref<boolean>;
     renderContentNode: () => VNode | null;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    to?: unknown;
-    show?: unknown;
-    trigger?: unknown;
-    showArrow?: unknown;
-    delay?: unknown;
-    duration?: unknown;
-    raw?: unknown;
-    arrowStyle?: unknown;
-    displayDirective?: unknown;
-    x?: unknown;
-    y?: unknown;
-    flip?: unknown;
-    overlap?: unknown;
-    placement?: unknown;
-    width?: unknown;
-    animated?: unknown;
-    onClickoutside?: unknown;
-    minWidth?: unknown;
-    maxWidth?: unknown;
-    theme?: unknown;
-    themeOverrides?: unknown;
-    builtinThemeOverrides?: unknown;
-} & {
-    show: boolean;
-    flip: boolean;
-    raw: boolean;
-    overlap: boolean;
-    showArrow: boolean;
-    animated: boolean;
-} & {
-    x?: number | undefined;
-    y?: number | undefined;
-    maxWidth?: number | undefined;
-    minWidth?: number | undefined;
-    width?: number | "trigger" | undefined;
-    duration?: number | undefined;
-    to?: string | boolean | HTMLElement | undefined;
-    theme?: import("../../_mixins").Theme<"Popover", {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: PropType<string | boolean | HTMLElement>;
+        default: undefined;
+    };
+    show: BooleanConstructor;
+    trigger: PropType<PopoverTrigger>;
+    showArrow: BooleanConstructor;
+    delay: NumberConstructor;
+    duration: NumberConstructor;
+    raw: BooleanConstructor;
+    arrowStyle: PropType<string | CSSProperties>;
+    displayDirective: PropType<"show" | "if">;
+    x: NumberConstructor;
+    y: NumberConstructor;
+    flip: BooleanConstructor;
+    overlap: BooleanConstructor;
+    placement: PropType<FollowerPlacement>;
+    width: PropType<number | "trigger">;
+    internalTrapFocus: BooleanConstructor;
+    animated: BooleanConstructor;
+    onClickoutside: PropType<(e: MouseEvent) => void>;
+    /** @deprecated */
+    minWidth: NumberConstructor;
+    maxWidth: NumberConstructor;
+    theme: PropType<import("../../_mixins").Theme<"Popover", {
         fontSize: string;
         borderRadius: string;
         color: string;
@@ -200,8 +189,8 @@ declare const _default: import("vue").DefineComponent<{
         arrowOffsetVertical: string;
         arrowHeight: string;
         padding: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
+    }, any>>;
+    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
         fontSize: string;
         borderRadius: string;
         color: string;
@@ -214,8 +203,8 @@ declare const _default: import("vue").DefineComponent<{
         arrowOffsetVertical: string;
         arrowHeight: string;
         padding: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
+    }, any>>>;
+    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Popover", {
         fontSize: string;
         borderRadius: string;
         color: string;
@@ -228,20 +217,15 @@ declare const _default: import("vue").DefineComponent<{
         arrowOffsetVertical: string;
         arrowHeight: string;
         padding: string;
-    }, any>> | undefined;
-    placement?: FollowerPlacement | undefined;
-    trigger?: PopoverTrigger | undefined;
-    arrowStyle?: string | CSSProperties | undefined;
-    delay?: number | undefined;
-    displayDirective?: "show" | "if" | undefined;
-    onClickoutside?: ((e: MouseEvent) => void) | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     show: boolean;
     flip: boolean;
     to: string | boolean | HTMLElement;
     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 { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide, Fragment } from 'vue';
+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,21 @@ export default defineComponent({
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
             if (!renderBody) {
                 const { value: extraClass } = NPopover.extraClassRef;
+                const { internalTrapFocus } = props;
+                const renderContentInnerNode = () => {
+                    var _a;
+                    return [
+                        slots.header ? (h(Fragment, null,
+                            h("div", { class: `${mergedClsPrefix}-popover__header` }, slots.header()),
+                            h("div", { class: `${mergedClsPrefix}-popover__content` }, slots))) : ((_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)),
+                        props.showArrow
+                            ? renderArrow({
+                                arrowStyle: props.arrowStyle,
+                                clsPrefix: mergedClsPrefix
+                            })
+                            : null
+                    ];
+                };
                 contentNode = h('div', mergeProps({
                     class: [
                         `${mergedClsPrefix}-popover`,
@@ -149,19 +163,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, autoFocus: true }, { default: renderContentInnerNode })) : (renderContentInnerNode()));
             }
             else {
                 contentNode = renderBody(
@@ -188,39 +193,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/interface.d.ts

@@ -1,9 +1,9 @@
-import { Ref, InjectionKey, CSSProperties, VNode } from 'vue';
+import { Ref, CSSProperties, VNode } from 'vue';
 export declare type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
 export interface PopoverInst {
     syncPosition: () => void;
     setShow: (value: boolean) => void;
 }
 export declare type PopoverBodyInjection = Ref<HTMLElement | null> | null;
-export declare const popoverBodyInjectionKey: InjectionKey<PopoverBodyInjection>;
+export declare const popoverBodyInjectionKey: import("vue").InjectionKey<PopoverBodyInjection>;
 export declare type InternalRenderBody = (className: any, ref: Ref<HTMLElement | null>, style: Ref<CSSProperties>, onMouseenter: (e: MouseEvent) => void, onMouseleave: (e: MouseEvent) => void) => VNode;

package/es/popover/src/interface.js

@@ -1 +1,2 @@
-export const popoverBodyInjectionKey = Symbol('popoverBodyInjection');
+import { createInjectionKey } from '../../_utils/vue/create-injection-key';
+export const popoverBodyInjectionKey = createInjectionKey('n-popover-body');

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) {