naive-ui 2.28.3 → 2.29.0

package/lib/pagination/src/Pagination.js

@@ -30,7 +30,10 @@ const paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
         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], 
@@ -94,11 +97,13 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const inputSizeRef = (0, vue_1.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) ||
+                (0, _utils_1.smallerSize)(props.size));
         });
         const selectSizeRef = (0, vue_1.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) ||
+                (0, _utils_1.smallerSize)(props.size));
         });
         const startIndexRef = (0, vue_1.computed)(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -191,10 +196,8 @@ exports.default = (0, vue_1.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();
                 }
@@ -246,7 +249,7 @@ exports.default = (0, vue_1.defineComponent)({
             disableTransitionOneTick();
         }
         function handleJumperInput(value) {
-            jumperValueRef.value = value;
+            jumperValueRef.value = value.replace(/\D+/g, '');
         }
         (0, vue_1.watchEffect)(() => {
             void mergedPageRef.value;
@@ -254,7 +257,8 @@ exports.default = (0, vue_1.defineComponent)({
             disableTransitionOneTick();
         });
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('itemPadding', size)]: itemPadding, [(0, _utils_1.createKey)('itemMargin', size)]: itemMargin, [(0, _utils_1.createKey)('inputWidth', size)]: inputWidth, [(0, _utils_1.createKey)('selectWidth', size)]: selectWidth, [(0, _utils_1.createKey)('inputMargin', size)]: inputMargin, [(0, _utils_1.createKey)('selectMargin', size)]: selectMargin, [(0, _utils_1.createKey)('jumperFontSize', size)]: jumperFontSize, [(0, _utils_1.createKey)('prefixMargin', size)]: prefixMargin, [(0, _utils_1.createKey)('suffixMargin', size)]: suffixMargin, [(0, _utils_1.createKey)('itemSize', size)]: itemSize, [(0, _utils_1.createKey)('buttonIconSize', size)]: buttonIconSize, [(0, _utils_1.createKey)('itemFontSize', size)]: itemFontSize, [`${(0, _utils_1.createKey)('itemMargin', size)}Rtl`]: itemMarginRtl, [`${(0, _utils_1.createKey)('inputMargin', size)}Rtl`]: inputMarginRtl }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
                 '--n-prefix-margin': prefixMargin,
                 '--n-suffix-margin': suffixMargin,
@@ -302,7 +306,12 @@ exports.default = (0, vue_1.defineComponent)({
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? (0, _mixins_1.useThemeClass)('pagination', undefined, cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('pagination', (0, vue_1.computed)(() => {
+                let hash = '';
+                const { size } = props;
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
             : undefined;
         return {
             rtlEnabled: rtlEnabledRef,

package/lib/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/lib/pagination/src/styles/index.cssr.js

@@ -55,19 +55,17 @@ exports.default = (0, cssr_1.cB)('pagination', `
  display: flex;
  align-items: center;
  margin: var(--n-suffix-margin);
- `), (0, cssr_1.c)('> *:not(:first-child)', {
-  margin: 'var(--n-item-margin)'
-}), (0, cssr_1.cB)('select', {
-  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', `
+ `), (0, cssr_1.c)('> *:not(:first-child)', `
+ margin: var(--n-item-margin);
+ `), (0, cssr_1.cB)('select', `
+ 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(--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);
  `, [(0, cssr_1.cB)('input', `
  margin: var(--n-input-margin);
  width: var(--n-input-width);
@@ -96,38 +94,39 @@ exports.default = (0, cssr_1.cB)('pagination', `
  background: var(--n-button-color);
  color: var(--n-button-icon-color);
  border: var(--n-button-border);
+ padding: 0;
  `, [(0, cssr_1.cB)('base-icon', `
  font-size: var(--n-button-icon-size);
- `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&: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(--n-button-color-hover)',
-  border: 'var(--n-button-border-hover)',
-  color: 'var(--n-button-icon-color-hover)'
-})]), (0, cssr_1.c)('&:active', {
-  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(--n-button-color-pressed)',
-  border: 'var(--n-button-border-pressed)',
-  color: 'var(--n-button-icon-color-pressed)'
-})]), (0, cssr_1.cM)('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(--n-item-color-active-hover)'
-})])]), (0, cssr_1.cM)('disabled', `
+ `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&: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(--n-button-color-hover);
+ border: var(--n-button-border-hover);
+ color: var(--n-button-icon-color-hover);
+ `)]), (0, cssr_1.c)('&:active', `
+ 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(--n-button-color-pressed);
+ border: var(--n-button-border-pressed);
+ color: var(--n-button-icon-color-pressed);
+ `)]), (0, cssr_1.cM)('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(--n-item-color-active-hover);
+ `)])]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  color: var(--n-item-text-color-disabled);
- `, [(0, cssr_1.cM)('active, button', {
-  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(--n-jumper-text-color-disabled)'
-})])]);
+ `, [(0, cssr_1.cM)('active, button', `
+ background-color: 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(--n-jumper-text-color-disabled);
+ `)])]);

package/lib/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/lib/pagination/styles/_common.js

@@ -1,17 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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/lib/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/lib/pagination/styles/light.js

@@ -10,8 +10,12 @@ const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const _mixins_1 = require("../../_mixins");
 const self = (vars) => {
-    const { textColor2, primaryColor, primaryColorHover, primaryColorPressed, inputColorDisabled, textColorDisabled, borderColor, borderRadius, fontSize } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { 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({}, _common_1.default), { 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 });
 };
 exports.self = self;
 const paginationLight = (0, _mixins_1.createTheme)({

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

@@ -181,16 +181,16 @@ exports.default = (0, vue_1.defineComponent)({
                 contentNode = (0, vue_1.h)('div', (0, vue_1.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`]: !(0, _utils_1.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,
@@ -206,9 +206,9 @@ exports.default = (0, vue_1.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/lib/popover/src/styles/index.cssr.js

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