naive-ui 2.28.3 → 2.29.0

package/es/pagination/src/Pagination.js

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { h, nextTick, computed, ref, toRef, defineComponent, watchEffect } from 'vue';
+import { computed, defineComponent, h, nextTick, ref, toRef, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { NSelect } from '../../select';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
-import { FastForwardIcon, FastBackwardIcon, BackwardIcon, ForwardIcon, MoreIcon } from '../../_internal/icons';
+import { BackwardIcon, FastBackwardIcon, FastForwardIcon, ForwardIcon, MoreIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { paginationLight } from '../styles';
 import { pageItems } from './utils';
 import style from './styles/index.cssr';
-import { call, resolveSlot, warn, warnOnce } from '../../_utils';
+import { call, resolveSlot, warn, warnOnce, createKey, smallerSize } from '../../_utils';
 import useRtl from '../../_mixins/use-rtl';
 const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page: Number, defaultPage: {
         type: Number,
@@ -25,7 +25,10 @@ const paginationProps = Object.assign(Object.assign({}, useTheme.props), { page:
         default() {
             return [10];
         }
-    }, showQuickJumper: Boolean, disabled: Boolean, pageSlot: {
+    }, showQuickJumper: Boolean, size: {
+        type: String,
+        default: 'medium'
+    }, disabled: Boolean, pageSlot: {
         type: Number,
         default: 9
     }, prev: Function, next: Function, prefix: Function, suffix: Function, label: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
@@ -89,11 +92,13 @@ export default defineComponent({
         });
         const inputSizeRef = computed(() => {
             var _a, _b;
-            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) || 'small';
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) ||
+                smallerSize(props.size));
         });
         const selectSizeRef = computed(() => {
             var _a, _b;
-            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small';
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
+                smallerSize(props.size));
         });
         const startIndexRef = computed(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -186,10 +191,8 @@ export default defineComponent({
             var _a;
             if (e.code === 'Enter' || e.code === 'NumpadEnter') {
                 const page = parseInt(jumperValueRef.value);
-                if (!Number.isNaN(page) &&
-                    page >= 1 &&
-                    page <= mergedPageCountRef.value) {
-                    doUpdatePage(page);
+                if (!Number.isNaN(page)) {
+                    doUpdatePage(Math.max(1, Math.min(page, mergedPageCountRef.value)));
                     jumperValueRef.value = '';
                     (_a = jumperRef.value) === null || _a === void 0 ? void 0 : _a.blur();
                 }
@@ -241,7 +244,7 @@ export default defineComponent({
             disableTransitionOneTick();
         }
         function handleJumperInput(value) {
-            jumperValueRef.value = value;
+            jumperValueRef.value = value.replace(/\D+/g, '');
         }
         watchEffect(() => {
             void mergedPageRef.value;
@@ -249,7 +252,8 @@ export default defineComponent({
             disableTransitionOneTick();
         });
         const cssVarsRef = computed(() => {
-            const { self: { itemSize, itemPadding, itemMargin, itemMarginRtl, inputWidth, selectWidth, inputMargin, inputMarginRtl, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { size } = props;
+            const { self: { buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, jumperTextColor, jumperTextColorDisabled, buttonColor, buttonColorHover, buttonColorPressed, [createKey('itemPadding', size)]: itemPadding, [createKey('itemMargin', size)]: itemMargin, [createKey('inputWidth', size)]: inputWidth, [createKey('selectWidth', size)]: selectWidth, [createKey('inputMargin', size)]: inputMargin, [createKey('selectMargin', size)]: selectMargin, [createKey('jumperFontSize', size)]: jumperFontSize, [createKey('prefixMargin', size)]: prefixMargin, [createKey('suffixMargin', size)]: suffixMargin, [createKey('itemSize', size)]: itemSize, [createKey('buttonIconSize', size)]: buttonIconSize, [createKey('itemFontSize', size)]: itemFontSize, [`${createKey('itemMargin', size)}Rtl`]: itemMarginRtl, [`${createKey('inputMargin', size)}Rtl`]: inputMarginRtl }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-prefix-margin': prefixMargin,
                 '--n-suffix-margin': suffixMargin,
@@ -297,7 +301,12 @@ export default defineComponent({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('pagination', undefined, cssVarsRef, props)
+            ? useThemeClass('pagination', computed(() => {
+                let hash = '';
+                const { size } = props;
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
             : undefined;
         return {
             rtlEnabled: rtlEnabledRef,

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

@@ -1,5 +1,6 @@
 import { VNode, VNodeChild } from 'vue';
 import { SelectBaseOption } from '../../select/src/interface';
+export declare type Size = 'small' | 'medium' | 'large';
 export declare type PaginationInfo = Parameters<RenderPrefix>[0];
 export declare type RenderPrefix = (info: {
     startIndex: number;

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

@@ -48,19 +48,17 @@ export default cB('pagination', `
  display: flex;
  align-items: center;
  margin: var(--n-suffix-margin);
- `), c('> *:not(:first-child)', {
-  margin: 'var(--n-item-margin)'
-}), cB('select', {
-  width: 'var(--n-select-width)'
-}), c('&.transition-disabled', [cB('pagination-item', {
-  transition: 'none!important'
-})]), cB('pagination-quick-jumper', `
+ `), c('> *:not(:first-child)', `
+ margin: var(--n-item-margin);
+ `), cB('select', `
+ width: var(--n-select-width);
+ `), c('&.transition-disabled', [cB('pagination-item', 'transition: none!important;')]), cB('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
  color: var(--n-jumper-text-color);
  transition: color .3s var(--n-bezier);
  align-items: center;
- font-size: var(--n-jumter-font-size);
+ font-size: var(--n-jumper-font-size);
  `, [cB('input', `
  margin: var(--n-input-margin);
  width: var(--n-input-width);
@@ -89,38 +87,39 @@ export default cB('pagination', `
  background: var(--n-button-color);
  color: var(--n-button-icon-color);
  border: var(--n-button-border);
+ padding: 0;
  `, [cB('base-icon', `
  font-size: var(--n-button-icon-size);
- `)]), cNotM('disabled', [c('&:hover', {
-  background: 'var(--n-item-color-hover)',
-  color: 'var(--n-item-text-color-hover)',
-  border: 'var(--n-item-border-hover)'
-}, [cM('button', {
-  background: 'var(--n-button-color-hover)',
-  border: 'var(--n-button-border-hover)',
-  color: 'var(--n-button-icon-color-hover)'
-})]), c('&:active', {
-  background: 'var(--n-item-color-pressed)',
-  color: 'var(--n-item-text-color-pressed)',
-  border: 'var(--n-item-border-pressed)'
-}, [cM('button', {
-  background: 'var(--n-button-color-pressed)',
-  border: 'var(--n-button-border-pressed)',
-  color: 'var(--n-button-icon-color-pressed)'
-})]), cM('active', {
-  background: 'var(--n-item-color-active)',
-  color: 'var(--n-item-text-color-active)',
-  border: 'var(--n-item-border-active)'
-}, [c('&:hover', {
-  background: 'var(--n-item-color-active-hover)'
-})])]), cM('disabled', `
+ `)]), cNotM('disabled', [c('&:hover', `
+ background: var(--n-item-color-hover);
+ color: var(--n-item-text-color-hover);
+ border: var(--n-item-border-hover);
+ `, [cM('button', `
+ background: var(--n-button-color-hover);
+ border: var(--n-button-border-hover);
+ color: var(--n-button-icon-color-hover);
+ `)]), c('&:active', `
+ background: var(--n-item-color-pressed);
+ color: var(--n-item-text-color-pressed);
+ border: var(--n-item-border-pressed);
+ `, [cM('button', `
+ background: var(--n-button-color-pressed);
+ border: var(--n-button-border-pressed);
+ color: var(--n-button-icon-color-pressed);
+ `)]), cM('active', `
+ background: var(--n-item-color-active);
+ color: var(--n-item-text-color-active);
+ border: var(--n-item-border-active);
+ `, [c('&:hover', `
+ background: var(--n-item-color-active-hover);
+ `)])]), cM('disabled', `
  cursor: not-allowed;
  color: var(--n-item-text-color-disabled);
- `, [cM('active, button', {
-  backgroundColor: 'var(--n-item-color-disabled)',
-  border: 'var(--n-item-border-disabled)'
-})])]), cM('disabled', {
-  cursor: 'not-allowed'
-}, [cB('pagination-quick-jumper', {
-  color: 'var(--n-jumper-text-color-disabled)'
-})])]);
+ `, [cM('active, button', `
+ background-color: var(--n-item-color-disabled);
+ border: var(--n-item-border-disabled);
+ `)])]), cM('disabled', `
+ cursor: not-allowed;
+ `, [cB('pagination-quick-jumper', `
+ color: var(--n-jumper-text-color-disabled);
+ `)])]);

package/es/pagination/styles/_common.d.ts

@@ -1,16 +1,36 @@
 declare const _default: {
-    itemSize: string;
-    itemPadding: string;
-    itemMargin: string;
-    itemMarginRtl: string;
-    buttonIconSize: string;
-    inputWidth: string;
-    selectWidth: string;
-    inputMargin: string;
-    inputMarginRtl: string;
-    selectMargin: string;
-    prefixMargin: string;
-    suffixMargin: string;
-    jumperFontSize: string;
+    itemPaddingSmall: string;
+    itemMarginSmall: string;
+    itemMarginSmallRtl: string;
+    itemPaddingMedium: string;
+    itemMarginMedium: string;
+    itemMarginMediumRtl: string;
+    itemPaddingLarge: string;
+    itemMarginLarge: string;
+    itemMarginLargeRtl: string;
+    buttonIconSizeSmall: string;
+    buttonIconSizeMedium: string;
+    buttonIconSizeLarge: string;
+    inputWidthSmall: string;
+    selectWidthSmall: string;
+    inputMarginSmall: string;
+    inputMarginSmallRtl: string;
+    selectMarginSmall: string;
+    prefixMarginSmall: string;
+    suffixMarginSmall: string;
+    inputWidthMedium: string;
+    selectWidthMedium: string;
+    inputMarginMedium: string;
+    inputMarginMediumRtl: string;
+    selectMarginMedium: string;
+    prefixMarginMedium: string;
+    suffixMarginMedium: string;
+    inputWidthLarge: string;
+    selectWidthLarge: string;
+    inputMarginLarge: string;
+    inputMarginLargeRtl: string;
+    selectMarginLarge: string;
+    prefixMarginLarge: string;
+    suffixMarginLarge: string;
 };
 export default _default;

package/es/pagination/styles/_common.js

@@ -1,15 +1,35 @@
 export default {
-    itemSize: '28px',
-    itemPadding: '0 4px',
-    itemMargin: '0 0 0 8px',
-    itemMarginRtl: '0 8px 0 0',
-    buttonIconSize: '16px',
-    inputWidth: '60px',
-    selectWidth: 'unset',
-    inputMargin: '0 0 0 8px',
-    inputMarginRtl: '0 8px 0 0',
-    selectMargin: '0 0 0 8px',
-    prefixMargin: '0 8px 0 0',
-    suffixMargin: '0 0 0 8px',
-    jumperFontSize: '14px'
+    itemPaddingSmall: '0 4px',
+    itemMarginSmall: '0 0 0 8px',
+    itemMarginSmallRtl: '0 8px 0 0',
+    itemPaddingMedium: '0 4px',
+    itemMarginMedium: '0 0 0 8px',
+    itemMarginMediumRtl: '0 8px 0 0',
+    itemPaddingLarge: '0 4px',
+    itemMarginLarge: '0 0 0 8px',
+    itemMarginLargeRtl: '0 8px 0 0',
+    buttonIconSizeSmall: '14px',
+    buttonIconSizeMedium: '16px',
+    buttonIconSizeLarge: '18px',
+    inputWidthSmall: '60px',
+    selectWidthSmall: 'unset',
+    inputMarginSmall: '0 0 0 8px',
+    inputMarginSmallRtl: '0 8px 0 0',
+    selectMarginSmall: '0 0 0 8px',
+    prefixMarginSmall: '0 8px 0 0',
+    suffixMarginSmall: '0 0 0 8px',
+    inputWidthMedium: '60px',
+    selectWidthMedium: 'unset',
+    inputMarginMedium: '0 0 0 8px',
+    inputMarginMediumRtl: '0 8px 0 0',
+    selectMarginMedium: '0 0 0 8px',
+    prefixMarginMedium: '0 8px 0 0',
+    suffixMarginMedium: '0 0 0 8px',
+    inputWidthLarge: '60px',
+    selectWidthLarge: 'unset',
+    inputMarginLarge: '0 0 0 8px',
+    inputMarginLargeRtl: '0 8px 0 0',
+    selectMarginLarge: '0 0 0 8px',
+    prefixMarginLarge: '0 8px 0 0',
+    suffixMarginLarge: '0 0 0 8px'
 };

package/es/pagination/styles/light.d.ts

@@ -26,22 +26,50 @@ export declare const self: (vars: ThemeCommonVars) => {
     itemBorderActive: string;
     itemBorderDisabled: string;
     itemBorderRadius: string;
-    itemFontSize: string;
+    itemSizeSmall: string;
+    itemSizeMedium: string;
+    itemSizeLarge: string;
+    itemFontSizeSmall: string;
+    itemFontSizeMedium: string;
+    itemFontSizeLarge: string;
+    jumperFontSizeSmall: string;
+    jumperFontSizeMedium: string;
+    jumperFontSizeLarge: string;
     jumperTextColor: string;
     jumperTextColorDisabled: string;
-    itemSize: string;
-    itemPadding: string;
-    itemMargin: string;
-    itemMarginRtl: string;
-    buttonIconSize: string;
-    inputWidth: string;
-    selectWidth: string;
-    inputMargin: string;
-    inputMarginRtl: string;
-    selectMargin: string;
-    prefixMargin: string;
-    suffixMargin: string;
-    jumperFontSize: string;
+    itemPaddingSmall: string;
+    itemMarginSmall: string;
+    itemMarginSmallRtl: string;
+    itemPaddingMedium: string;
+    itemMarginMedium: string;
+    itemMarginMediumRtl: string;
+    itemPaddingLarge: string;
+    itemMarginLarge: string;
+    itemMarginLargeRtl: string;
+    buttonIconSizeSmall: string;
+    buttonIconSizeMedium: string;
+    buttonIconSizeLarge: string;
+    inputWidthSmall: string;
+    selectWidthSmall: string;
+    inputMarginSmall: string;
+    inputMarginSmallRtl: string;
+    selectMarginSmall: string;
+    prefixMarginSmall: string;
+    suffixMarginSmall: string;
+    inputWidthMedium: string;
+    selectWidthMedium: string;
+    inputMarginMedium: string;
+    inputMarginMediumRtl: string;
+    selectMarginMedium: string;
+    prefixMarginMedium: string;
+    suffixMarginMedium: string;
+    inputWidthLarge: string;
+    selectWidthLarge: string;
+    inputMarginLarge: string;
+    inputMarginLargeRtl: string;
+    selectMarginLarge: string;
+    prefixMarginLarge: string;
+    suffixMarginLarge: string;
 };
 export declare type PaginationThemeVars = ReturnType<typeof self>;
 declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
@@ -71,22 +99,50 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
     itemBorderActive: string;
     itemBorderDisabled: string;
     itemBorderRadius: string;
-    itemFontSize: string;
+    itemSizeSmall: string;
+    itemSizeMedium: string;
+    itemSizeLarge: string;
+    itemFontSizeSmall: string;
+    itemFontSizeMedium: string;
+    itemFontSizeLarge: string;
+    jumperFontSizeSmall: string;
+    jumperFontSizeMedium: string;
+    jumperFontSizeLarge: string;
     jumperTextColor: string;
     jumperTextColorDisabled: string;
-    itemSize: string;
-    itemPadding: string;
-    itemMargin: string;
-    itemMarginRtl: string;
-    buttonIconSize: string;
-    inputWidth: string;
-    selectWidth: string;
-    inputMargin: string;
-    inputMarginRtl: string;
-    selectMargin: string;
-    prefixMargin: string;
-    suffixMargin: string;
-    jumperFontSize: string;
+    itemPaddingSmall: string;
+    itemMarginSmall: string;
+    itemMarginSmallRtl: string;
+    itemPaddingMedium: string;
+    itemMarginMedium: string;
+    itemMarginMediumRtl: string;
+    itemPaddingLarge: string;
+    itemMarginLarge: string;
+    itemMarginLargeRtl: string;
+    buttonIconSizeSmall: string;
+    buttonIconSizeMedium: string;
+    buttonIconSizeLarge: string;
+    inputWidthSmall: string;
+    selectWidthSmall: string;
+    inputMarginSmall: string;
+    inputMarginSmallRtl: string;
+    selectMarginSmall: string;
+    prefixMarginSmall: string;
+    suffixMarginSmall: string;
+    inputWidthMedium: string;
+    selectWidthMedium: string;
+    inputMarginMedium: string;
+    inputMarginMediumRtl: string;
+    selectMarginMedium: string;
+    prefixMarginMedium: string;
+    suffixMarginMedium: string;
+    inputWidthLarge: string;
+    selectWidthLarge: string;
+    inputMarginLarge: string;
+    inputMarginLargeRtl: string;
+    selectMarginLarge: string;
+    prefixMarginLarge: string;
+    suffixMarginLarge: string;
 }, {
     Select: import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;

package/es/pagination/styles/light.js

@@ -4,8 +4,12 @@ import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 import { createTheme } from '../../_mixins';
 export const self = (vars) => {
-    const { textColor2, primaryColor, primaryColorHover, primaryColorPressed, inputColorDisabled, textColorDisabled, borderColor, borderRadius, fontSize } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { buttonColor: '#0000', buttonColorHover: '#0000', buttonColorPressed: '#0000', buttonBorder: `1px solid ${borderColor}`, buttonBorderHover: `1px solid ${borderColor}`, buttonBorderPressed: `1px solid ${borderColor}`, buttonIconColor: textColor2, buttonIconColorHover: textColor2, buttonIconColorPressed: textColor2, itemTextColor: textColor2, itemTextColorHover: primaryColorHover, itemTextColorPressed: primaryColorPressed, itemTextColorActive: primaryColor, itemTextColorDisabled: textColorDisabled, itemColor: '#0000', itemColorHover: '#0000', itemColorPressed: '#0000', itemColorActive: '#0000', itemColorActiveHover: '#0000', itemColorDisabled: inputColorDisabled, itemBorder: '1px solid #0000', itemBorderHover: '1px solid #0000', itemBorderPressed: '1px solid #0000', itemBorderActive: `1px solid ${primaryColor}`, itemBorderDisabled: `1px solid ${borderColor}`, itemBorderRadius: borderRadius, itemFontSize: fontSize, jumperTextColor: textColor2, jumperTextColorDisabled: textColorDisabled });
+    const { textColor2, primaryColor, primaryColorHover, primaryColorPressed, inputColorDisabled, textColorDisabled, borderColor, borderRadius, 
+    // item font size
+    fontSizeTiny, fontSizeSmall, fontSizeMedium, 
+    // item size
+    heightTiny, heightSmall, heightMedium } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { buttonColor: '#0000', buttonColorHover: '#0000', buttonColorPressed: '#0000', buttonBorder: `1px solid ${borderColor}`, buttonBorderHover: `1px solid ${borderColor}`, buttonBorderPressed: `1px solid ${borderColor}`, buttonIconColor: textColor2, buttonIconColorHover: textColor2, buttonIconColorPressed: textColor2, itemTextColor: textColor2, itemTextColorHover: primaryColorHover, itemTextColorPressed: primaryColorPressed, itemTextColorActive: primaryColor, itemTextColorDisabled: textColorDisabled, itemColor: '#0000', itemColorHover: '#0000', itemColorPressed: '#0000', itemColorActive: '#0000', itemColorActiveHover: '#0000', itemColorDisabled: inputColorDisabled, itemBorder: '1px solid #0000', itemBorderHover: '1px solid #0000', itemBorderPressed: '1px solid #0000', itemBorderActive: `1px solid ${primaryColor}`, itemBorderDisabled: `1px solid ${borderColor}`, itemBorderRadius: borderRadius, itemSizeSmall: heightTiny, itemSizeMedium: heightSmall, itemSizeLarge: heightMedium, itemFontSizeSmall: fontSizeTiny, itemFontSizeMedium: fontSizeSmall, itemFontSizeLarge: fontSizeMedium, jumperFontSizeSmall: fontSizeTiny, jumperFontSizeMedium: fontSizeSmall, jumperFontSizeLarge: fontSizeMedium, jumperTextColor: textColor2, jumperTextColorDisabled: textColorDisabled });
 };
 const paginationLight = createTheme({
     name: 'Pagination',

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

@@ -1626,12 +1626,14 @@ declare const _default: import("vue").DefineComponent<{
             borderRadius: string;
             borderRadiusSmall: string;
             fontSize: string;
+            fontSizeMini: string;
             fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
             fontSizeHuge: string;
             lineHeight: string;
+            heightMini: string;
             heightTiny: string;
             heightSmall: string;
             heightMedium: string;

package/es/popover/src/PopoverBody.js

@@ -174,16 +174,16 @@ export default defineComponent({
                 contentNode = h('div', mergeProps({
                     class: [
                         `${mergedClsPrefix}-popover`,
+                        `${mergedClsPrefix}-popover-shared`,
                         themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
                         extraClass.map((v) => `${mergedClsPrefix}-${v}`),
                         {
                             [`${mergedClsPrefix}-popover--scrollable`]: props.scrollable,
-                            [`${mergedClsPrefix}-popover--overlap`]: props.overlap,
-                            [`${mergedClsPrefix}-popover--show-arrow`]: props.showArrow,
                             [`${mergedClsPrefix}-popover--show-header`]: !isSlotEmpty(slots.header),
                             [`${mergedClsPrefix}-popover--raw`]: props.raw,
-                            [`${mergedClsPrefix}-popover--manual-trigger`]: props.trigger === 'manual',
-                            [`${mergedClsPrefix}-popover--center-arrow`]: props.arrowPointToCenter
+                            [`${mergedClsPrefix}-popover-shared--overlap`]: props.overlap,
+                            [`${mergedClsPrefix}-popover-shared--show-arrow`]: props.showArrow,
+                            [`${mergedClsPrefix}-popover-shared--center-arrow`]: props.arrowPointToCenter
                         }
                     ],
                     ref: bodyRef,
@@ -199,9 +199,9 @@ export default defineComponent({
                 // to place the body & transition animation.
                 // Shadow class exists for reuse box-shadow.
                 [
-                    `${mergedClsPrefix}-popover`,
+                    `${mergedClsPrefix}-popover-shared`,
                     themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value,
-                    props.overlap && `${mergedClsPrefix}-popover--overlap`
+                    props.overlap && `${mergedClsPrefix}-popover-shared--overlap`
                 ], bodyRef, styleRef.value, handleMouseEnter, handleMouseLeave);
             }
             return props.displayDirective === 'show' || props.show

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

@@ -27,7 +27,6 @@ export default c([cB('popover', `
  box-shadow .3s var(--n-bezier),
  background-color .3s var(--n-bezier),
  color .3s var(--n-bezier);
- transform-origin: inherit;
  position: relative;
  font-size: var(--n-font-size);
  color: var(--n-text-color);
@@ -35,22 +34,7 @@ export default c([cB('popover', `
  `, [c('>', [cB('scrollbar', `
  height: inherit;
  max-height: inherit;
- `)]), // body transition
-c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
- opacity: 0;
- transform: scale(.85);
- `), c('&.popover-transition-enter-to, &.popover-transition-leave-from', `
- transform: scale(1);
- opacity: 1;
- `), c('&.popover-transition-enter-active', `
- transition:
- opacity .15s var(--n-bezier-ease-out),
- transform .15s var(--n-bezier-ease-out);
- `), c('&.popover-transition-leave-active', `
- transition:
- opacity .15s var(--n-bezier-ease-in),
- transform .15s var(--n-bezier-ease-in);
- `), cNotM('raw', `
+ `)]), cNotM('raw', `
  background-color: var(--n-color);
  border-radius: var(--n-border-radius);
  `, [cNotM('scrollable', [cNotM('show-header', 'padding: var(--n-padding);')])]), cE('header', `
@@ -73,7 +57,24 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  transform: rotate(45deg);
  background-color: var(--n-color);
  pointer-events: all;
- `)])]), placementStyle('top-start', `
+ `)])]), cB('popover-shared', `
+ transform-origin: inherit;
+ `, [// body transition
+c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
+ opacity: 0;
+ transform: scale(.85);
+ `), c('&.popover-transition-enter-to, &.popover-transition-leave-from', `
+ transform: scale(1);
+ opacity: 1;
+ `), c('&.popover-transition-enter-active', `
+ transition:
+ opacity .15s var(--n-bezier-ease-out),
+ transform .15s var(--n-bezier-ease-out);
+ `), c('&.popover-transition-leave-active', `
+ transition:
+ opacity .15s var(--n-bezier-ease-in),
+ transform .15s var(--n-bezier-ease-in);
+ `)]), placementStyle('top-start', `
  top: calc(${arrowSize} / -2 + 1px);
  left: calc(${getArrowOffset('top-start')} - var(--v-offset-left));
  `), placementStyle('top', `
@@ -126,7 +127,7 @@ c('&.popover-transition-enter-from, &.popover-transition-leave-to', `
     const targetSize = `var(--v-target-${sizeType}, 0px)`;
     const centerOffset = `calc((${targetSize} - ${arrowSize}) / 2)`;
     const offset = getArrowOffset(placement);
-    return c(`[v-placement="${placement}"] >`, [cB('popover', [cM('center-arrow', [cB('popover-arrow', `${direction}: calc(max(${centerOffset}, ${offset}) ${isReverse ? '+' : '-'} var(--v-offset-${isVertical ? 'left' : 'top'}));`)])])]);
+    return c(`[v-placement="${placement}"] >`, [cB('popover-shared', [cM('center-arrow', [cB('popover-arrow', `${direction}: calc(max(${centerOffset}, ${offset}) ${isReverse ? '+' : '-'} var(--v-offset-${isVertical ? 'left' : 'top'}));`)])])]);
   });
 })]);
 
@@ -137,9 +138,9 @@ function getArrowOffset(placement) {
 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', [cNotM('manual-trigger', `
+  return c(`[v-placement="${placement}"] >`, [cB('popover-shared', `
  margin-${oppositePlacement[position]}: var(--n-space);
- `), cM('show-arrow', `
+ `, [cM('show-arrow', `
  margin-${oppositePlacement[position]}: var(--n-space-arrow);
  `), cM('overlap', `
  margin: 0;