naive-ui 2.43.1 → 2.44.0

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;
@@ -1341,7 +1343,7 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
     } | null>;
     mergedClsPrefix: import("vue").Ref<string, string>;
     mergedFocusable: import("vue").ComputedRef<boolean>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large" | "tiny">;
+    mergedSize: import("vue").ComputedRef<"tiny" | "small" | "medium" | "large">;
     showBorder: import("vue").ComputedRef<boolean>;
     enterPressed: import("vue").Ref<boolean, boolean>;
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined, import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -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;
@@ -2053,25 +2056,25 @@ declare const Button: import("vue").DefineComponent<ExtractPropTypes<{
         rippleDuration: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    readonly type: Type;
-    readonly tag: keyof HTMLElementTagNameMap;
-    readonly block: boolean;
     readonly disabled: boolean;
-    readonly strong: boolean;
+    readonly type: ButtonType;
+    readonly bordered: boolean;
+    readonly block: boolean;
+    readonly loading: boolean;
+    readonly circle: boolean;
     readonly round: boolean;
-    readonly dashed: boolean;
     readonly text: boolean;
-    readonly circle: boolean;
-    readonly loading: boolean;
-    readonly focusable: boolean;
-    readonly bordered: boolean;
+    readonly strong: boolean;
     readonly tertiary: boolean;
     readonly ghost: boolean;
     readonly secondary: boolean;
     readonly quaternary: boolean;
+    readonly focusable: boolean;
     readonly keyboard: boolean;
+    readonly tag: keyof HTMLElementTagNameMap;
+    readonly dashed: boolean;
     readonly iconPlacement: "left" | "right";
-    readonly attrType: "reset" | "submit" | "button";
+    readonly attrType: "button" | "submit" | "reset";
     readonly nativeFocusBehavior: boolean;
 }, SlotsType<ButtonSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type InternalButtonProps = ExtractPropTypes<typeof buttonProps>;

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

@@ -132,13 +132,13 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('button', `
  border-radius: inherit;
  transition: border-color .3s var(--n-bezier);
  pointer-events: none;
- `), (0, cssr_1.cE)('border', {
-  border: 'var(--n-border)'
-}), (0, cssr_1.cE)('state-border', {
-  border: 'var(--n-border)',
-  borderColor: '#0000',
-  zIndex: 1
-}), (0, cssr_1.cE)('icon', `
+ `), (0, cssr_1.cE)('border', `
+ border: var(--n-border);
+ `), (0, cssr_1.cE)('state-border', `
+ border: var(--n-border);
+ border-color: #0000;
+ z-index: 1;
+ `), (0, cssr_1.cE)('icon', `
  margin: var(--n-icon-margin);
  margin-left: 0;
  height: var(--n-icon-size);

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: ("tag" | "content" | "size" | "footer" | "title" | "cover" | "role" | "onClose" | "action" | "bordered" | "closable" | "contentClass" | "contentStyle" | "headerClass" | "headerStyle" | "headerExtraClass" | "headerExtraStyle" | "footerClass" | "footerStyle" | "embedded" | "segmented" | "hoverable" | "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<{}>, {
-    tag: keyof HTMLElementTagNameMap;
-    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/styles/index.cssr.js

@@ -4,6 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 const cssr_1 = require("../../../_utils/cssr");
+const contentBaseStyle = (0, cssr_1.cB)('card-content', `
+ flex: 1;
+ min-width: 0;
+ box-sizing: border-box;
+ padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
+ font-size: var(--n-font-size);
+`);
 // vars:
 // --n-bezier
 // --n-border-radius
@@ -51,14 +58,19 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  border-color .3s var(--n-bezier);
  `, [(0, cssr_1.asModal)({
   background: 'var(--n-color-modal)'
-}), (0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  paddingTop: 'var(--n-padding-bottom)'
-})])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', `
+}), (0, cssr_1.cM)('hoverable', [(0, cssr_1.c)('&:hover', 'box-shadow: var(--n-box-shadow);')]), (0, cssr_1.cM)('content-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `), (0, cssr_1.cE)('content-scrollbar', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `)])])])])])]), (0, cssr_1.cM)('content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
  margin: 0 var(--n-padding-left);
  padding: var(--n-padding-bottom) 0;
- `)])]), (0, cssr_1.cM)('footer-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  paddingTop: 'var(--n-padding-bottom)'
-})])]), (0, cssr_1.cM)('footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
+ `), (0, cssr_1.cE)('content-scrollbar', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
+ margin: 0 var(--n-padding-left);
+ padding: var(--n-padding-bottom) 0;
+ `)])])])])])]), (0, cssr_1.cM)('footer-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
+ padding-top: var(--n-padding-bottom);
+ `)])]), (0, cssr_1.cM)('footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
  padding: var(--n-padding-bottom) 0;
  margin: 0 var(--n-padding-left);
  `)])]), (0, cssr_1.c)('>', [(0, cssr_1.cB)('card-header', `
@@ -96,13 +108,20 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  border-color .3s var(--n-bezier);
  background-clip: padding-box;
  background-color: var(--n-action-color);
- `), (0, cssr_1.cE)('content', 'flex: 1; min-width: 0;'), (0, cssr_1.cE)('content, footer', `
+ `), contentBaseStyle, (0, cssr_1.cB)('card-content', [(0, cssr_1.c)('&:first-child', `
+ padding-top: var(--n-padding-bottom);
+ `)]), (0, cssr_1.cE)('content-scrollbar', `
+ display: flex;
+ flex-direction: column;
+ `, [(0, cssr_1.c)('>', [(0, cssr_1.cB)('scrollbar-container', [(0, cssr_1.c)('>', [contentBaseStyle])])]), (0, cssr_1.c)('&:first-child >', [(0, cssr_1.cB)('scrollbar-container', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `)])])])]), (0, cssr_1.cE)('footer', `
  box-sizing: border-box;
  padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
  font-size: var(--n-font-size);
- `, [(0, cssr_1.c)('&:first-child', {
-  paddingTop: 'var(--n-padding-bottom)'
-})]), (0, cssr_1.cE)('action', `
+ `, [(0, cssr_1.c)('&:first-child', `
+ padding-top: var(--n-padding-bottom);
+ `)]), (0, cssr_1.cE)('action', `
  background-color: var(--n-action-color);
  padding: var(--n-padding-bottom) var(--n-padding-left);
  border-bottom-left-radius: var(--n-border-radius);
@@ -116,17 +135,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('card', `
  width: 100%;
  `)]), (0, cssr_1.cM)('bordered', `
  border: 1px solid var(--n-border-color);
- `, [(0, cssr_1.c)('&:target', 'border-color: var(--n-color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), (0, cssr_1.cM)('content-segmented, content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('content', {
-  transition: 'border-color 0.3s var(--n-bezier)'
-}, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), (0, cssr_1.cM)('footer-segmented, footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', {
-  transition: 'border-color 0.3s var(--n-bezier)'
-}, [(0, cssr_1.c)('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), (0, cssr_1.cM)('embedded', `
+ `, [(0, cssr_1.c)('&:target', 'border-color: var(--n-color-target);')]), (0, cssr_1.cM)('action-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('action', [(0, cssr_1.c)('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), (0, cssr_1.cM)('content-segmented, content-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('card-content', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [(0, cssr_1.c)('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)]), (0, cssr_1.cE)('content-scrollbar', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [(0, cssr_1.c)('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), (0, cssr_1.cM)('footer-segmented, footer-soft-segmented', [(0, cssr_1.c)('>', [(0, cssr_1.cE)('footer', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [(0, cssr_1.c)('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), (0, cssr_1.cM)('embedded', `
  background-color: var(--n-color-embedded);
  `)]), (0, cssr_1.insideModal)((0, cssr_1.cB)('card', `
  background: var(--n-color-modal);