naive-ui 2.43.1 → 2.44.0

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 { 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;
@@ -2791,17 +2798,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
     }>>>;
 }>> & Readonly<{}>, {
-    readonly options: CascaderOption[];
-    readonly to: string | boolean | HTMLElement;
     readonly disabled: boolean | undefined;
-    readonly show: boolean | undefined;
-    readonly separator: string;
-    readonly multiple: boolean;
     readonly bordered: boolean | undefined;
+    readonly to: string | boolean | HTMLElement;
     readonly clearable: boolean;
     readonly defaultValue: Value | null;
     readonly placement: FollowerPlacement;
+    readonly options: CascaderOption[];
+    readonly show: boolean | undefined;
+    readonly separator: string;
     readonly allowCheckingNotLoaded: boolean;
+    readonly multiple: boolean;
     readonly filterable: boolean;
     readonly disabledField: string;
     readonly expandTrigger: ExpandTrigger;

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]
 });
@@ -853,6 +855,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 +867,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: {
@@ -702,8 +703,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
 }>> & Readonly<{}>, {
-    show: boolean;
     loading: boolean;
     placement: FollowerPlacement;
+    show: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/cascader/src/CascaderMenu.mjs

@@ -1,7 +1,8 @@
 import { clickoutside } from 'vdirs';
-import { defineComponent, h, inject, ref, Transition, withDirectives } from 'vue';
+import { computed, defineComponent, h, inject, ref, Transition, withDirectives } from 'vue';
 import { NBaseMenuMask } from "../../_internal/index.mjs";
 import FocusDetector from "../../_internal/focus-detector/index.mjs";
+import { useConfig } from "../../_mixins/index.mjs";
 import { resolveSlot, resolveWrappedSlot, useOnResize } from "../../_utils/index.mjs";
 import { NEmpty } from "../../empty/index.mjs";
 import NCascaderSubmenu from "./CascaderSubmenu.mjs";
@@ -51,6 +52,9 @@ export default defineComponent({
       mergedThemeRef,
       getColumnStyleRef
     } = inject(cascaderInjectionKey);
+    const {
+      mergedComponentPropsRef
+    } = useConfig();
     const submenuInstRefs = [];
     const maskInstRef = ref(null);
     const selfElRef = ref(null);
@@ -104,6 +108,10 @@ export default defineComponent({
       submenuInstRefs,
       maskInstRef,
       mergedTheme: mergedThemeRef,
+      mergedRenderEmpty: 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,
@@ -152,10 +160,13 @@ export default defineComponent({
           ref: "maskInstRef"
         })) : h("div", {
           class: `${mergedClsPrefix}-cascader-menu__empty`
-        }, resolveSlot(this.$slots.empty, () => [h(NEmpty, {
-          theme: mergedTheme.peers.Empty,
-          themeOverrides: mergedTheme.peerOverrides.Empty
-        })])), resolveWrappedSlot(this.$slots.action, children => children && h("div", {
+        }, resolveSlot(this.$slots.empty, () => {
+          var _a;
+          return [((_a = this.mergedRenderEmpty) === null || _a === void 0 ? void 0 : _a.call(this)) || h(NEmpty, {
+            theme: mergedTheme.peers.Empty,
+            themeOverrides: mergedTheme.peerOverrides.Empty
+          })];
+        })), resolveWrappedSlot(this.$slots.action, children => children && h("div", {
           class: `${mergedClsPrefix}-cascader-menu-action`,
           "data-action": true
         }, children)), h(FocusDetector, {

package/es/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/es/cascader/src/CascaderOption.mjs

@@ -33,6 +33,7 @@ export default defineComponent({
       showCheckboxRef,
       renderPrefixRef,
       renderSuffixRef,
+      spinPropsRef,
       updateHoverKey,
       updateKeyboardKey,
       addLoadingKey,
@@ -184,6 +185,7 @@ export default defineComponent({
       label: labelRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: mergedThemeRef,
+      spinProps: spinPropsRef,
       handleClick,
       handleCheckboxUpdateValue,
       mergedHandleMouseEnter: mergedHandleMouseEnterRef,
@@ -224,13 +226,13 @@ export default defineComponent({
     let suffixNode = null;
     const originalSuffixChild = h("div", {
       class: `${mergedClsPrefix}-cascader-option-icon-placeholder`
-    }, !this.isLeaf ? h(NBaseLoading, {
+    }, !this.isLeaf ? h(NBaseLoading, Object.assign({
       clsPrefix: mergedClsPrefix,
       scale: 0.85,
       strokeWidth: 24,
       show: this.isLoading,
       class: `${mergedClsPrefix}-cascader-option-icon`
-    }, {
+    }, this.spinProps), {
       default: () => h(NBaseIcon, {
         clsPrefix: mergedClsPrefix,
         key: "arrow",

package/es/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>;
@@ -696,9 +697,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{}>, {
     value: Value | null;
-    pattern: string;
     show: boolean;
     multiple: boolean;
+    pattern: string;
     tmNodes: TmNode[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/cascader/src/CascaderSelectMenu.mjs

@@ -46,6 +46,7 @@ export default defineComponent({
       handleSelectMenuClickOutside,
       doUncheck: cascaderDoUncheck,
       doCheck: cascaderDoCheck,
+      scrollbarPropsRef,
       clearPattern
     } = inject(cascaderInjectionKey);
     const menuInstRef = ref(null);
@@ -144,7 +145,8 @@ export default defineComponent({
       handleResize,
       handleToggle,
       handleClickOutside,
-      cascaderSlots
+      cascaderSlots,
+      scrollbarProps: scrollbarPropsRef
     }, exposedRef);
   },
   render() {
@@ -169,7 +171,8 @@ export default defineComponent({
         treeMate: this.selectTreeMate,
         multiple: this.multiple,
         value: this.value,
-        onToggle: this.handleToggle
+        onToggle: this.handleToggle,
+        scrollbarProps: this.scrollbarProps
       }, {
         empty: () => resolveSlot(cascaderSlots['not-found'], () => [])
       }), [[clickoutside, this.handleClickOutside, undefined, {

package/es/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/es/cascader/src/public-types.d.ts

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

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

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

package/es/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/es/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;
@@ -23,11 +24,11 @@ export declare const checkboxProps: {
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -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;
@@ -148,11 +149,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -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;
@@ -347,11 +348,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     checkedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     uncheckedValue: {
-        type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
+        type: (StringConstructor | NumberConstructor | BooleanConstructor)[];
         default: boolean;
     };
     'onUpdate:checked': PropType<MaybeArray<OnUpdateChecked>>;
@@ -450,10 +451,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }, any>>>;
 }>> & Readonly<{}>, {
     disabled: boolean | undefined;
-    checked: string | number | boolean | undefined;
-    indeterminate: boolean;
     focusable: boolean;
+    checked: string | number | boolean | undefined;
     defaultChecked: string | number | boolean;
+    indeterminate: boolean;
     checkedValue: string | number | boolean;
     uncheckedValue: string | number | boolean;
     privateInsideTable: boolean;

package/es/checkbox/src/Checkbox.mjs

@@ -63,7 +63,8 @@ export default defineComponent({
     const {
       mergedClsPrefixRef,
       inlineThemeDisabled,
-      mergedRtlRef
+      mergedRtlRef,
+      mergedComponentPropsRef
     } = useConfig(props);
     const uncontrolledCheckedRef = ref(props.defaultChecked);
     const controlledCheckedRef = toRef(props, 'checked');
@@ -81,6 +82,7 @@ export default defineComponent({
     });
     const formItem = useFormItem(props, {
       mergedSize(NFormItem) {
+        var _a, _b;
         const {
           size
         } = props;
@@ -99,6 +101,8 @@ export default defineComponent({
           } = NFormItem;
           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/es/checkbox/src/public-types.d.ts

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

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

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

package/es/code/src/Code.d.ts

@@ -214,11 +214,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         lineNumberTextColor: string;
     }, any>>>;
 }>> & Readonly<{}>, {
+    code: string;
     inline: boolean;
     trim: boolean;
-    code: string;
-    wordWrap: boolean;
     uri: boolean;
+    wordWrap: boolean;
     showLineNumbers: boolean;
     internalNoHighlight: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/collapse/src/Collapse.d.ts

@@ -268,7 +268,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly defaultExpandedNames: string | number | (string | number)[] | null;
     readonly arrowPlacement: "left" | "right";
     readonly accordion: boolean;
-    readonly triggerAreas: ("extra" | "main" | "arrow")[];
+    readonly triggerAreas: ("main" | "extra" | "arrow")[];
     readonly onExpandedNamesChange: MaybeArray<OnUpdateExpandedNames> | undefined;
 }, SlotsType<CollapseSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/collapse/src/CollapseItem.d.ts

@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     randomName: string;
     mergedClsPrefix: import("vue").Ref<string, string>;
     collapsed: import("vue").ComputedRef<boolean>;
-    triggerAreas: import("vue").Ref<("extra" | "main" | "arrow")[], ("extra" | "main" | "arrow")[]>;
+    triggerAreas: import("vue").Ref<("main" | "extra" | "arrow")[], ("main" | "extra" | "arrow")[]>;
     mergedDisplayDirective: import("vue").ComputedRef<"show" | "if">;
     arrowPlacement: import("vue").ComputedRef<"left" | "right">;
     handleClick(e: MouseEvent): void;

package/es/collapse-transition/src/CollapseTransition.d.ts

@@ -72,8 +72,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         bezier: string;
     }, any>>>;
 }>> & Readonly<{}>, {
-    readonly appear: boolean;
     readonly show: boolean;
     readonly collapsed: boolean | undefined;
+    readonly appear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/color-picker/src/AlphaSlider.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     onComplete: PropType<() => void>;
 }>> & Readonly<{}>, {
-    alpha: number;
     rgba: RGBA | null;
+    alpha: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/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<{
@@ -2827,10 +2832,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
     }>>>;
 }>> & Readonly<{}>, {
-    readonly to: string | boolean | HTMLElement;
     readonly disabled: boolean | undefined;
-    readonly show: boolean | undefined;
+    readonly to: string | boolean | HTMLElement;
     readonly placement: FollowerPlacement;
+    readonly show: boolean | undefined;
     readonly defaultShow: boolean;
     readonly modes: ColorPickerMode[];
     readonly showAlpha: boolean;

package/es/color-picker/src/ColorPicker.mjs

@@ -4,7 +4,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { computed, defineComponent, h, nextTick, provide, ref, toRef, Transition, watch, watchEffect, withDirectives } from 'vue';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
-import { call, createKey, useAdjustedTo } from "../../_utils/index.mjs";
+import { call, createKey, resolveWrappedSlotWithProps, useAdjustedTo } from "../../_utils/index.mjs";
 import { NButton } from "../../button/index.mjs";
 import { colorPickerLight } from "../styles/index.mjs";
 import AlphaSlider from "./AlphaSlider.mjs";
@@ -67,7 +67,10 @@ export default defineComponent({
   setup(props, {
     slots
   }) {
-    const selfRef = ref(null);
+    let triggerRef = null;
+    function setTriggerRef(el) {
+      triggerRef = el;
+    }
     let upcomingValue = null;
     const formItem = useFormItem(props);
     const {
@@ -552,7 +555,6 @@ export default defineComponent({
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       namespace: namespaceRef,
-      selfRef,
       hsla: hslaRef,
       rgba: rgbaRef,
       mergedShow: mergedShowRef,
@@ -561,12 +563,21 @@ export default defineComponent({
       adjustedTo: useAdjustedTo(props),
       mergedValue: mergedValueRef,
       handleTriggerClick() {
+        if (mergedDisabledRef.value) {
+          return;
+        }
         doUpdateShow(true);
       },
+      setTriggerRef,
       handleClickOutside(e) {
-        var _a;
-        if ((_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e))) {
-          return;
+        if (triggerRef instanceof Element) {
+          if (triggerRef.contains(getPreciseEventTarget(e))) {
+            return;
+          }
+        } else if (triggerRef) {
+          if (triggerRef.$el.contains(getPreciseEventTarget(e))) {
+            return;
+          }
         }
         doUpdateShow(false);
       },
@@ -582,18 +593,24 @@ export default defineComponent({
       onRender
     } = this;
     onRender === null || onRender === void 0 ? void 0 : onRender();
-    return h("div", {
-      class: [this.themeClass, `${mergedClsPrefix}-color-picker`],
-      ref: "selfRef",
-      style: this.cssVars
-    }, h(VBinder, null, {
+    return h(VBinder, null, {
       default: () => [h(VTarget, null, {
-        default: () => h(ColorPickerTrigger, {
-          clsPrefix: mergedClsPrefix,
+        default: () => resolveWrappedSlotWithProps(this.$slots.trigger, {
           value: this.mergedValue,
-          hsla: this.hsla,
-          disabled: this.mergedDisabled,
-          onClick: this.handleTriggerClick
+          onClick: this.handleTriggerClick,
+          ref: this.setTriggerRef
+        }, children => {
+          const triggerNode = children || h(ColorPickerTrigger, {
+            clsPrefix: mergedClsPrefix,
+            value: this.mergedValue,
+            hsla: this.hsla,
+            style: this.cssVars,
+            ref: this.setTriggerRef,
+            disabled: this.mergedDisabled,
+            class: this.themeClass,
+            onClick: this.mergedDisabled ? undefined : this.handleTriggerClick
+          });
+          return triggerNode;
         })
       }), h(VFollower, {
         placement: this.placement,
@@ -611,6 +628,6 @@ export default defineComponent({
           }]]) : null
         })
       })]
-    }));
+    });
   }
 });

package/es/color-picker/src/ColorPickerTrigger.mjs

@@ -36,10 +36,10 @@ export default defineComponent({
       } = props;
       const renderLabel = colorPickerSlots.label || renderLabelRef.value;
       return h("div", {
-        class: [`${clsPrefix}-color-picker-trigger`, disabled && `${clsPrefix}-color-picker-trigger--disabled`],
+        class: [`${clsPrefix}-color-picker`, disabled && `${clsPrefix}-color-picker--disabled`],
         onClick: disabled ? undefined : onClick
       }, h("div", {
-        class: `${clsPrefix}-color-picker-trigger__fill`
+        class: `${clsPrefix}-color-picker__fill`
       }, h("div", {
         class: `${clsPrefix}-color-picker-checkboard`
       }), h("div", {
@@ -52,7 +52,7 @@ export default defineComponent({
           backgroundColor: hsla ? toHslaString(hsla) : ''
         }
       }), value && hsla ? h("div", {
-        class: `${clsPrefix}-color-picker-trigger__value`,
+        class: `${clsPrefix}-color-picker__value`,
         style: {
           color: getWCAGContrast(hsla) ? 'white' : 'black'
         }