naive-ui 2.32.2 → 2.33.2

package/lib/radio/src/use-radio.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.radioGroupInjectionKey = void 0;
+exports.setup = exports.radioGroupInjectionKey = exports.radioProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-const radioProps = {
+exports.radioProps = {
     name: String,
     value: {
-        type: [String, Number],
+        type: [String, Number, Boolean],
         default: 'on'
     },
     checked: {
@@ -27,15 +27,18 @@ const radioProps = {
     // deprecated
     checkedValue: {
         type: Boolean,
-        validator: () => {
-            (0, _utils_1.warn)('radio', '`checked-value` is deprecated, please use `checked` instead.');
-            return true;
-        },
         default: undefined
     }
 };
 exports.radioGroupInjectionKey = (0, _utils_1.createInjectionKey)('n-radio-group');
 function setup(props) {
+    if (process.env.NODE_ENV !== 'production') {
+        (0, vue_1.watchEffect)(() => {
+            if (props.checkedValue !== undefined) {
+                (0, _utils_1.warnOnce)('radio', '`checked-value` is deprecated, please use `checked` instead.');
+            }
+        });
+    }
     const formItem = (0, _mixins_1.useFormItem)(props, {
         mergedSize(NFormItem) {
             const { size } = props;
@@ -133,5 +136,4 @@ function setup(props) {
         handleRadioInputFocus
     };
 }
-setup.props = radioProps;
-exports.default = setup;
+exports.setup = setup;

package/lib/radio/styles/dark.js

@@ -13,7 +13,7 @@ const radioDark = {
         const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
         return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
-            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+            fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, colorActive: '#0000', textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }
 };
 exports.default = radioDark;

package/lib/radio/styles/light.d.ts

@@ -15,6 +15,7 @@ declare const self: (vars: ThemeCommonVars) => {
     boxShadowDisabled: string;
     color: string;
     colorDisabled: string;
+    colorActive: string;
     textColor: string;
     textColorDisabled: string;
     dotColorActive: string;

package/lib/radio/styles/light.js

@@ -10,7 +10,7 @@ const self = (vars) => {
     const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
+        fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, colorActive: '#0000', textColor: textColor2, textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };
 const radioLight = {
     name: 'Radio',

package/lib/rate/src/Rate.d.ts

@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { RateOnUpdateValue } from './interface';
 export declare const rateProps: {
     readonly allowHalf: BooleanConstructor;
     readonly count: {
@@ -8,17 +9,19 @@ export declare const rateProps: {
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -50,17 +53,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -84,11 +89,12 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    mergedValue: import("vue").ComputedRef<number>;
+    mergedValue: import("vue").ComputedRef<number | null>;
     hoverIndex: import("vue").Ref<number | null>;
     handleMouseMove: (index: number, e: MouseEvent) => void;
     handleClick: (index: number, e: MouseEvent) => void;
     handleMouseLeave: () => void;
+    handleMouseEnterSomeStar: () => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-item-color': string;
@@ -105,17 +111,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly value: NumberConstructor;
     readonly defaultValue: {
-        readonly type: NumberConstructor;
-        readonly default: 0;
+        readonly type: PropType<number | null>;
+        readonly default: null;
     };
     readonly readonly: BooleanConstructor;
     readonly size: {
         readonly type: PropType<number | "small" | "medium" | "large">;
         readonly default: "medium";
     };
+    readonly clearable: BooleanConstructor;
     readonly color: StringConstructor;
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: number) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: number) => void>>;
+    readonly onClear: PropType<() => void>;
+    readonly 'onUpdate:value': PropType<MaybeArray<RateOnUpdateValue>>;
+    readonly onUpdateValue: PropType<MaybeArray<RateOnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"Rate", {
         itemColor: string;
         itemColorActive: string;
@@ -140,7 +148,8 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly readonly: boolean;
     readonly size: number | "small" | "medium" | "large";
-    readonly defaultValue: number;
+    readonly clearable: boolean;
+    readonly defaultValue: number | null;
     readonly count: number;
     readonly allowHalf: boolean;
 }>;

package/lib/rate/src/Rate.js

@@ -10,18 +10,18 @@ const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const StarIcon_1 = __importDefault(require("./StarIcon"));
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.rateProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { allowHalf: Boolean, count: {
         type: Number,
         default: 5
     }, value: Number, defaultValue: {
         type: Number,
-        default: 0
+        default: null
     }, readonly: Boolean, size: {
         type: [String, Number],
         default: 'medium'
-    }, color: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
+    }, clearable: Boolean, color: String, onClear: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Rate',
     props: exports.rateProps,
@@ -32,6 +32,7 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const hoverIndexRef = (0, vue_1.ref)(null);
         const formItem = (0, _mixins_1.useFormItem)(props);
+        const mergedValue = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
@@ -59,14 +60,31 @@ exports.default = (0, vue_1.defineComponent)({
                 return index + 1;
             }
         }
+        let cleared = false;
         function handleMouseMove(index, e) {
+            if (cleared)
+                return;
             hoverIndexRef.value = getDerivedValue(index, e);
         }
         function handleMouseLeave() {
             hoverIndexRef.value = null;
         }
         function handleClick(index, e) {
-            doUpdateValue(getDerivedValue(index, e));
+            var _a;
+            const { clearable } = props;
+            const derivedValue = getDerivedValue(index, e);
+            if (clearable && derivedValue === mergedValue.value) {
+                cleared = true;
+                (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+                hoverIndexRef.value = null;
+                doUpdateValue(null);
+            }
+            else {
+                doUpdateValue(derivedValue);
+            }
+        }
+        function handleMouseEnterSomeStar() {
+            cleared = false;
         }
         const mergedSizeRef = (0, vue_1.computed)(() => {
             const { size } = props;
@@ -81,10 +99,11 @@ exports.default = (0, vue_1.defineComponent)({
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { itemColor, itemColorActive } = self;
+            const { color } = props;
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-item-color': itemColor,
-                '--n-item-color-active': props.color || itemColorActive,
+                '--n-item-color-active': color || itemColorActive,
                 '--n-item-size': mergedSizeRef.value
             };
         });
@@ -104,11 +123,12 @@ exports.default = (0, vue_1.defineComponent)({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            mergedValue: (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef),
+            mergedValue,
             hoverIndex: hoverIndexRef,
             handleMouseMove,
             handleClick,
             handleMouseLeave,
+            handleMouseEnterSomeStar,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -125,17 +145,17 @@ exports.default = (0, vue_1.defineComponent)({
                 this.themeClass
             ], style: this.cssVars, onMouseleave: this.handleMouseLeave }, (0, vue_1.renderList)(this.count, (_, index) => {
             const icon = defaultSlot ? (defaultSlot()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => StarIcon_1.default }));
-            const fullStarActive = hoverIndex !== null
+            const entireStarActive = hoverIndex !== null
                 ? index + 1 <= hoverIndex
-                : index + 1 <= mergedValue;
+                : index + 1 <= (mergedValue || 0);
             return ((0, vue_1.h)("div", { key: index, class: [
                     `${mergedClsPrefix}-rate__item`,
-                    fullStarActive && `${mergedClsPrefix}-rate__item--active`
+                    entireStarActive && `${mergedClsPrefix}-rate__item--active`
                 ], onClick: readonly
                     ? undefined
                     : (e) => {
                         this.handleClick(index, e);
-                    }, onMousemove: readonly
+                    }, onMouseenter: this.handleMouseEnterSomeStar, onMousemove: readonly
                     ? undefined
                     : (e) => {
                         this.handleMouseMove(index, e);
@@ -144,9 +164,9 @@ exports.default = (0, vue_1.defineComponent)({
                 this.allowHalf ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-rate__half`,
                         {
-                            [`${mergedClsPrefix}-rate__half--active`]: !fullStarActive && hoverIndex !== null
+                            [`${mergedClsPrefix}-rate__half--active`]: !entireStarActive && hoverIndex !== null
                                 ? index + 0.5 <= hoverIndex
-                                : index + 0.5 <= mergedValue
+                                : index + 0.5 <= (mergedValue || 0)
                         }
                     ] }, icon)) : null));
         })));

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

@@ -0,0 +1,2 @@
+export declare type RateOnUpdateValue = (value: number & null) => void;
+export declare type RateOnUpdateValueImpl = (value: number | null) => void;

package/lib/rate/src/interface.js

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

package/lib/rate/src/styles/index.cssr.js

@@ -26,17 +26,17 @@ exports.default = (0, cssr_1.cB)('rate', {
  transform: scale(1);
  font-size: var(--n-item-size);
  color: var(--n-item-color);
- `, [(0, cssr_1.c)('&:not(:first-child)', {
-  marginLeft: '6px'
-}), (0, cssr_1.cM)('active', {
-  color: 'var(--n-item-color-active)'
-})]), (0, cssr_1.cNotM)('readonly', `
+ `, [(0, cssr_1.c)('&:not(:first-child)', `
+ margin-left: 6px;
+ `), (0, cssr_1.cM)('active', `
+ color: var(--n-item-color-active);
+ `)]), (0, cssr_1.cNotM)('readonly', `
  cursor: pointer;
- `, [(0, cssr_1.cE)('item', [(0, cssr_1.c)('&:hover', {
-  transform: 'scale(1.05)'
-}), (0, cssr_1.c)('&:active', {
-  transform: 'scale(0.96)'
-})])]), (0, cssr_1.cE)('half', `
+ `, [(0, cssr_1.cE)('item', [(0, cssr_1.c)('&:hover', `
+ transform: scale(1.05);
+ `), (0, cssr_1.c)('&:active', `
+ transform: scale(0.96);
+ `)])]), (0, cssr_1.cE)('half', `
  display: flex;
  transition: inherit;
  position: absolute;
@@ -46,6 +46,6 @@ exports.default = (0, cssr_1.cB)('rate', {
  width: 50%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0);
- `, [(0, cssr_1.cM)('active', {
-  color: 'var(--n-item-color-active)'
-})])]);
+ `, [(0, cssr_1.cM)('active', `
+ color: var(--n-item-color-active);
+ `)])]);

package/lib/slider/src/Slider.d.ts

@@ -21,6 +21,10 @@ export declare const sliderProps: {
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -152,6 +156,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -357,6 +365,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly formatTooltip: PropType<(value: number) => string | number>;
+    readonly keyboard: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly min: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -482,6 +494,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly min: number;
     readonly to: string | boolean | HTMLElement;
     readonly defaultValue: number | number[];
+    readonly keyboard: boolean;
     readonly showTooltip: boolean | undefined;
 }>;
 export default _default;

package/lib/slider/src/Slider.js

@@ -21,7 +21,10 @@ exports.sliderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, marks: Object, disabled: {
         type: Boolean,
         default: undefined
-    }, formatTooltip: Function, min: {
+    }, formatTooltip: Function, keyboard: {
+        type: Boolean,
+        default: true
+    }, min: {
         type: Number,
         default: 0
     }, max: {
@@ -262,7 +265,7 @@ exports.default = (0, vue_1.defineComponent)({
             return Number(newValue.toFixed(precisionRef.value));
         }
         function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
-            if (!markValues || !markValues.length)
+            if (!(markValues === null || markValues === void 0 ? void 0 : markValues.length))
                 return null;
             let closestMark = null;
             let index = -1;
@@ -302,7 +305,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         // dom event handle
         function handleRailKeyDown(e) {
-            if (mergedDisabledRef.value)
+            if (mergedDisabledRef.value || !props.keyboard)
                 return;
             const { vertical, reverse } = props;
             switch (e.key) {

package/lib/theme-editor/src/MaximizeIcon.d.ts

@@ -0,0 +1 @@
+export declare const MaximizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/lib/theme-editor/src/MaximizeIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaximizeIcon = void 0;
+const vue_1 = require("vue");
+exports.MaximizeIcon = (0, vue_1.defineComponent)({
+    render() {
+        return ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
+            (0, vue_1.h)("g", { fill: "none" },
+                (0, vue_1.h)("path", { d: "M8.5 2a.5.5 0 0 0 0 1h3.793L3 12.293V8.5a.5.5 0 0 0-1 0v4.9a.6.6 0 0 0 .6.6h4.9a.5.5 0 0 0 0-1H3.707L13 3.707V7.5a.5.5 0 0 0 1 0V2.6a.6.6 0 0 0-.6-.6H8.5z", fill: "currentColor" }))));
+    }
+});

package/lib/theme-editor/src/MinimizeIcon.d.ts

@@ -0,0 +1 @@
+export declare const MinimizeIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;

package/lib/theme-editor/src/MinimizeIcon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MinimizeIcon = void 0;
+const vue_1 = require("vue");
+exports.MinimizeIcon = (0, vue_1.defineComponent)({
+    render() {
+        return ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+            (0, vue_1.h)("path", { d: "M4 18v2h6.586L2 28.582L3.414 30L12 21.414V28h2V18H4z", fill: "currentColor" }),
+            (0, vue_1.h)("path", { d: "M30 3.416L28.592 2L20 10.586V4h-2v10h10v-2h-6.586L30 3.416z", fill: "currentColor" })));
+    }
+});

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -130,5 +130,9 @@ declare const _default: import("vue").DefineComponent<{}, {
     handleExportClick: () => void;
     handleImportClick: () => void;
     handleInputFileChange: () => void;
+    toggleMaximized: () => void;
+    isMaximized: import("vue").Ref<{
+        valueOf: () => boolean;
+    }>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/lib/theme-editor/src/ThemeEditor.js

@@ -9,6 +9,7 @@ const popover_1 = require("../../popover");
 const collapse_1 = require("../../collapse");
 const input_1 = require("../../input");
 const space_1 = require("../../space");
+const grid_1 = require("../../grid");
 const _mixins_1 = require("../../_mixins");
 const element_1 = require("../../element");
 const divider_1 = require("../../divider");
@@ -16,6 +17,9 @@ const button_1 = require("../../button");
 const color_picker_1 = require("../../color-picker");
 const empty_1 = require("../../empty");
 const _utils_1 = require("../../_utils");
+const icon_1 = require("../../icon");
+const MaximizeIcon_1 = require("./MaximizeIcon");
+const MinimizeIcon_1 = require("./MinimizeIcon");
 const ColorWandIcon = ((0, vue_1.h)("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { width: '1em', height: '1em', color: 'currentColor' } },
     (0, vue_1.h)("path", { d: "M13.5 1C13.7761 1 14 1.22386 14 1.5V2H14.5C14.7761 2 15 2.22386 15 2.5C15 2.77614 14.7761 3 14.5 3H14V3.5C14 3.77614 13.7761 4 13.5 4C13.2239 4 13 3.77614 13 3.5V3H12.5C12.2239 3 12 2.77614 12 2.5C12 2.22386 12.2239 2 12.5 2H13V1.5C13 1.22386 13.2239 1 13.5 1Z", fill: "currentColor" }),
     (0, vue_1.h)("path", { d: "M3.5 3C3.77615 3 4 3.22386 4 3.5V4H4.5C4.77615 4 5 4.22386 5 4.5C5 4.77614 4.77615 5 4.5 5H4V5.5C4 5.77614 3.77615 6 3.5 6C3.22386 6 3 5.77614 3 5.5V5H2.5C2.22386 5 2 4.77614 2 4.5C2 4.22386 2.22386 4 2.5 4H3V3.5C3 3.22386 3.22386 3 3.5 3Z", fill: "currentColor" }),
@@ -33,6 +37,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'ThemeEditor',
     inheritAttrs: false,
     setup() {
+        const isMaximized = (0, vue_1.ref)(false);
         const fileInputRef = (0, vue_1.ref)(null);
         const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const theme = (0, vue_1.computed)(() => {
@@ -93,6 +98,9 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             fileInput.click();
         }
+        function toggleMaximized() {
+            isMaximized.value = !isMaximized.value;
+        }
         function handleInputFileChange() {
             const { value: fileInput } = fileInputRef;
             if (!fileInput)
@@ -145,7 +153,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleClearAllClick,
             handleExportClick,
             handleImportClick,
-            handleInputFileChange
+            handleInputFileChange,
+            toggleMaximized,
+            isMaximized
         };
     },
     render() {
@@ -154,7 +164,7 @@ exports.default = (0, vue_1.defineComponent)({
                 var _a, _b;
                 return [
                     (0, vue_1.h)(popover_1.NPopover, { scrollable: true, arrowPointToCenter: true, trigger: "manual", show: this.showPanel, displayDirective: "show", placement: "top-end", style: {
-                            width: '288px',
+                            width: this.isMaximized ? 'calc(100vw - 80px)' : '288px',
                             height: 'calc(100vh - 200px)',
                             padding: 0
                         } }, {
@@ -194,12 +204,20 @@ exports.default = (0, vue_1.defineComponent)({
                                     visibility: 'hidden'
                                 }, onChange: this.handleInputFileChange }),
                             (0, vue_1.h)(space_1.NSpace, { vertical: true }, {
-                                default: () => ((0, vue_1.h)(vue_1.Fragment, null,
-                                    (0, vue_1.h)("div", { style: {
+                                default: () => [
+                                    (0, vue_1.h)(space_1.NSpace, { align: "center", justify: "space-between", style: {
                                             marginBottom: '8px',
                                             fontSize: '18px',
                                             fontWeight: 500
-                                        } }, this.locale.title),
+                                        } }, {
+                                        default: () => ((0, vue_1.h)(vue_1.Fragment, null,
+                                            (0, vue_1.h)("span", null, this.locale.title),
+                                            (0, vue_1.h)(button_1.NButton, { onClick: this.toggleMaximized, secondary: true, circle: true, size: "tiny" }, {
+                                                icon: () => ((0, vue_1.h)(icon_1.NIcon, { component: this.isMaximized
+                                                        ? MinimizeIcon_1.MinimizeIcon
+                                                        : MaximizeIcon_1.MaximizeIcon }))
+                                            })))
+                                    }),
                                     this.locale.filterCompName,
                                     (0, vue_1.h)(input_1.NInput, { onChange: () => {
                                             this.compNamePattern = this.tempCompNamePattern;
@@ -229,7 +247,8 @@ exports.default = (0, vue_1.defineComponent)({
                                             (0, vue_1.h)(button_1.NButton, { block: true, size: "small", onClick: this.handleExportClick }, {
                                                 default: () => this.locale.export
                                             })))
-                                    })))
+                                    })
+                                ]
                             }),
                             (0, vue_1.h)(divider_1.NDivider, null),
                             (0, vue_1.h)(collapse_1.NCollapse, null, {
@@ -263,16 +282,20 @@ exports.default = (0, vue_1.defineComponent)({
                                         }
                                         filteredItemsCount += 1;
                                         return ((0, vue_1.h)(collapse_1.NCollapseItem, { title: themeKey, name: themeKey }, {
-                                            default: () => {
-                                                return ((0, vue_1.h)(space_1.NSpace, { vertical: true }, {
-                                                    default: () => varKeys.map((varKey) => {
+                                            default: () => ((0, vue_1.h)(grid_1.NGrid, { xGap: 32, yGap: 16, responsive: "screen", cols: this.isMaximized
+                                                    ? '1 xs:1 s:2 m:3 l:4'
+                                                    : 1 }, {
+                                                default: () => varKeys.map((varKey) => ((0, vue_1.h)(grid_1.NGi, null, {
+                                                    default: () => {
                                                         var _a, _b, _c, _d;
-                                                        return [
+                                                        return ((0, vue_1.h)(vue_1.Fragment, null,
                                                             (0, vue_1.h)("div", { key: `${varKey}Label`, style: {
                                                                     wordBreak: 'break-word'
                                                                 } }, varKey),
-                                                            showColorPicker(varKey) ? ((0, vue_1.h)(color_picker_1.NColorPicker, { key: varKey, modes: ['rgb', 'hex'], value: ((_b = (_a = this.tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]) ||
-                                                                    componentTheme[varKey], onComplete: this.applyTempOverrides, onUpdateValue: (value) => {
+                                                            showColorPicker(varKey) ? ((0, vue_1.h)(color_picker_1.NColorPicker, { key: varKey, modes: ['rgb', 'hex'], value: ((_b = (_a = this
+                                                                    .tempOverrides) === null || _a === void 0 ? void 0 : _a[themeKey]) === null || _b === void 0 ? void 0 : _b[varKey]) ||
+                                                                    componentTheme[varKey], onComplete: this
+                                                                    .applyTempOverrides, onUpdateValue: (value) => {
                                                                     this.setTempOverrides(themeKey, varKey, value);
                                                                 } }, {
                                                                 action: () => {
@@ -287,13 +310,14 @@ exports.default = (0, vue_1.defineComponent)({
                                                                             .restore
                                                                     }));
                                                                 }
-                                                            })) : ((0, vue_1.h)(input_1.NInput, { key: varKey, onChange: this.applyTempOverrides, onUpdateValue: (value) => {
+                                                            })) : ((0, vue_1.h)(input_1.NInput, { key: varKey, onChange: this
+                                                                    .applyTempOverrides, onUpdateValue: (value) => {
                                                                     this.setTempOverrides(themeKey, varKey, value);
-                                                                }, value: ((_d = (_c = this.tempOverrides) === null || _c === void 0 ? void 0 : _c[themeKey]) === null || _d === void 0 ? void 0 : _d[varKey]) || '', placeholder: componentTheme[varKey] }))
-                                                        ];
-                                                    })
-                                                }));
-                                            }
+                                                                }, value: ((_d = (_c = this
+                                                                    .tempOverrides) === null || _c === void 0 ? void 0 : _c[themeKey]) === null || _d === void 0 ? void 0 : _d[varKey]) || '', placeholder: componentTheme[varKey] }))));
+                                                    }
+                                                })))
+                                            }))
                                         }));
                                     });
                                     if (!filteredItemsCount)

package/lib/tree/src/styles/index.cssr.js

@@ -54,8 +54,8 @@ exports.default = (0, cssr_1.cB)('tree', `
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('clickable', [(0, cssr_1.cB)('tree-node-content', `
  cursor: pointer;
  `)])])]), (0, cssr_1.cM)('block-node', [(0, cssr_1.cB)('tree-node-content', `
- flex-grow: 1;
- flex-shrink: 0;
+ flex: 1;
+ min-width: 0;
  `)]), (0, cssr_1.cNotM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:hover', {
   backgroundColor: 'var(--n-node-color-hover)'
 })]), (0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:active', {
@@ -140,7 +140,8 @@ exports.default = (0, cssr_1.cB)('tree', `
  `), (0, cssr_1.cE)('text', `
  border-bottom: 1px solid #0000;
  transition: border-color .3s var(--n-bezier);
- flex-grow:1;
+ flex-grow: 1;
+ max-width: 100%;
  `), (0, cssr_1.cE)('suffix', `
  display: inline-flex;
  `)]), (0, cssr_1.cE)('empty', 'margin: auto;')]);

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

@@ -95,7 +95,7 @@ export interface UploadInst {
 export declare type OnBeforeUpload = (data: {
     file: SettledFileInfo;
     fileList: SettledFileInfo[];
-}) => Promise<unknown>;
+}) => Promise<boolean | void> | boolean | void;
 export declare type ListType = 'text' | 'image' | 'image-card';
 export declare type OnPreview = (file: SettledFileInfo) => void;
 export declare type CreateThumbnailUrl = (file: File) => Promise<string>;