naive-ui 2.43.2 → 2.44.1

package/es/button/src/Button.mjs

@@ -59,7 +59,8 @@ export const buttonProps = Object.assign(Object.assign({}, useTheme.props), {
   nativeFocusBehavior: {
     type: Boolean,
     default: !isSafari
-  }
+  },
+  spinProps: Object
 });
 const Button = defineComponent({
   name: 'Button',
@@ -88,11 +89,18 @@ const Button = defineComponent({
       return !props.quaternary && !props.tertiary && !props.secondary && !props.text && (!props.color || props.ghost || props.dashed) && props.bordered;
     });
     const NButtonGroup = inject(buttonGroupInjectionKey, {});
+    const {
+      inlineThemeDisabled,
+      mergedClsPrefixRef,
+      mergedRtlRef,
+      mergedComponentPropsRef
+    } = useConfig(props);
     const {
       mergedSizeRef
     } = useFormItem({}, {
       defaultSize: 'medium',
       mergedSize: NFormItem => {
+        var _a, _b;
         const {
           size
         } = props;
@@ -104,9 +112,9 @@ const Button = defineComponent({
         const {
           mergedSize: formItemSize
         } = NFormItem || {};
-        if (formItemSize) {
-          return formItemSize.value;
-        }
+        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';
       }
     });
@@ -167,11 +175,6 @@ const Button = defineComponent({
     const handleBlur = () => {
       enterPressedRef.value = false;
     };
-    const {
-      inlineThemeDisabled,
-      mergedClsPrefixRef,
-      mergedRtlRef
-    } = useConfig(props);
     const themeRef = useTheme('Button', '-button', style, buttonLight, props, mergedClsPrefixRef);
     const rtlEnabledRef = useRtl('Button', mergedRtlRef, mergedClsPrefixRef);
     const cssVarsRef = computed(() => {
@@ -470,12 +473,12 @@ const Button = defineComponent({
           margin: isSlotEmpty(this.$slots.default) ? '0' : ''
         }
       }, h(NIconSwitchTransition, null, {
-        default: () => this.loading ? h(NBaseLoading, {
+        default: () => this.loading ? h(NBaseLoading, Object.assign({
           clsPrefix: mergedClsPrefix,
           key: "loading",
           class: `${mergedClsPrefix}-icon-slot`,
           strokeWidth: 20
-        }) : h("div", {
+        }, this.spinProps)) : h("div", {
           key: "icon",
           class: `${mergedClsPrefix}-icon-slot`,
           role: "none"

package/es/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/es/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/es/button-group/src/ButtonGroup.mjs

@@ -4,10 +4,7 @@ import { useRtl } from "../../_mixins/use-rtl.mjs";
 import { buttonGroupInjectionKey } from "./context.mjs";
 import style from "./styles/index.cssr.mjs";
 export const buttonGroupProps = {
-  size: {
-    type: String,
-    default: undefined
-  },
+  size: String,
   vertical: Boolean
 };
 export default defineComponent({

package/es/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/es/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/es/card/src/Card.mjs

@@ -1,6 +1,6 @@
 import { getPadding } from 'seemly';
 import { computed, defineComponent, h } from 'vue';
-import { NBaseClose } from "../../_internal/index.mjs";
+import { NBaseClose, NScrollbar } from "../../_internal/index.mjs";
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { useRtl } from "../../_mixins/use-rtl.mjs";
 import { call, createKey, keysOf, resolveWrappedSlot } from "../../_utils/index.mjs";
@@ -11,6 +11,7 @@ export const cardBaseProps = {
   title: [String, Function],
   contentClass: String,
   contentStyle: [Object, String],
+  contentScrollable: Boolean,
   headerClass: String,
   headerStyle: [Object, String],
   headerExtraClass: String,
@@ -22,10 +23,7 @@ export const cardBaseProps = {
     type: [Boolean, Object],
     default: false
   },
-  size: {
-    type: String,
-    default: 'medium'
-  },
+  size: String,
   bordered: {
     type: Boolean,
     default: true
@@ -56,19 +54,24 @@ export default defineComponent({
       const {
         onClose
       } = props;
-      if (onClose) call(onClose);
+      if (onClose) {
+        call(onClose);
+      }
     };
     const {
       inlineThemeDisabled,
       mergedClsPrefixRef,
-      mergedRtlRef
+      mergedRtlRef,
+      mergedComponentPropsRef
     } = useConfig(props);
     const themeRef = useTheme('Card', '-card', style, cardLight, props, mergedClsPrefixRef);
     const rtlEnabledRef = useRtl('Card', mergedRtlRef, mergedClsPrefixRef);
+    const mergedSizeRef = 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 = computed(() => {
-      const {
-        size
-      } = props;
+      const mergedSize = mergedSizeRef.value;
       const {
         self: {
           color,
@@ -94,9 +97,9 @@ export default defineComponent({
           colorEmbedded,
           colorEmbeddedModal,
           colorEmbeddedPopover,
-          [createKey('padding', size)]: padding,
-          [createKey('fontSize', size)]: fontSize,
-          [createKey('titleFontSize', size)]: titleFontSize
+          [createKey('padding', mergedSize)]: padding,
+          [createKey('fontSize', mergedSize)]: fontSize,
+          [createKey('titleFontSize', mergedSize)]: titleFontSize
         },
         common: {
           cubicBezierEaseInOut
@@ -141,7 +144,7 @@ export default defineComponent({
       };
     });
     const themeClassHandle = inlineThemeDisabled ? useThemeClass('card', computed(() => {
-      return props.size[0];
+      return mergedSizeRef.value[0];
     }), cssVarsRef, props) : undefined;
     return {
       rtlEnabled: rtlEnabledRef,
@@ -169,6 +172,7 @@ export default defineComponent({
     return h(Component, {
       class: [`${mergedClsPrefix}-card`, this.themeClass, 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,
         [`${mergedClsPrefix}-card--footer${typeof segmented !== 'boolean' && segmented.footer === 'soft' ? '-soft' : ''}-segmented`]: segmented === true || segmented !== false && segmented.footer,
         [`${mergedClsPrefix}-card--action-segmented`]: segmented === true || segmented !== false && segmented.action,
@@ -213,11 +217,15 @@ export default defineComponent({
         content
       } = this;
       const mergedChildren = content ? ensureValidVNode(typeof content === 'function' ? [content()] : [content]) : children;
-      return mergedChildren && h("div", {
-        class: [`${mergedClsPrefix}-card__content`, this.contentClass],
+      return mergedChildren ? this.contentScrollable ? h(NScrollbar, {
+        class: `${mergedClsPrefix}-card__content-scrollbar`,
+        contentClass: [`${mergedClsPrefix}-card-content`, this.contentClass],
+        contentStyle: this.contentStyle
+      }, mergedChildren) : h("div", {
+        class: [`${mergedClsPrefix}-card-content`, this.contentClass],
         style: this.contentStyle,
         role: "none"
-      }, mergedChildren);
+      }, mergedChildren) : null;
     }), resolveWrappedSlot($slots.footer, children => {
       const mergedChildren = this.footer ? ensureValidVNode([this.footer()]) : children;
       return mergedChildren && h("div", {

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

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

package/es/card/src/public-types.mjs

@@ -0,0 +1 @@
+export {};

package/es/card/src/styles/index.cssr.mjs

@@ -1,4 +1,11 @@
 import { asModal, c, cB, cE, cM, insideModal, insidePopover } from "../../../_utils/cssr/index.mjs";
+const contentBaseStyle = 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
@@ -46,14 +53,19 @@ export default c([cB('card', `
  border-color .3s var(--n-bezier);
  `, [asModal({
   background: 'var(--n-color-modal)'
-}), cM('hoverable', [c('&:hover', 'box-shadow: var(--n-box-shadow);')]), cM('content-segmented', [c('>', [cE('content', {
-  paddingTop: 'var(--n-padding-bottom)'
-})])]), cM('content-soft-segmented', [c('>', [cE('content', `
+}), cM('hoverable', [c('&:hover', 'box-shadow: var(--n-box-shadow);')]), cM('content-segmented', [c('>', [cB('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `), cE('content-scrollbar', [c('>', [cB('scrollbar-container', [c('>', [cB('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `)])])])])])]), cM('content-soft-segmented', [c('>', [cB('card-content', `
  margin: 0 var(--n-padding-left);
  padding: var(--n-padding-bottom) 0;
- `)])]), cM('footer-segmented', [c('>', [cE('footer', {
-  paddingTop: 'var(--n-padding-bottom)'
-})])]), cM('footer-soft-segmented', [c('>', [cE('footer', `
+ `), cE('content-scrollbar', [c('>', [cB('scrollbar-container', [c('>', [cB('card-content', `
+ margin: 0 var(--n-padding-left);
+ padding: var(--n-padding-bottom) 0;
+ `)])])])])])]), cM('footer-segmented', [c('>', [cE('footer', `
+ padding-top: var(--n-padding-bottom);
+ `)])]), cM('footer-soft-segmented', [c('>', [cE('footer', `
  padding: var(--n-padding-bottom) 0;
  margin: 0 var(--n-padding-left);
  `)])]), c('>', [cB('card-header', `
@@ -91,13 +103,20 @@ export default c([cB('card', `
  border-color .3s var(--n-bezier);
  background-clip: padding-box;
  background-color: var(--n-action-color);
- `), cE('content', 'flex: 1; min-width: 0;'), cE('content, footer', `
+ `), contentBaseStyle, cB('card-content', [c('&:first-child', `
+ padding-top: var(--n-padding-bottom);
+ `)]), cE('content-scrollbar', `
+ display: flex;
+ flex-direction: column;
+ `, [c('>', [cB('scrollbar-container', [c('>', [contentBaseStyle])])]), c('&:first-child >', [cB('scrollbar-container', [c('>', [cB('card-content', `
+ padding-top: var(--n-padding-bottom);
+ `)])])])]), 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);
- `, [c('&:first-child', {
-  paddingTop: 'var(--n-padding-bottom)'
-})]), cE('action', `
+ `, [c('&:first-child', `
+ padding-top: var(--n-padding-bottom);
+ `)]), 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);
@@ -111,17 +130,21 @@ export default c([cB('card', `
  width: 100%;
  `)]), cM('bordered', `
  border: 1px solid var(--n-border-color);
- `, [c('&:target', 'border-color: var(--n-color-target);')]), cM('action-segmented', [c('>', [cE('action', [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), cM('content-segmented, content-soft-segmented', [c('>', [cE('content', {
-  transition: 'border-color 0.3s var(--n-bezier)'
-}, [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), cM('footer-segmented, footer-soft-segmented', [c('>', [cE('footer', {
-  transition: 'border-color 0.3s var(--n-bezier)'
-}, [c('&:not(:first-child)', {
-  borderTop: '1px solid var(--n-border-color)'
-})])])]), cM('embedded', `
+ `, [c('&:target', 'border-color: var(--n-color-target);')]), cM('action-segmented', [c('>', [cE('action', [c('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), cM('content-segmented, content-soft-segmented', [c('>', [cB('card-content', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [c('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)]), cE('content-scrollbar', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [c('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), cM('footer-segmented, footer-soft-segmented', [c('>', [cE('footer', `
+ transition: border-color 0.3s var(--n-bezier);
+ `, [c('&:not(:first-child)', `
+ border-top: 1px solid var(--n-border-color);
+ `)])])]), cM('embedded', `
  background-color: var(--n-color-embedded);
  `)]), insideModal(cB('card', `
  background: var(--n-color-modal);

package/es/carousel/src/Carousel.d.ts

@@ -329,6 +329,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         arrowColor: string;
     }, any>>>;
 }>> & Readonly<{}>, {
+    trigger: "hover" | "click";
     keyboard: boolean;
     defaultIndex: number;
     showArrow: boolean;
@@ -343,7 +344,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     loop: boolean;
     effect: "card" | "slide" | "fade" | "custom";
     showDots: boolean;
-    trigger: "click" | "hover";
     transitionStyle: Partial<Pick<CSSProperties, "transitionDuration" | "transitionTimingFunction">>;
     draggable: boolean;
     touchable: boolean;

package/es/carousel/src/CarouselDots.d.ts

@@ -63,10 +63,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     keyboard: BooleanConstructor;
 }>> & Readonly<{}>, {
+    trigger: "hover" | "click";
     keyboard: boolean;
     currentIndex: number;
     dotType: "dot" | "line" | "never";
-    trigger: "click" | "hover";
     total: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/cascader/index.d.ts

@@ -1,3 +1,4 @@
 export { cascaderProps, default as NCascader } from './src/Cascader';
 export type { CascaderProps, CascaderSlots } from './src/Cascader';
 export type { CascaderInst, CascaderOption } from './src/interface';
+export type * from './src/public-types';

package/es/cascader/src/Cascader.d.ts

@@ -1,12 +1,13 @@
 import type { CheckStrategy } from 'treemate';
 import type { CSSProperties, HTMLAttributes, PropType, SlotsType, VNode, VNodeChild } from 'vue';
 import type { FollowerInst, FollowerPlacement } from 'vueuc';
-import type { InternalSelectionInst } from '../../_internal';
+import type { InternalSelectionInst, ScrollbarProps } from '../../_internal';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { FormValidationStatus } from '../../form/src/public-types';
 import type { PopoverProps } from '../../popover';
 import type { SelectBaseOption } from '../../select/src/interface';
 import type { CascaderMenuInstance, CascaderOption, ExpandTrigger, Filter, Key, OnLoad, OnUpdateValue, SelectMenuInstance, Value } from './interface';
+import type { CascaderSize, CascaderSpinProps } from './public-types';
 export declare const cascaderProps: {
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly to: {
@@ -28,7 +29,7 @@ export declare const cascaderProps: {
     };
     readonly placeholder: StringConstructor;
     readonly multiple: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<CascaderSize>;
     readonly filterable: BooleanConstructor;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
@@ -106,6 +107,7 @@ export declare const cascaderProps: {
     readonly getColumnStyle: PropType<(detail: {
         level: number;
     }) => string | CSSProperties>;
+    readonly spinProps: PropType<CascaderSpinProps>;
     readonly renderPrefix: PropType<(props: {
         option: CascaderOption;
         checked: boolean;
@@ -116,6 +118,7 @@ export declare const cascaderProps: {
         checked: boolean;
         node: VNode | null;
     }) => VNodeChild>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -821,7 +824,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly placeholder: StringConstructor;
     readonly multiple: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<CascaderSize>;
     readonly filterable: BooleanConstructor;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
@@ -899,6 +902,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly getColumnStyle: PropType<(detail: {
         level: number;
     }) => string | CSSProperties>;
+    readonly spinProps: PropType<CascaderSpinProps>;
     readonly renderPrefix: PropType<(props: {
         option: CascaderOption;
         checked: boolean;
@@ -909,6 +913,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         checked: boolean;
         node: VNode | null;
     }) => VNodeChild>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;
@@ -1639,7 +1644,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showSelectMenu: import("vue").ComputedRef<boolean>;
     pattern: import("vue").Ref<string, string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<CascaderOption, CascaderOption, CascaderOption>>;
-    mergedSize: import("vue").ComputedRef<"small" | "medium" | "large">;
+    mergedSize: import("vue").ComputedRef<CascaderSize>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     localizedPlaceholder: import("vue").ComputedRef<string>;
     selectedOption: import("vue").ComputedRef<{
@@ -2026,7 +2031,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     readonly placeholder: StringConstructor;
     readonly multiple: BooleanConstructor;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<CascaderSize>;
     readonly filterable: BooleanConstructor;
     readonly disabled: {
         readonly type: PropType<boolean | undefined>;
@@ -2104,6 +2109,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly getColumnStyle: PropType<(detail: {
         level: number;
     }) => string | CSSProperties>;
+    readonly spinProps: PropType<CascaderSpinProps>;
     readonly renderPrefix: PropType<(props: {
         option: CascaderOption;
         checked: boolean;
@@ -2114,6 +2120,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         checked: boolean;
         node: VNode | null;
     }) => VNodeChild>;
+    readonly scrollbarProps: PropType<ScrollbarProps>;
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Cascader", {
         menuBorderRadius: string;

package/es/cascader/src/Cascader.mjs

@@ -106,8 +106,10 @@ export const cascaderProps = Object.assign(Object.assign({}, useTheme.props), {
   onBlur: Function,
   onFocus: Function,
   getColumnStyle: Function,
+  spinProps: Object,
   renderPrefix: Function,
   renderSuffix: Function,
+  scrollbarProps: Object,
   // deprecated
   onChange: [Function, Array]
 });
@@ -132,7 +134,8 @@ export default defineComponent({
       mergedBorderedRef,
       mergedClsPrefixRef,
       namespaceRef,
-      inlineThemeDisabled
+      inlineThemeDisabled,
+      mergedComponentPropsRef
     } = useConfig(props);
     const themeRef = useTheme('Cascader', '-cascader', style, cascaderLight, props, mergedClsPrefixRef);
     const {
@@ -145,7 +148,22 @@ export default defineComponent({
       return props.leafOnly ? 'child' : props.checkStrategy;
     });
     const patternRef = ref('');
-    const formItem = useFormItem(props);
+    const formItem = 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.Cascader) === null || _b === void 0 ? void 0 : _b.size;
+        if (configSize) return configSize;
+        return 'medium';
+      }
+    });
     const {
       mergedSizeRef,
       mergedDisabledRef,
@@ -853,6 +871,7 @@ export default defineComponent({
       getColumnStyleRef: toRef(props, 'getColumnStyle'),
       renderPrefixRef: toRef(props, 'renderPrefix'),
       renderSuffixRef: toRef(props, 'renderSuffix'),
+      spinPropsRef: toRef(props, 'spinProps'),
       syncCascaderMenuPosition,
       syncSelectMenuPosition,
       updateKeyboardKey,
@@ -864,6 +883,7 @@ export default defineComponent({
       closeMenu,
       handleSelectMenuClickOutside,
       handleCascaderMenuClickOutside,
+      scrollbarPropsRef: toRef(props, 'scrollbarProps'),
       clearPattern
     });
     const exposedMethods = {

package/es/cascader/src/CascaderMenu.d.ts

@@ -661,6 +661,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } | undefined;
         };
     }>;
+    mergedRenderEmpty: import("vue").ComputedRef<(() => import("vue").VNodeChild) | undefined>;
     getColumnStyle: import("vue").Ref<((detail: {
         level: number;
     }) => string | import("vue").CSSProperties) | undefined, ((detail: {