naive-ui 2.43.2 → 2.44.1

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1,11 +1,13 @@
 import type { TreeNode } from 'treemate';
 import type { HTMLAttributes, InputHTMLAttributes, PropType, SlotsType, VNode } from 'vue';
 import type { FollowerPlacement } from 'vueuc';
+import type { ScrollbarProps } from '../../_internal';
 import type { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { FormValidationStatus } from '../../form/src/public-types';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
 import type { AutoCompleteDefaultSlotProps, AutoCompleteOptions, OnSelect, OnUpdateValue } from './interface';
+import type { AutoCompleteSize } from './public-types';
 export declare const autoCompleteProps: {
     readonly to: {
         type: PropType<HTMLElement | string | boolean>;
@@ -46,7 +48,7 @@ export declare const autoCompleteProps: {
     readonly inputProps: PropType<InputHTMLAttributes>;
     readonly renderOption: PropType<RenderOption>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<AutoCompleteSize>;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
         readonly default: () => never[];
@@ -58,6 +60,7 @@ export declare const autoCompleteProps: {
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
@@ -545,7 +548,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly inputProps: PropType<InputHTMLAttributes>;
     readonly renderOption: PropType<RenderOption>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<AutoCompleteSize>;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
         readonly default: () => never[];
@@ -557,6 +560,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
@@ -1058,7 +1062,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } | null>;
     triggerElRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | /*elided*/ any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
+    mergedSize: import("vue").ComputedRef<AutoCompleteSize>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     active: import("vue").ComputedRef<boolean>;
     mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
@@ -1319,7 +1323,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly inputProps: PropType<InputHTMLAttributes>;
     readonly renderOption: PropType<RenderOption>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<AutoCompleteSize>;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
         readonly default: () => never[];
@@ -1331,6 +1335,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;

package/lib/auto-complete/src/AutoComplete.js

@@ -39,7 +39,7 @@ exports.autoCompleteProps = Object.assign(Object.assign({}, _mixins_1.useTheme.p
     }, value: String, blurAfterSelect: Boolean, clearAfterSelect: Boolean, getShow: Function, showEmpty: Boolean, inputProps: Object, renderOption: Function, renderLabel: Function, size: String, options: {
         type: Array,
         default: () => []
-    }, zIndex: Number, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
+    }, zIndex: Number, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onSelect: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], scrollbarProps: Object, 
     // deprecated
     onInput: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
@@ -54,8 +54,22 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
-        const formItem = (0, _mixins_1.useFormItem)(props);
+        const { mergedBorderedRef, namespaceRef, mergedClsPrefixRef, inlineThemeDisabled, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
+        const formItem = (0, _mixins_1.useFormItem)(props, {
+            mergedSize: (NFormItem) => {
+                var _a, _b;
+                const { size } = props;
+                if (size)
+                    return size;
+                const { mergedSize: formItemSize } = NFormItem || {};
+                if (formItemSize === null || formItemSize === void 0 ? void 0 : formItemSize.value)
+                    return formItemSize.value;
+                const configSize = (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.AutoComplete) === null || _b === void 0 ? void 0 : _b.size;
+                if (configSize)
+                    return configSize;
+                return 'medium';
+            }
+        });
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         const triggerElRef = (0, vue_1.ref)(null);
         const menuInstRef = (0, vue_1.ref)(null);
@@ -285,7 +299,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     ], style: [
                                         menuProps === null || menuProps === void 0 ? void 0 : menuProps.style,
                                         this.cssVars
-                                    ], treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle }), { empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); } }), [
+                                    ], treeMate: this.treeMate, multiple: false, renderLabel: this.renderLabel, renderOption: this.renderOption, size: "medium", onToggle: this.handleToggle, scrollbarProps: this.scrollbarProps }), { empty: () => { var _a, _b; return (_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a); } }), [
                                     [
                                         vdirs_1.clickoutside,
                                         this.handleClickOutsideMenu,

package/lib/auto-complete/src/public-types.d.ts

@@ -0,0 +1 @@
+export type AutoCompleteSize = 'small' | 'medium' | 'large';

package/lib/breadcrumb/src/BreadcrumbItem.d.ts

@@ -6,6 +6,10 @@ export declare const breadcrumbItemProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly showSeparator: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onClick: PropType<(e: MouseEvent) => void>;
 };
 export type BreadcrumbItemProps = Partial<ExtractPropTypes<typeof breadcrumbItemProps>>;
@@ -20,6 +24,10 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly showSeparator: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onClick: PropType<(e: MouseEvent) => void>;
 }>, (() => null) | (() => JSX.Element), {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     readonly separator: StringConstructor;
@@ -28,8 +36,13 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly showSeparator: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly onClick: PropType<(e: MouseEvent) => void>;
 }>> & Readonly<{}>, {
     readonly clickable: boolean;
+    readonly showSeparator: boolean;
 }, SlotsType<BreadcrumbItemSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/breadcrumb/src/BreadcrumbItem.js

@@ -12,6 +12,10 @@ exports.breadcrumbItemProps = {
         type: Boolean,
         default: true
     },
+    showSeparator: {
+        type: Boolean,
+        default: true
+    },
     onClick: Function
 };
 exports.default = (0, vue_1.defineComponent)({
@@ -42,12 +46,12 @@ exports.default = (0, vue_1.defineComponent)({
                     href: props.href,
                     onClick: props.onClick
                 }, slots),
-                (0, vue_1.h)("span", { class: `${mergedClsPrefix}-breadcrumb-item__separator`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)(slots.separator, () => {
+                props.showSeparator && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-breadcrumb-item__separator`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)(slots.separator, () => {
                     var _a;
                     return [
                         (_a = props.separator) !== null && _a !== void 0 ? _a : separatorRef.value
                     ];
-                }))));
+                })))));
         };
     }
 });

package/lib/button/index.d.ts

@@ -1,2 +1,3 @@
 export { buttonProps, default as NButton, XButton as NxButton } from './src/Button';
 export type { ButtonProps, ButtonSlots } from './src/Button';
+export type * from './src/public-types';

package/lib/button/src/Button.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, ExtractPropTypes, PropType, SlotsType, VNode, VNodeChild } from 'vue';
 import type { BaseWaveRef } from '../../_internal';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { Size, Type } from './interface';
+import type { ButtonSize, ButtonSpinProps, ButtonType } from './public-types';
 export declare const buttonProps: {
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
@@ -10,7 +10,7 @@ export declare const buttonProps: {
     readonly loading: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly circle: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<ButtonSize>;
     readonly ghost: BooleanConstructor;
     readonly round: BooleanConstructor;
     readonly secondary: BooleanConstructor;
@@ -30,7 +30,7 @@ export declare const buttonProps: {
         readonly default: "button";
     };
     readonly type: {
-        readonly type: PropType<Type>;
+        readonly type: PropType<ButtonType>;
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
@@ -52,6 +52,7 @@ export declare const buttonProps: {
         readonly type: BooleanConstructor;
         readonly default: boolean;
     };
+    readonly spinProps: PropType<ButtonSpinProps>;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -678,7 +679,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
     readonly loading: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly circle: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<ButtonSize>;
     readonly ghost: BooleanConstructor;
     readonly round: BooleanConstructor;
     readonly secondary: BooleanConstructor;
@@ -698,7 +699,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
         readonly default: "button";
     };
     readonly type: {
-        readonly type: PropType<Type>;
+        readonly type: PropType<ButtonType>;
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
@@ -720,6 +721,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: BooleanConstructor;
         readonly default: boolean;
     };
+    readonly spinProps: PropType<ButtonSpinProps>;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -1398,7 +1400,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
     readonly loading: BooleanConstructor;
     readonly disabled: BooleanConstructor;
     readonly circle: BooleanConstructor;
-    readonly size: PropType<Size>;
+    readonly size: PropType<ButtonSize>;
     readonly ghost: BooleanConstructor;
     readonly round: BooleanConstructor;
     readonly secondary: BooleanConstructor;
@@ -1418,7 +1420,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
         readonly default: "button";
     };
     readonly type: {
-        readonly type: PropType<Type>;
+        readonly type: PropType<ButtonType>;
         readonly default: "default";
     };
     readonly dashed: BooleanConstructor;
@@ -1440,6 +1442,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: BooleanConstructor;
         readonly default: boolean;
     };
+    readonly spinProps: PropType<ButtonSpinProps>;
     readonly theme: PropType<import("../../_mixins").Theme<"Button", {
         heightTiny: string;
         heightSmall: string;
@@ -2054,7 +2057,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
     }, any>>>;
 }>> & Readonly<{}>, {
     readonly disabled: boolean;
-    readonly type: Type;
+    readonly type: ButtonType;
     readonly bordered: boolean;
     readonly block: boolean;
     readonly loading: boolean;

package/lib/button/src/Button.js

@@ -40,7 +40,7 @@ exports.buttonProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, onClick: [Function, Array], nativeFocusBehavior: {
         type: Boolean,
         default: !browser_1.isSafari
-    } });
+    }, spinProps: Object });
 const Button = (0, vue_1.defineComponent)({
     name: 'Button',
     props: exports.buttonProps,
@@ -67,9 +67,11 @@ const Button = (0, vue_1.defineComponent)({
                 && props.bordered);
         });
         const NButtonGroup = (0, vue_1.inject)(context_1.buttonGroupInjectionKey, {});
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
         const { mergedSizeRef } = (0, _mixins_1.useFormItem)({}, {
             defaultSize: 'medium',
             mergedSize: (NFormItem) => {
+                var _a, _b;
                 const { size } = props;
                 if (size)
                     return size;
@@ -77,9 +79,11 @@ const Button = (0, vue_1.defineComponent)({
                 if (buttonGroupSize)
                     return buttonGroupSize;
                 const { mergedSize: formItemSize } = NFormItem || {};
-                if (formItemSize) {
+                if (formItemSize)
                     return formItemSize.value;
-                }
+                const configSize = (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Button) === null || _b === void 0 ? void 0 : _b.size;
+                if (configSize)
+                    return configSize;
                 return 'medium';
             }
         });
@@ -137,7 +141,6 @@ const Button = (0, vue_1.defineComponent)({
         const handleBlur = () => {
             enterPressedRef.value = false;
         };
-        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Button', '-button', index_cssr_1.default, styles_1.buttonLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Button', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
@@ -456,7 +459,7 @@ const Button = (0, vue_1.defineComponent)({
                         margin: (0, _utils_1.isSlotEmpty)(this.$slots.default) ? '0' : ''
                     } },
                     (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                        default: () => this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 })) : ((0, vue_1.h)("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, this.renderIcon ? this.renderIcon() : children))
+                        default: () => this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, Object.assign({ clsPrefix: mergedClsPrefix, key: "loading", class: `${mergedClsPrefix}-icon-slot`, strokeWidth: 20 }, this.spinProps))) : ((0, vue_1.h)("div", { key: "icon", class: `${mergedClsPrefix}-icon-slot`, role: "none" }, this.renderIcon ? this.renderIcon() : children))
                     }))))
             }),
             this.iconPlacement === 'left' && children,

package/lib/button/src/public-types.d.ts

@@ -0,0 +1,4 @@
+import type { SharedSpinProps } from '../../_internal';
+export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
+export type ButtonSpinProps = SharedSpinProps;
+export type ButtonType = 'default' | 'tertiary' | 'primary' | 'info' | 'success' | 'warning' | 'error';

package/lib/button-group/src/ButtonGroup.d.ts

@@ -1,34 +1,24 @@
 import type { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
-import type { Size } from '../../button/src/interface';
+import type { ButtonSize } from '../../button/src/public-types';
 export interface ButtonGroupInjection {
-    size?: Size | undefined;
+    size?: ButtonSize | undefined;
 }
 export declare const buttonGroupProps: {
-    readonly size: {
-        readonly type: PropType<Size | undefined>;
-        readonly default: undefined;
-    };
+    readonly size: PropType<ButtonSize | undefined>;
     readonly vertical: BooleanConstructor;
 };
 export type ButtonGroupProps = ExtractPublicPropTypes<typeof buttonGroupProps>;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly size: {
-        readonly type: PropType<Size | undefined>;
-        readonly default: undefined;
-    };
+    readonly size: PropType<ButtonSize | undefined>;
     readonly vertical: BooleanConstructor;
 }>, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined, import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedClsPrefix: import("vue").Ref<string, string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly size: {
-        readonly type: PropType<Size | undefined>;
-        readonly default: undefined;
-    };
+    readonly size: PropType<ButtonSize | undefined>;
     readonly vertical: BooleanConstructor;
 }>> & Readonly<{}>, {
-    readonly size: Size | undefined;
     readonly vertical: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/button-group/src/ButtonGroup.js

@@ -10,10 +10,7 @@ const use_rtl_1 = require("../../_mixins/use-rtl");
 const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.buttonGroupProps = {
-    size: {
-        type: String,
-        default: undefined
-    },
+    size: String,
     vertical: Boolean
 };
 exports.default = (0, vue_1.defineComponent)({

package/lib/card/index.d.ts

@@ -1,2 +1,3 @@
 export { cardProps, default as NCard } from './src/Card';
 export type { CardProps, CardSegmented, CardSlots } from './src/Card';
+export type * from './src/public-types';

package/lib/card/src/Card.d.ts

@@ -1,5 +1,6 @@
 import type { CSSProperties, PropType, SlotsType, VNode, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { CardSize } from './public-types';
 export interface CardSegmented {
     content?: boolean | 'soft';
     footer?: boolean | 'soft';
@@ -9,6 +10,7 @@ export declare const cardBaseProps: {
     readonly title: PropType<string | (() => VNodeChild)>;
     readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<CSSProperties | string>;
+    readonly contentScrollable: BooleanConstructor;
     readonly headerClass: StringConstructor;
     readonly headerStyle: PropType<CSSProperties | string>;
     readonly headerExtraClass: StringConstructor;
@@ -20,10 +22,7 @@ export declare const cardBaseProps: {
         readonly type: PropType<boolean | CardSegmented>;
         readonly default: false;
     };
-    readonly size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    readonly size: PropType<CardSize>;
     readonly bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -43,11 +42,12 @@ export declare const cardBaseProps: {
     readonly headerExtra: PropType<() => VNodeChild>;
     readonly closeFocusable: BooleanConstructor;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "bordered" | "closable" | "onClose" | "content" | "cover" | "footer" | "tag" | "contentClass" | "contentStyle" | "headerClass" | "headerStyle" | "headerExtraClass" | "headerExtraStyle" | "footerClass" | "footerStyle" | "embedded" | "segmented" | "hoverable" | "role" | "action" | "headerExtra" | "closeFocusable")[];
+export declare const cardBasePropKeys: ("size" | "title" | "bordered" | "closable" | "onClose" | "content" | "contentClass" | "contentStyle" | "cover" | "footer" | "tag" | "contentScrollable" | "headerClass" | "headerStyle" | "headerExtraClass" | "headerExtraStyle" | "footerClass" | "footerStyle" | "embedded" | "segmented" | "hoverable" | "role" | "action" | "headerExtra" | "closeFocusable")[];
 export declare const cardProps: {
     title: PropType<string | (() => VNodeChild)>;
     contentClass: StringConstructor;
     contentStyle: PropType<CSSProperties | string>;
+    contentScrollable: BooleanConstructor;
     headerClass: StringConstructor;
     headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
@@ -59,10 +59,7 @@ export declare const cardProps: {
         readonly type: PropType<boolean | CardSegmented>;
         readonly default: false;
     };
-    size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    size: PropType<CardSize>;
     bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -206,6 +203,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     title: PropType<string | (() => VNodeChild)>;
     contentClass: StringConstructor;
     contentStyle: PropType<CSSProperties | string>;
+    contentScrollable: BooleanConstructor;
     headerClass: StringConstructor;
     headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
@@ -217,10 +215,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: PropType<boolean | CardSegmented>;
         readonly default: false;
     };
-    size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    size: PropType<CardSize>;
     bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -435,6 +430,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     title: PropType<string | (() => VNodeChild)>;
     contentClass: StringConstructor;
     contentStyle: PropType<CSSProperties | string>;
+    contentScrollable: BooleanConstructor;
     headerClass: StringConstructor;
     headerStyle: PropType<CSSProperties | string>;
     headerExtraClass: StringConstructor;
@@ -446,10 +442,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: PropType<boolean | CardSegmented>;
         readonly default: false;
     };
-    size: {
-        readonly type: PropType<"small" | "medium" | "large" | "huge">;
-        readonly default: "medium";
-    };
+    size: PropType<CardSize>;
     bordered: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -580,10 +573,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         closeSize: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    size: "small" | "medium" | "large" | "huge";
     bordered: boolean;
     closable: boolean;
     tag: keyof HTMLElementTagNameMap;
+    contentScrollable: boolean;
     embedded: boolean;
     segmented: boolean | CardSegmented;
     hoverable: boolean;

package/lib/card/src/Card.js

@@ -17,6 +17,7 @@ exports.cardBaseProps = {
     title: [String, Function],
     contentClass: String,
     contentStyle: [Object, String],
+    contentScrollable: Boolean,
     headerClass: String,
     headerStyle: [Object, String],
     headerExtraClass: String,
@@ -28,10 +29,7 @@ exports.cardBaseProps = {
         type: [Boolean, Object],
         default: false
     },
-    size: {
-        type: String,
-        default: 'medium'
-    },
+    size: String,
     bordered: {
         type: Boolean,
         default: true
@@ -60,15 +58,20 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const handleCloseClick = () => {
             const { onClose } = props;
-            if (onClose)
+            if (onClose) {
                 (0, _utils_1.call)(onClose);
+            }
         };
-        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const { inlineThemeDisabled, mergedClsPrefixRef, mergedRtlRef, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Card', '-card', index_cssr_1.default, styles_1.cardLight, props, mergedClsPrefixRef);
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Card', mergedRtlRef, mergedClsPrefixRef);
+        const mergedSizeRef = (0, vue_1.computed)(() => {
+            var _a, _b;
+            return (props.size || ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Card) === null || _b === void 0 ? void 0 : _b.size) || 'medium');
+        });
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { size } = props;
-            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const mergedSize = mergedSizeRef.value;
+            const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, lineHeight, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, closeBorderRadius, closeIconSize, closeSize, boxShadow, colorPopover, colorEmbedded, colorEmbeddedModal, colorEmbeddedPopover, [(0, _utils_1.createKey)('padding', mergedSize)]: padding, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', mergedSize)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
             const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
             return {
                 '--n-bezier': cubicBezierEaseInOut,
@@ -105,7 +108,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('card', (0, vue_1.computed)(() => {
-                return props.size[0];
+                return mergedSizeRef.value[0];
             }), cssVarsRef, props)
             : undefined;
         return {
@@ -127,6 +130,7 @@ exports.default = (0, vue_1.defineComponent)({
                 embedded && `${mergedClsPrefix}-card--embedded`,
                 {
                     [`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
+                    [`${mergedClsPrefix}-card--content-scrollable`]: this.contentScrollable,
                     [`${mergedClsPrefix}-card--content${typeof segmented !== 'boolean' && segmented.content === 'soft'
                         ? '-soft'
                         : ''}-segmented`]: segmented === true || (segmented !== false && segmented.content),
@@ -167,7 +171,10 @@ exports.default = (0, vue_1.defineComponent)({
                 const mergedChildren = content
                     ? (0, resolve_slot_1.ensureValidVNode)(typeof content === 'function' ? [content()] : [content])
                     : children;
-                return (mergedChildren && ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-card__content`, this.contentClass], style: this.contentStyle, role: "none" }, mergedChildren)));
+                return mergedChildren ? (this.contentScrollable ? ((0, vue_1.h)(_internal_1.NScrollbar, { class: `${mergedClsPrefix}-card__content-scrollbar`, contentClass: [
+                        `${mergedClsPrefix}-card-content`,
+                        this.contentClass
+                    ], contentStyle: this.contentStyle }, mergedChildren)) : ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-card-content`, this.contentClass], style: this.contentStyle, role: "none" }, mergedChildren))) : null;
             }),
             (0, _utils_1.resolveWrappedSlot)($slots.footer, (children) => {
                 const mergedChildren = this.footer

package/lib/card/src/public-types.d.ts

@@ -0,0 +1 @@
+export type CardSize = 'small' | 'medium' | 'large' | 'huge';

package/lib/card/src/public-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });