naive-ui 2.24.4 → 2.25.0

package/es/notification/src/NotificationEnvironment.js

@@ -1,6 +1,6 @@
 import { nextTick, Transition, h, defineComponent, ref, onMounted } from 'vue';
 import { keep } from '../../_utils';
-import NNotification, { notificationProps, notificationPropKeys } from './Notification';
+import { Notification, notificationProps, notificationPropKeys } from './Notification';
 export const notificationEnvOptions = Object.assign(Object.assign({}, notificationProps), { duration: Number, onClose: Function, onLeave: Function, onAfterEnter: Function, onAfterLeave: Function, 
     /** @deprecated */
     onHide: Function, 
@@ -8,7 +8,7 @@ export const notificationEnvOptions = Object.assign(Object.assign({}, notificati
     onAfterShow: Function, 
     /** @deprecated */
     onAfterHide: Function });
-export default defineComponent({
+export const NotificationEnvironment = defineComponent({
     name: 'NotificationEnvironment',
     props: Object.assign(Object.assign({}, notificationEnvOptions), { 
         // private
@@ -103,7 +103,7 @@ export default defineComponent({
             // convert to any since Element is not compitable with HTMLElement
             onBeforeEnter: this.handleBeforeEnter, onAfterEnter: this.handleAfterEnter, onBeforeLeave: this.handleBeforeLeave, onLeave: this.handleLeave, onAfterLeave: this.handleAfterLeave }, {
             default: () => {
-                return this.show ? (h(NNotification, Object.assign({}, keep(this.$props, notificationPropKeys), { onClose: this.handleClose }))) : null;
+                return this.show ? (h(Notification, Object.assign({}, keep(this.$props, notificationPropKeys), { onClose: this.handleClose }))) : null;
             }
         }));
     }

package/es/notification/src/NotificationProvider.d.ts

@@ -1,14 +1,14 @@
-import { PropType, ExtractPropTypes, Ref } from 'vue';
+import { PropType, ExtractPropTypes, Ref, CSSProperties } from 'vue';
 import type { MergedTheme } from '../../_mixins';
 import { ExtractPublicPropTypes, Mutable } from '../../_utils';
 import { NotificationTheme } from '../styles';
 import { notificationEnvOptions } from './NotificationEnvironment';
+export declare type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export declare type NotificationOptions = Partial<ExtractPropTypes<typeof notificationEnvOptions>>;
 export interface NotificationProviderInjection {
     mergedClsPrefixRef: Ref<string>;
     mergedThemeRef: Ref<MergedTheme<NotificationTheme>>;
 }
-export declare const notificationProviderInjectionKey: import("vue").InjectionKey<NotificationProviderInjection>;
 declare type Create = (options: NotificationOptions) => NotificationReactive;
 declare type TypedCreate = (options: Omit<NotificationOptions, 'type'>) => NotificationReactive;
 export interface NotificationApiInjection {
@@ -23,6 +23,7 @@ export interface NotificationApiInjection {
 }
 export declare type NotificationProviderInst = NotificationApiInjection;
 export declare const notificationApiInjectionKey: import("vue").InjectionKey<NotificationApiInjection>;
+export declare type NotificationType = 'info' | 'success' | 'warning' | 'error';
 export declare type NotificationReactive = {
     readonly key: string;
     readonly destroy: () => void;
@@ -35,6 +36,7 @@ interface NotificationRef {
     hide: () => void;
 }
 declare const notificationProviderProps: {
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -42,7 +44,7 @@ declare const notificationProviderProps: {
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -135,6 +137,7 @@ declare const notificationProviderProps: {
 };
 export declare type NotificationProviderProps = ExtractPublicPropTypes<typeof notificationProviderProps>;
 declare const _default: import("vue").DefineComponent<{
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -142,7 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -239,7 +242,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly destroy: () => void;
         readonly hide: () => void;
         readonly deactivate: () => void;
-        type?: "default" | "error" | "info" | "success" | "warning" | undefined;
+        type?: "default" | "success" | "error" | "warning" | "info" | undefined;
         closable?: boolean | undefined;
         meta?: string | (() => import("vue").VNodeChild) | undefined;
         content?: string | (() => import("vue").VNodeChild) | undefined;
@@ -267,6 +270,7 @@ declare const _default: import("vue").DefineComponent<{
     open: (options: NotificationOptions) => NotificationReactive;
     destroyAll: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
         type: BooleanConstructor;
@@ -274,7 +278,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     max: NumberConstructor;
     placement: {
-        type: PropType<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<NotificationPlacement>;
         default: string;
     };
     theme: PropType<import("../../_mixins").Theme<"Notification", {
@@ -365,7 +369,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    placement: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: NotificationPlacement;
     scrollable: boolean;
 }>;
 export default _default;

package/es/notification/src/NotificationProvider.js

@@ -4,12 +4,12 @@ import { createId } from 'seemly';
 import { useConfig, useTheme } from '../../_mixins';
 import { omit, createInjectionKey } from '../../_utils';
 import { notificationLight } from '../styles';
-import NotificationContainer from './NotificationContainer';
-import NotificationEnvironment from './NotificationEnvironment';
+import { NotificationContainer } from './NotificationContainer';
+import { NotificationEnvironment } from './NotificationEnvironment';
+import { notificationProviderInjectionKey } from './context';
 import style from './styles/index.cssr';
-export const notificationProviderInjectionKey = createInjectionKey('n-notification-provider');
 export const notificationApiInjectionKey = createInjectionKey('n-notification-api');
-const notificationProviderProps = Object.assign(Object.assign({}, useTheme.props), { to: [String, Object], scrollable: {
+const notificationProviderProps = Object.assign(Object.assign({}, useTheme.props), { containerStyle: [String, Object], to: [String, Object], scrollable: {
         type: Boolean,
         default: true
     }, max: Number, placement: {
@@ -63,7 +63,7 @@ export default defineComponent({
             leavingKeySet.delete(key);
             notificationListRef.value.splice(notificationListRef.value.findIndex((notification) => notification.key === key), 1);
         }
-        const themeRef = useTheme('Notification', 'Notification', style, notificationLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Notification', '-notification', style, notificationLight, props, mergedClsPrefixRef);
         const api = {
             create,
             info: apis[0],
@@ -99,7 +99,7 @@ export default defineComponent({
         return (h(Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             this.notificationList.length ? (h(Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
-                h(NotificationContainer, { scrollable: this.scrollable, placement: this.placement }, {
+                h(NotificationContainer, { style: this.containerStyle, scrollable: this.scrollable, placement: this.placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return (h(NotificationEnvironment, Object.assign({ ref: ((inst) => {

package/es/notification/src/context.d.ts

@@ -0,0 +1,2 @@
+import type { NotificationProviderInjection } from './NotificationProvider';
+export declare const notificationProviderInjectionKey: import("vue").InjectionKey<NotificationProviderInjection>;

package/es/notification/src/context.js

@@ -0,0 +1,2 @@
+import { createInjectionKey } from '../../_utils';
+export const notificationProviderInjectionKey = createInjectionKey('n-notification-provider');

package/es/page-header/src/PageHeader.js

@@ -12,7 +12,7 @@ export default defineComponent({
     props: pageHeaderProps,
     setup(props) {
         const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const themeRef = useTheme('PageHeader', 'PageHeader', style, pageHeaderLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('PageHeader', '-page-header', style, pageHeaderLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = useRtl('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
         return {
             rtlEnabled: rtlEnabledRef,

package/es/pagination/src/Pagination.js

@@ -50,7 +50,7 @@ export default defineComponent({
             });
         }
         const { NConfigProvider, mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Pagination', 'Pagination', style, paginationLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Pagination', '-pagination', style, paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Pagination');
         const selfRef = ref(null);
         const jumperRef = ref(null);

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

@@ -33,7 +33,7 @@ declare const popconfirmProps: {
     };
     raw: BooleanConstructor;
     placement: {
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -58,11 +58,15 @@ declare const popconfirmProps: {
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -790,7 +794,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     placement: {
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -815,11 +819,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -1894,7 +1902,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     raw: BooleanConstructor;
     placement: {
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
         default: string;
     };
     x: NumberConstructor;
@@ -1919,11 +1927,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<import("../../_utils").MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -2625,13 +2637,14 @@ declare const _default: import("vue").DefineComponent<{
     duration: number;
     to: string | boolean | HTMLElement;
     raw: boolean;
-    placement: import("vueuc").FollowerPlacement;
-    overlap: boolean;
     showIcon: boolean;
+    placement: import("vueuc/lib/binder/src/interface").Placement;
+    overlap: boolean;
     trigger: PopoverTrigger;
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;

package/es/popconfirm/src/Popconfirm.js

@@ -20,7 +20,7 @@ export default defineComponent({
     __popover__: true,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig();
-        const themeRef = useTheme('Popconfirm', 'Popconfirm', style, popconfirmLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Popconfirm', '-popconfirm', style, popconfirmLight, props, mergedClsPrefixRef);
         const popoverInstRef = ref(null);
         function handlePositiveClick(e) {
             const { onPositiveClick, 'onUpdate:show': onUpdateShow } = props;

package/es/popover/index.d.ts

@@ -1,3 +1,4 @@
 export { default as NPopover } from './src/Popover';
 export type { PopoverProps } from './src/Popover';
 export type { PopoverTrigger, PopoverInst } from './src/interface';
+export type { FollowerPlacement as PopoverPlacement } from 'vueuc';

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

@@ -76,11 +76,15 @@ export declare const popoverBaseProps: {
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -158,11 +162,15 @@ declare const popoverProps: {
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -284,11 +292,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -423,11 +435,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     overlap: BooleanConstructor;
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onClickoutside: PropType<(e: MouseEvent) => void>;
     internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    onClickoutside: PropType<(e: MouseEvent) => void>;
     'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     zIndex: NumberConstructor;
@@ -510,6 +526,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;

package/es/popover/src/Popover.js

@@ -82,11 +82,15 @@ export const popoverBaseProps = {
         default: undefined
     },
     overlap: Boolean,
+    keepAliveOnHover: {
+        type: Boolean,
+        default: true
+    },
+    onClickoutside: Function,
     internalExtraClass: {
         type: Array,
         default: () => []
     },
-    onClickoutside: Function,
     // events
     'onUpdate:show': [Function, Array],
     onUpdateShow: [Function, Array],
@@ -454,7 +458,10 @@ export default defineComponent({
                         : h(VTarget, null, {
                             default: () => triggerVNode
                         }),
-                    h(NPopoverBody, keep(this.$props, bodyPropKeys, Object.assign(Object.assign({}, this.$attrs), { showArrow: this.mergedShowArrow, show: mergedShow })), slots)
+                    h(NPopoverBody, keep(this.$props, bodyPropKeys, Object.assign(Object.assign({}, this.$attrs), { showArrow: this.mergedShowArrow, show: mergedShow })), {
+                        default: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); },
+                        header: () => { var _a, _b; return (_b = (_a = this.$slots).header) === null || _b === void 0 ? void 0 : _b.call(_a); }
+                    })
                 ];
             }
         }));

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

@@ -20,6 +20,7 @@ export declare const popoverBodyProps: {
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
+    keepAliveOnHover: BooleanConstructor;
     internalTrapFocus: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
@@ -93,6 +94,7 @@ declare const _default: import("vue").DefineComponent<{
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
+    keepAliveOnHover: BooleanConstructor;
     internalTrapFocus: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
@@ -170,6 +172,7 @@ declare const _default: import("vue").DefineComponent<{
     overlap: BooleanConstructor;
     placement: PropType<FollowerPlacement>;
     width: PropType<number | "trigger">;
+    keepAliveOnHover: BooleanConstructor;
     internalTrapFocus: BooleanConstructor;
     animated: BooleanConstructor;
     onClickoutside: PropType<(e: MouseEvent) => void>;
@@ -225,6 +228,7 @@ declare const _default: import("vue").DefineComponent<{
     raw: boolean;
     overlap: boolean;
     showArrow: boolean;
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
 }>;

package/es/popover/src/PopoverBody.js

@@ -1,14 +1,14 @@
-import { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide, Fragment } from 'vue';
+import { h, vShow, withDirectives, Transition, ref, defineComponent, computed, mergeProps, inject, onBeforeUnmount, watch, toRef, provide } from 'vue';
 import { VFollower, VFocusTrap } from 'vueuc';
 import { clickoutside, mousemoveoutside } from 'vdirs';
 import { useTheme, useConfig } from '../../_mixins';
-import { formatLength, useAdjustedTo } from '../../_utils';
+import { formatLength, isSlotEmpty, resolveWrappedSlot, useAdjustedTo } from '../../_utils';
 import { popoverLight } from '../styles';
 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], internalTrapFocus: Boolean, 
+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], keepAliveOnHover: Boolean, internalTrapFocus: Boolean, 
     // private
     animated: Boolean, onClickoutside: Function, 
     /** @deprecated */
@@ -23,7 +23,7 @@ export default defineComponent({
     props: popoverBodyProps,
     setup(props, { slots, attrs }) {
         const { namespaceRef, mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Popover', 'Popover', style, popoverLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Popover', '-popover', style, popoverLight, props, mergedClsPrefixRef);
         const followerRef = ref(null);
         const NPopover = inject('NPopover');
         const bodyRef = ref(null);
@@ -101,12 +101,12 @@ export default defineComponent({
             (_a = followerRef.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
         }
         function handleMouseEnter(e) {
-            if (props.trigger === 'hover') {
+            if (props.trigger === 'hover' && props.keepAliveOnHover) {
                 NPopover.handleMouseEnter(e);
             }
         }
         function handleMouseLeave(e) {
-            if (props.trigger === 'hover') {
+            if (props.trigger === 'hover' && props.keepAliveOnHover) {
                 NPopover.handleMouseLeave(e);
             }
         }
@@ -139,9 +139,10 @@ export default defineComponent({
                 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)),
+                        resolveWrappedSlot(slots.header, (children) => [
+                            h("div", { class: `${mergedClsPrefix}-popover__header` }, children),
+                            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,
@@ -157,8 +158,9 @@ export default defineComponent({
                         {
                             [`${mergedClsPrefix}-popover--overlap`]: props.overlap,
                             [`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
-                            [`${mergedClsPrefix}-popover--show-header`]: !!slots.header,
-                            [`${mergedClsPrefix}-popover--raw`]: props.raw
+                            [`${mergedClsPrefix}-popover--show-header`]: !isSlotEmpty(slots.header),
+                            [`${mergedClsPrefix}-popover--raw`]: props.raw,
+                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual'
                         }
                     ],
                     ref: bodyRef,

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

@@ -114,9 +114,9 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];
   const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--n-space-arrow);' : 'width: var(--n-space-arrow);';
-  return c(`[v-placement="${placement}"] >`, [cB('popover', `
+  return c(`[v-placement="${placement}"] >`, [cB('popover', [cNotM('manual-trigger', `
  margin-${oppositePlacement[position]}: var(--n-space);
- `, [cM('show-arrow', `
+ `), cM('show-arrow', `
  margin-${oppositePlacement[position]}: var(--n-space-arrow);
  `), cM('overlap', `
  margin: 0;

package/es/popselect/src/Popselect.d.ts

@@ -8,7 +8,6 @@ declare const popselectProps: {
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -26,7 +25,7 @@ declare const popselectProps: {
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -44,6 +43,10 @@ declare const popselectProps: {
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -65,6 +68,10 @@ declare const popselectProps: {
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -299,7 +306,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -317,7 +323,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -335,6 +341,10 @@ declare const _default: import("vue").DefineComponent<{
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -356,6 +366,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -795,7 +809,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     cancelable: BooleanConstructor;
-    width: PropType<string | number>;
     options: {
         readonly type: PropType<import("../../select/src/interface").SelectMixedOption[]>;
         readonly default: () => never[];
@@ -813,7 +826,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
-        type: PropType<import("vueuc").FollowerPlacement>;
+        type: PropType<import("vueuc/lib/binder/src/interface").Placement>;
     };
     trigger: {
         type: PropType<PopoverTrigger>;
@@ -831,6 +844,10 @@ declare const _default: import("vue").DefineComponent<{
     y: NumberConstructor;
     maxWidth: NumberConstructor;
     minWidth: NumberConstructor;
+    width: {
+        type: PropType<number | "trigger">;
+        default: undefined;
+    };
     zIndex: NumberConstructor;
     disabled: BooleanConstructor;
     duration: {
@@ -852,6 +869,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     internalTrapFocus: BooleanConstructor;
     animated: {
         type: BooleanConstructor;
@@ -1082,24 +1103,26 @@ declare const _default: import("vue").DefineComponent<{
     size: import("./interface").PopselectSize;
     show: boolean | undefined;
     flip: boolean;
+    width: number | "trigger";
     multiple: boolean;
     disabled: boolean;
     duration: number;
     to: string | boolean | HTMLElement;
+    options: import("../../select/src/interface").SelectMixedOption[];
     raw: boolean;
-    placement: import("vueuc").FollowerPlacement;
+    placement: import("vueuc/lib/binder/src/interface").Placement;
     overlap: boolean;
     scrollable: boolean;
     trigger: PopoverTrigger;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
-    options: import("../../select/src/interface").SelectMixedOption[];
     cancelable: boolean;
 }>;
 export default _default;