naive-ui 2.43.2 → 2.44.0

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);

package/lib/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/lib/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/lib/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/lib/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 { CascaderSpinProps } from './public-types';
 export declare const cascaderProps: {
     readonly allowCheckingNotLoaded: BooleanConstructor;
     readonly to: {
@@ -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;
@@ -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;
@@ -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/lib/cascader/src/Cascader.js

@@ -69,7 +69,7 @@ exports.cascaderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props
     }, childrenField: {
         type: String,
         default: 'children'
-    }, renderLabel: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, getColumnStyle: Function, renderPrefix: Function, renderSuffix: Function, 
+    }, renderLabel: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], onBlur: Function, onFocus: Function, getColumnStyle: Function, spinProps: Object, renderPrefix: Function, renderSuffix: Function, scrollbarProps: Object, 
     // deprecated
     onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
@@ -741,6 +741,7 @@ exports.default = (0, vue_1.defineComponent)({
             getColumnStyleRef: (0, vue_1.toRef)(props, 'getColumnStyle'),
             renderPrefixRef: (0, vue_1.toRef)(props, 'renderPrefix'),
             renderSuffixRef: (0, vue_1.toRef)(props, 'renderSuffix'),
+            spinPropsRef: (0, vue_1.toRef)(props, 'spinProps'),
             syncCascaderMenuPosition,
             syncSelectMenuPosition,
             updateKeyboardKey,
@@ -752,6 +753,7 @@ exports.default = (0, vue_1.defineComponent)({
             closeMenu,
             handleSelectMenuClickOutside,
             handleCascaderMenuClickOutside,
+            scrollbarPropsRef: (0, vue_1.toRef)(props, 'scrollbarProps'),
             clearPattern
         });
         const exposedMethods = {

package/lib/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: {

package/lib/cascader/src/CascaderMenu.js

@@ -7,6 +7,7 @@ const vdirs_1 = require("vdirs");
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const focus_detector_1 = __importDefault(require("../../_internal/focus-detector"));
+const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const empty_1 = require("../../empty");
 const CascaderSubmenu_1 = __importDefault(require("./CascaderSubmenu"));
@@ -48,6 +49,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         const { localeRef, isMountedRef, mergedClsPrefixRef, syncCascaderMenuPosition, handleCascaderMenuClickOutside, mergedThemeRef, getColumnStyleRef } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
+        const { mergedComponentPropsRef } = (0, _mixins_1.useConfig)();
         const submenuInstRefs = [];
         const maskInstRef = (0, vue_1.ref)(null);
         const selfElRef = (0, vue_1.ref)(null);
@@ -90,7 +92,10 @@ exports.default = (0, vue_1.defineComponent)({
         };
         return Object.assign({ isMounted: isMountedRef, mergedClsPrefix: mergedClsPrefixRef, selfElRef,
             submenuInstRefs,
-            maskInstRef, mergedTheme: mergedThemeRef, getColumnStyle: getColumnStyleRef, handleFocusin,
+            maskInstRef, mergedTheme: mergedThemeRef, mergedRenderEmpty: (0, vue_1.computed)(() => {
+                var _a, _b;
+                return (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Cascader) === null || _b === void 0 ? void 0 : _b.renderEmpty;
+            }), getColumnStyle: getColumnStyleRef, handleFocusin,
             handleFocusout,
             handleClickOutside }, exposedRef);
     },
@@ -110,9 +115,12 @@ exports.default = (0, vue_1.defineComponent)({
                                     }
                                 }), key: index, tmNodes: submenuOptions, depth: index + 1 }));
                         }),
-                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, _utils_1.resolveSlot)(this.$slots.empty, () => [
-                        (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
-                    ]))),
+                        (0, vue_1.h)(_internal_1.NBaseMenuMask, { clsPrefix: mergedClsPrefix, ref: "maskInstRef" }))) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu__empty` }, (0, _utils_1.resolveSlot)(this.$slots.empty, () => {
+                        var _a;
+                        return [
+                            ((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || ((0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty }))
+                        ];
+                    }))),
                     (0, _utils_1.resolveWrappedSlot)(this.$slots.action, children => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-menu-action`, "data-action": true }, children))),
                     (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabout })), [
                     [

package/lib/cascader/src/CascaderOption.d.ts

@@ -634,6 +634,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } | undefined;
         };
     }>;
+    spinProps: import("vue").Ref<import("../../_internal").SharedSpinProps | undefined, import("../../_internal").SharedSpinProps | undefined>;
     handleClick: (e: MouseEvent) => void;
     handleCheckboxUpdateValue: () => void;
     mergedHandleMouseEnter: import("vue").ComputedRef<(() => void) | undefined>;

package/lib/cascader/src/CascaderOption.js

@@ -16,7 +16,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, showCheckboxRef, renderPrefixRef, renderSuffixRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck, renderLabelRef } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
+        const { expandTriggerRef, remoteRef, multipleRef, mergedValueRef, checkedKeysRef, indeterminateKeysRef, hoverKeyPathRef, keyboardKeyRef, loadingKeySetRef, cascadeRef, mergedCheckStrategyRef, onLoadRef, mergedClsPrefixRef, mergedThemeRef, labelFieldRef, showCheckboxRef, renderPrefixRef, renderSuffixRef, spinPropsRef, updateHoverKey, updateKeyboardKey, addLoadingKey, deleteLoadingKey, closeMenu, doCheck, doUncheck, renderLabelRef } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const valueRef = (0, vue_1.computed)(() => props.tmNode.key);
         const useHoverTriggerRef = (0, vue_1.computed)(() => {
             const { value: expandTrigger } = expandTriggerRef;
@@ -142,6 +142,7 @@ exports.default = (0, vue_1.defineComponent)({
             label: labelRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: mergedThemeRef,
+            spinProps: spinPropsRef,
             handleClick,
             handleCheckboxUpdateValue,
             mergedHandleMouseEnter: mergedHandleMouseEnterRef,
@@ -165,7 +166,7 @@ exports.default = (0, vue_1.defineComponent)({
                 : originalNode));
         }
         let suffixNode = null;
-        const originalSuffixChild = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option-icon-placeholder` }, !this.isLeaf ? ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: mergedClsPrefix, scale: 0.85, strokeWidth: 24, show: this.isLoading, class: `${mergedClsPrefix}-cascader-option-icon` }, {
+        const originalSuffixChild = ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-cascader-option-icon-placeholder` }, !this.isLeaf ? ((0, vue_1.h)(_internal_1.NBaseLoading, Object.assign({ clsPrefix: mergedClsPrefix, scale: 0.85, strokeWidth: 24, show: this.isLoading, class: `${mergedClsPrefix}-cascader-option-icon` }, this.spinProps), {
             default: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, key: "arrow", class: `${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow` }, {
                 default: () => (0, vue_1.h)(icons_1.ChevronRightIcon, null)
             }))

package/lib/cascader/src/CascaderSelectMenu.d.ts

@@ -670,6 +670,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     cascaderSlots: Readonly<{
         [name: string]: import("vue").Slot<any> | undefined;
     }>;
+    scrollbarProps: import("vue").Ref<import("../../_internal").ScrollbarProps | undefined, import("../../_internal").ScrollbarProps | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: PropType<Value | null>;

package/lib/cascader/src/CascaderSelectMenu.js

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
     },
     setup(props) {
-        const { isMountedRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, mergedCheckStrategyRef, slots: cascaderSlots, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, doUncheck: cascaderDoUncheck, doCheck: cascaderDoCheck, clearPattern } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
+        const { isMountedRef, mergedValueRef, mergedClsPrefixRef, mergedThemeRef, mergedCheckStrategyRef, slots: cascaderSlots, syncSelectMenuPosition, closeMenu, handleSelectMenuClickOutside, doUncheck: cascaderDoUncheck, doCheck: cascaderDoCheck, scrollbarPropsRef, clearPattern } = (0, vue_1.inject)(interface_1.cascaderInjectionKey);
         const menuInstRef = (0, vue_1.ref)(null);
         const selectOptionsRef = (0, vue_1.computed)(() => {
             return (0, utils_2.createSelectOptions)(props.tmNodes, mergedCheckStrategyRef.value === 'child', props.labelField, props.separator);
@@ -126,13 +126,13 @@ exports.default = (0, vue_1.defineComponent)({
         return Object.assign({ isMounted: isMountedRef, mergedTheme: mergedThemeRef, mergedClsPrefix: mergedClsPrefixRef, menuInstRef, selectTreeMate: selectTreeMateRef, handleResize,
             handleToggle,
             handleClickOutside,
-            cascaderSlots }, exposedRef);
+            cascaderSlots, scrollbarProps: scrollbarPropsRef }, exposedRef);
     },
     render() {
         const { mergedClsPrefix, isMounted, mergedTheme, cascaderSlots } = this;
         return ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: isMounted }, {
             default: () => this.show
-                ? (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { ref: "menuInstRef", onResize: this.handleResize, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-cascader-menu`, autoPending: true, themeOverrides: mergedTheme.peerOverrides.InternalSelectMenu, theme: mergedTheme.peers.InternalSelectMenu, treeMate: this.selectTreeMate, multiple: this.multiple, value: this.value, onToggle: this.handleToggle }, {
+                ? (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, { ref: "menuInstRef", onResize: this.handleResize, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-cascader-menu`, autoPending: true, themeOverrides: mergedTheme.peerOverrides.InternalSelectMenu, theme: mergedTheme.peers.InternalSelectMenu, treeMate: this.selectTreeMate, multiple: this.multiple, value: this.value, onToggle: this.handleToggle, scrollbarProps: this.scrollbarProps }, {
                     empty: () => (0, _utils_1.resolveSlot)(cascaderSlots['not-found'], () => [])
                 }), [
                     [

package/lib/cascader/src/interface.d.ts

@@ -1,8 +1,10 @@
 import type { CheckStrategy, TreeNode } from 'treemate';
 import type { CSSProperties, Ref, Slots, VNode, VNodeChild } from 'vue';
+import type { ScrollbarProps } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { NLocale } from '../../locales';
 import type { CascaderTheme } from '../styles';
+import type { CascaderSpinProps } from './public-types';
 export type ValueAtom = string | number;
 export type Value = ValueAtom | ValueAtom[];
 export type Key = ValueAtom;
@@ -68,6 +70,8 @@ export interface CascaderInjection {
     handleSelectMenuClickOutside: (e: MouseEvent) => void;
     handleCascaderMenuClickOutside: (e: MouseEvent) => void;
     renderLabelRef: Ref<((option: CascaderOption, checked: boolean) => VNodeChild) | undefined>;
+    spinPropsRef: Ref<CascaderSpinProps | undefined>;
+    scrollbarPropsRef: Ref<ScrollbarProps | undefined>;
     clearPattern: () => void;
 }
 export interface CascaderSubmenuInstance {

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

@@ -0,0 +1,2 @@
+import type { SharedSpinProps } from '../../_internal';
+export type CascaderSpinProps = SharedSpinProps;

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

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

package/lib/checkbox/index.d.ts

@@ -3,3 +3,4 @@ export type { CheckboxProps } from './src/Checkbox';
 export { checkboxGroupProps, default as NCheckboxGroup } from './src/CheckboxGroup';
 export type { CheckboxGroupProps } from './src/CheckboxGroup';
 export type { CheckboxInst } from './src/interface';
+export type * from './src/public-types';

package/lib/checkbox/src/Checkbox.d.ts

@@ -1,8 +1,9 @@
 import type { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { CheckboxInst, OnUpdateChecked } from './interface';
+import type { CheckboxSize } from './public-types';
 export declare const checkboxProps: {
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<CheckboxSize>;
     checked: {
         type: PropType<boolean | string | number | undefined>;
         default: undefined;
@@ -127,7 +128,7 @@ export declare const checkboxProps: {
 };
 export type CheckboxProps = ExtractPublicPropTypes<typeof checkboxProps>;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<CheckboxSize>;
     checked: {
         type: PropType<boolean | string | number | undefined>;
         default: undefined;
@@ -326,7 +327,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     themeClass: import("vue").Ref<string, string> | undefined;
     onRender: (() => void) | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    size: PropType<"small" | "medium" | "large">;
+    size: PropType<CheckboxSize>;
     checked: {
         type: PropType<boolean | string | number | undefined>;
         default: undefined;

package/lib/checkbox/src/Checkbox.js

@@ -53,7 +53,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const NCheckboxGroup = (0, vue_1.inject)(CheckboxGroup_1.checkboxGroupInjectionKey, null);
         const selfRef = (0, vue_1.ref)(null);
-        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef, mergedComponentPropsRef } = (0, _mixins_1.useConfig)(props);
         const uncontrolledCheckedRef = (0, vue_1.ref)(props.defaultChecked);
         const controlledCheckedRef = (0, vue_1.toRef)(props, 'checked');
         const mergedCheckedRef = (0, vooks_1.useMergedState)(controlledCheckedRef, uncontrolledCheckedRef);
@@ -71,6 +71,7 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const formItem = (0, _mixins_1.useFormItem)(props, {
             mergedSize(NFormItem) {
+                var _a, _b;
                 const { size } = props;
                 if (size !== undefined)
                     return size;
@@ -85,6 +86,9 @@ exports.default = (0, vue_1.defineComponent)({
                     if (mergedSize !== undefined)
                         return mergedSize.value;
                 }
+                const configSize = (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Checkbox) === null || _b === void 0 ? void 0 : _b.size;
+                if (configSize)
+                    return configSize;
                 return 'medium';
             },
             mergedDisabled(NFormItem) {

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

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

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

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

package/lib/color-picker/src/ColorPicker.d.ts

@@ -1,5 +1,5 @@
 import type { HSLA, RGBA } from 'seemly';
-import type { PropType, Ref, SlotsType, VNode } from 'vue';
+import type { ComponentPublicInstance, PropType, Ref, SlotsType, VNode } from 'vue';
 import type { FollowerPlacement } from 'vueuc';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { OnClear, OnUpdateValue, RenderLabel } from './interface';
@@ -939,6 +939,11 @@ export interface ColorPickerSlots {
     default?: () => VNode[];
     label?: (color: string | null) => VNode[];
     action?: () => VNode[];
+    trigger?: (props: {
+        value: string | null;
+        onClick: () => void;
+        ref: (el: any) => void;
+    }) => VNode[];
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly value: PropType<string | null>;
@@ -1872,7 +1877,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     mergedClsPrefix: Ref<string, string>;
     namespace: import("vue").ComputedRef<string | undefined>;
-    selfRef: Ref<HTMLElement | null, HTMLElement | null>;
     hsla: import("vue").ComputedRef<HSLA | null>;
     rgba: import("vue").ComputedRef<RGBA | null>;
     mergedShow: import("vue").ComputedRef<boolean>;
@@ -1881,6 +1885,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     adjustedTo: import("vue").ComputedRef<string | HTMLElement>;
     mergedValue: import("vue").ComputedRef<string | null>;
     handleTriggerClick(): void;
+    setTriggerRef: (el: Element | ComponentPublicInstance | null) => void;
     handleClickOutside(e: MouseEvent): void;
     renderPanel: () => VNode;
     cssVars: import("vue").ComputedRef<{