naive-ui 2.43.2 → 2.44.1

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

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,3 @@
+import type { SharedSpinProps } from '../../_internal';
+export type CascaderSize = 'small' | 'medium' | 'large';
+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;
@@ -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/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/color-picker/index.d.ts

@@ -1,2 +1,3 @@
 export { colorPickerProps, default as NColorPicker } from './src/ColorPicker';
 export type { ColorPickerProps, ColorPickerSlots } from './src/ColorPicker';
+export type * from './src/public-types';

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

@@ -1,8 +1,9 @@
 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';
+import type { ColorPickerSize } from './public-types';
 import type { ActionType, ColorPickerMode } from './utils';
 export declare const colorPickerProps: {
     readonly value: PropType<string | null>;
@@ -39,7 +40,7 @@ export declare const colorPickerProps: {
         readonly default: null;
     };
     readonly internalActions: PropType<ReadonlyArray<"redo" | "undo">>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<ColorPickerSize>;
     readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly onConfirm: PropType<OnUpdateValue>;
@@ -939,6 +940,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>;
@@ -975,7 +981,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: null;
     };
     readonly internalActions: PropType<ReadonlyArray<"redo" | "undo">>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<ColorPickerSize>;
     readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly onConfirm: PropType<OnUpdateValue>;
@@ -1872,7 +1878,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 +1886,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<{
@@ -1932,7 +1938,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly default: null;
     };
     readonly internalActions: PropType<ReadonlyArray<"redo" | "undo">>;
-    readonly size: PropType<"small" | "medium" | "large">;
+    readonly size: PropType<ColorPickerSize>;
     readonly renderLabel: PropType<RenderLabel>;
     readonly onComplete: PropType<OnUpdateValue>;
     readonly onConfirm: PropType<OnUpdateValue>;

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,9 +67,33 @@ 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 {
+      mergedClsPrefixRef,
+      namespaceRef,
+      inlineThemeDisabled,
+      mergedComponentPropsRef
+    } = useConfig(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.ColorPicker) === null || _b === void 0 ? void 0 : _b.size;
+        if (configSize) return configSize;
+        return 'medium';
+      }
+    });
     const {
       mergedSizeRef,
       mergedDisabledRef
@@ -77,11 +101,6 @@ export default defineComponent({
     const {
       localeRef
     } = useLocale('global');
-    const {
-      mergedClsPrefixRef,
-      namespaceRef,
-      inlineThemeDisabled
-    } = useConfig(props);
     const themeRef = useTheme('ColorPicker', '-color-picker', style, colorPickerLight, props, mergedClsPrefixRef);
     provide(colorPickerInjectionKey, {
       themeRef,
@@ -552,7 +571,6 @@ export default defineComponent({
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       namespace: namespaceRef,
-      selfRef,
       hsla: hslaRef,
       rgba: rgbaRef,
       mergedShow: mergedShowRef,
@@ -561,12 +579,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 +609,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 +644,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'
         }

package/es/color-picker/src/public-types.d.ts

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

package/es/color-picker/src/public-types.mjs

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

package/es/color-picker/src/styles/index.cssr.mjs

@@ -10,14 +10,7 @@ import { c, cB, cE, cM } from "../../../_utils/cssr/index.mjs";
 // --n-height
 // --n-box-shadow
 // --n-divider-color
-export default c([cB('color-picker', `
- display: inline-block;
- box-sizing: border-box;
- height: var(--n-height);
- font-size: var(--n-font-size);
- width: 100%;
- position: relative;
- `), cB('color-picker-panel', `
+export default c([cB('color-picker-panel', `
  margin: 4px 0;
  width: 240px;
  font-size: var(--n-panel-font-size);
@@ -132,14 +125,18 @@ export default c([cB('color-picker', `
  border-top: 1px solid var(--n-divider-color);
  padding: 8px 12px;
  justify-content: flex-end;
- `, [cB('button', 'margin-left: 8px;')]), cB('color-picker-trigger', `
- border: var(--n-border);
- height: 100%;
+ `, [cB('button', 'margin-left: 8px;')]), cB('color-picker', `
+ display: inline-block;
  box-sizing: border-box;
+ height: var(--n-height);
+ font-size: var(--n-font-size);
+ width: 100%;
+ position: relative;
+ cursor: pointer;
+ border: var(--n-border);
  border-radius: var(--n-border-radius);
  transition: border-color .3s var(--n-bezier);
- cursor: pointer;
- `, [cE('value', `
+ `, [cM('disabled', 'cursor: not-allowed'), cE('value', `
  white-space: nowrap;
  position: relative;
  `), cE('fill', `
@@ -152,7 +149,7 @@ export default c([cB('color-picker', `
  right: 4px;
  top: 4px;
  bottom: 4px;
- `), cM('disabled', 'cursor: not-allowed'), cB('color-picker-checkboard', `
+ `), cB('color-picker-checkboard', `
  border-radius: var(--n-border-radius);
  `, [c('&::after', `
  --n-block-size: calc((var(--n-height) - 8px) / 3);