naive-ui 2.35.0 → 2.37.0

package/lib/dynamic-tags/src/DynamicTags.js

@@ -26,7 +26,7 @@ exports.dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, _mixins
     }, defaultValue: {
         type: Array,
         default: () => []
-    }, value: Array, inputStyle: [String, Object], inputProps: Object, max: Number, tagStyle: [String, Object], renderTag: Function, onCreate: {
+    }, value: Array, inputClass: String, inputStyle: [String, Object], inputProps: Object, max: Number, tagClass: String, tagStyle: [String, Object], renderTag: Function, onCreate: {
         type: Function,
         default: (label) => label
     }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
@@ -83,7 +83,7 @@ exports.default = (0, vue_1.defineComponent)({
             tags.splice(index, 1);
             doChange(tags);
         }
-        function handleInputKeyUp(e) {
+        function handleInputKeyDown(e) {
             switch (e.key) {
                 case 'Enter':
                     handleInputConfirm();
@@ -131,7 +131,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedValue: mergedValueRef,
             mergedDisabled: mergedDisabledRef,
             triggerDisabled: triggerDisabledRef,
-            handleInputKeyUp,
+            handleInputKeyDown,
             handleAddClick,
             handleInputBlur,
             handleCloseClick,
@@ -147,9 +147,9 @@ exports.default = (0, vue_1.defineComponent)({
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)(space_1.NSpace, { class: [`${mergedClsPrefix}-dynamic-tags`, this.themeClass], size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
             default: () => {
-                const { mergedTheme, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
+                const { mergedTheme, tagClass, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputClass, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyDown, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
                 return this.mergedValue
-                    .map((tag, index) => renderTag ? (renderTag(tag, index)) : ((0, vue_1.h)(tag_1.NTag, { key: index, theme: mergedTheme.peers.Tag, themeOverrides: mergedTheme.peerOverrides.Tag, style: tagStyle, type: type, round: round, size: size, color: color, closable: closable, disabled: mergedDisabled, onClose: () => {
+                    .map((tag, index) => renderTag ? (renderTag(tag, index)) : ((0, vue_1.h)(tag_1.NTag, { key: index, theme: mergedTheme.peers.Tag, themeOverrides: mergedTheme.peerOverrides.Tag, class: tagClass, style: tagStyle, type: type, round: round, size: size, color: color, closable: closable, disabled: mergedDisabled, onClose: () => {
                         handleCloseClick(index);
                     } }, {
                     default: () => (typeof tag === 'string' ? tag : tag.label)
@@ -157,9 +157,9 @@ exports.default = (0, vue_1.defineComponent)({
                     .concat(showInput ? ($slots.input ? ($slots.input({
                     submit: handleInputConfirm,
                     deactivate: handleInputBlur
-                })) : ((0, vue_1.h)(input_1.NInput, Object.assign({ placeholder: "", size: inputSize, style: inputStyle, autosize: true }, this.inputProps, { ref: "inputInstRef", value: inputValue, onUpdateValue: (v) => {
+                })) : ((0, vue_1.h)(input_1.NInput, Object.assign({ placeholder: "", size: inputSize, style: inputStyle, class: inputClass, autosize: true }, this.inputProps, { ref: "inputInstRef", value: inputValue, onUpdateValue: (v) => {
                         this.inputValue = v;
-                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused })))) : $slots.trigger ? ($slots.trigger({
+                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeydown: handleInputKeyDown, onBlur: handleInputBlur, internalForceFocus: inputForceFocused })))) : $slots.trigger ? ($slots.trigger({
                     activate: handleAddClick,
                     disabled: triggerDisabled
                 })) : ((0, vue_1.h)(button_1.NButton, { dashed: true, disabled: triggerDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: inputSize, onClick: handleAddClick }, {

package/lib/dynamic-tags/styles/light.d.ts

@@ -353,7 +353,6 @@ declare const dynamicTagsLight: import("../../_mixins").Theme<"DynamicTags", {
         closeSizeLarge: string;
         padding: string;
         closeMargin: string;
-        closeMarginRtl: string;
     }, any>;
     Space: import("../../_mixins").Theme<"Space", {
         gapSmall: string;

package/lib/equation/index.d.ts

@@ -1 +1,2 @@
 export { Equation as NEquation, equationProps } from './src/Equation';
+export type { EquationProps } from './src/Equation';

package/lib/equation/src/Equation.d.ts

@@ -1,10 +1,12 @@
 import { type PropType } from 'vue';
 import type { KatexOptions } from 'katex';
+import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const equationProps: {
     readonly value: StringConstructor;
     readonly katex: PropType<typeof import("katex")>;
     readonly katexOptions: PropType<KatexOptions>;
 };
+export type EquationProps = ExtractPublicPropTypes<typeof equationProps>;
 export declare const Equation: import("vue").DefineComponent<{
     readonly value: StringConstructor;
     readonly katex: PropType<typeof import("katex")>;

package/lib/flex/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NFlex, flexProps } from './src/Flex';
+export type { FlexProps } from './src/Flex';
+export type { FlexAlign, FlexJustify } from './src/type';

package/lib/flex/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexProps = exports.NFlex = void 0;
+var Flex_1 = require("./src/Flex");
+Object.defineProperty(exports, "NFlex", { enumerable: true, get: function () { return __importDefault(Flex_1).default; } });
+Object.defineProperty(exports, "flexProps", { enumerable: true, get: function () { return Flex_1.flexProps; } });

package/lib/flex/src/Flex.d.ts

@@ -0,0 +1,116 @@
+import { type PropType } from 'vue';
+import type { ExtractPublicPropTypes } from '../../_utils';
+export declare const flexProps: {
+    readonly align: PropType<import("csstype").Property.AlignItems>;
+    readonly justify: {
+        readonly type: PropType<import("csstype").Property.JustifyContent>;
+        readonly default: "start";
+    };
+    readonly inline: BooleanConstructor;
+    readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
+    readonly size: {
+        readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
+        readonly default: "medium";
+    };
+    readonly wrap: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+};
+export type FlexProps = ExtractPublicPropTypes<typeof flexProps>;
+declare const _default: import("vue").DefineComponent<{
+    readonly align: PropType<import("csstype").Property.AlignItems>;
+    readonly justify: {
+        readonly type: PropType<import("csstype").Property.JustifyContent>;
+        readonly default: "start";
+    };
+    readonly inline: BooleanConstructor;
+    readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
+    readonly size: {
+        readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
+        readonly default: "medium";
+    };
+    readonly wrap: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+}, {
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
+    mergedClsPrefix: import("vue").Ref<string>;
+    margin: import("vue").ComputedRef<{
+        horizontal: number;
+        vertical: number;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly align: PropType<import("csstype").Property.AlignItems>;
+    readonly justify: {
+        readonly type: PropType<import("csstype").Property.JustifyContent>;
+        readonly default: "start";
+    };
+    readonly inline: BooleanConstructor;
+    readonly vertical: BooleanConstructor;
+    readonly reverse: BooleanConstructor;
+    readonly size: {
+        readonly type: PropType<number | [number, number] | "small" | "medium" | "large">;
+        readonly default: "medium";
+    };
+    readonly wrap: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Flex", {
+        gapSmall: string;
+        gapMedium: string;
+        gapLarge: string;
+    }, any>>>;
+}>>, {
+    readonly inline: boolean;
+    readonly size: number | [number, number] | "small" | "medium" | "large";
+    readonly reverse: boolean;
+    readonly wrap: boolean;
+    readonly vertical: boolean;
+    readonly justify: import("csstype").Property.JustifyContent;
+}, {}>;
+export default _default;

package/lib/flex/src/Flex.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexProps = void 0;
+const vue_1 = require("vue");
+const seemly_1 = require("seemly");
+const use_rtl_1 = require("../../_mixins/use-rtl");
+const _utils_1 = require("../../_utils");
+const _mixins_1 = require("../../_mixins");
+const styles_1 = require("../styles");
+exports.flexProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { align: String, justify: {
+        type: String,
+        default: 'start'
+    }, inline: Boolean, vertical: Boolean, reverse: Boolean, size: {
+        type: [String, Number, Array],
+        default: 'medium'
+    }, wrap: {
+        type: Boolean,
+        default: true
+    } });
+exports.default = (0, vue_1.defineComponent)({
+    name: 'Flex',
+    props: exports.flexProps,
+    setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const themeRef = (0, _mixins_1.useTheme)('Flex', '-flex', undefined, styles_1.flexLight, props, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Flex', mergedRtlRef, mergedClsPrefixRef);
+        return {
+            rtlEnabled: rtlEnabledRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            margin: (0, vue_1.computed)(() => {
+                const { size } = props;
+                if (Array.isArray(size)) {
+                    return {
+                        horizontal: size[0],
+                        vertical: size[1]
+                    };
+                }
+                if (typeof size === 'number') {
+                    return {
+                        horizontal: size,
+                        vertical: size
+                    };
+                }
+                const { self: { [(0, _utils_1.createKey)('gap', size)]: gap } } = themeRef.value;
+                const { row, col } = (0, seemly_1.getGap)(gap);
+                return {
+                    horizontal: (0, seemly_1.depx)(col),
+                    vertical: (0, seemly_1.depx)(row)
+                };
+            })
+        };
+    },
+    render() {
+        const { vertical, reverse, align, inline, justify, margin, wrap, mergedClsPrefix, rtlEnabled } = this;
+        const children = (0, _utils_1.flatten)((0, _utils_1.getSlot)(this), false);
+        if (!children.length)
+            return null;
+        return ((0, vue_1.h)("div", { role: "none", class: [
+                `${mergedClsPrefix}-flex`,
+                rtlEnabled && `${mergedClsPrefix}-flex--rtl`
+            ], style: {
+                display: inline ? 'inline-flex' : 'flex',
+                flexDirection: (() => {
+                    if (vertical && !reverse)
+                        return 'column';
+                    if (vertical && reverse)
+                        return 'column-reverse';
+                    if (!vertical && reverse)
+                        return 'row-reverse';
+                    else
+                        return 'row';
+                })(),
+                justifyContent: justify,
+                flexWrap: !wrap || vertical ? 'nowrap' : 'wrap',
+                alignItems: align,
+                gap: `${margin.vertical}px ${margin.horizontal}px`
+            } }, children));
+    }
+});

package/lib/flex/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/flex/src/styles/rtl.cssr.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('space', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ `)]);

package/lib/flex/src/type.d.ts

@@ -0,0 +1,3 @@
+import { type Property } from 'csstype';
+export type FlexAlign = Property.AlignItems;
+export type FlexJustify = Property.JustifyContent;

package/lib/flex/src/type.js

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

package/lib/flex/styles/_common.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+export default _default;

package/lib/flex/styles/_common.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    gapSmall: '4px 8px',
+    gapMedium: '8px 12px',
+    gapLarge: '12px 16px'
+};

package/lib/flex/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { FlexTheme } from './light';
+declare const flexDark: FlexTheme;
+export default flexDark;

package/lib/flex/styles/dark.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _common_1 = __importDefault(require("./_common"));
+const flexDark = {
+    name: 'Flex',
+    self() {
+        return _common_1.default;
+    }
+};
+exports.default = flexDark;

package/lib/flex/styles/index.d.ts

@@ -0,0 +1,4 @@
+export { default as flexDark } from './dark';
+export { default as flexLight } from './light';
+export { flexRtl } from './rtl';
+export type { FlexTheme, FlexThemeVars } from './light';

package/lib/flex/styles/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexRtl = exports.flexLight = exports.flexDark = void 0;
+var dark_1 = require("./dark");
+Object.defineProperty(exports, "flexDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var light_1 = require("./light");
+Object.defineProperty(exports, "flexLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "flexRtl", { enumerable: true, get: function () { return rtl_1.flexRtl; } });

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

@@ -0,0 +1,10 @@
+import type { Theme } from '../../_mixins';
+declare const self: () => {
+    gapSmall: string;
+    gapMedium: string;
+    gapLarge: string;
+};
+export type FlexThemeVars = ReturnType<typeof self>;
+declare const flexLight: Theme<'Flex', FlexThemeVars>;
+export default flexLight;
+export type FlexTheme = typeof flexLight;

package/lib/flex/styles/light.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const _common_1 = __importDefault(require("./_common"));
+const self = () => {
+    return _common_1.default;
+};
+const flexLight = {
+    name: 'Flex',
+    self
+};
+exports.default = flexLight;

package/lib/flex/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import { type RtlItem } from '../../config-provider/src/internal-interface';
+export declare const flexRtl: RtlItem;

package/lib/flex/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flexRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.flexRtl = {
+    name: 'Flex',
+    style: rtl_cssr_1.default
+};

package/lib/form/src/Form.js

@@ -70,19 +70,22 @@ exports.default = (0, vue_1.defineComponent)({
                         }
                     }
                     void Promise.all(formItemValidationPromises).then((results) => {
-                        if (results.some((result) => !result.valid)) {
-                            const errors = results
-                                .filter((result) => result.errors)
-                                .map((result) => result.errors);
-                            if (validateCallback) {
-                                validateCallback(errors);
-                            }
-                            reject(errors);
+                        const formInvalid = results.some((result) => !result.valid);
+                        const errors = results
+                            .filter((result) => { var _a; return (_a = result.errors) === null || _a === void 0 ? void 0 : _a.length; })
+                            .map((result) => result.errors);
+                        const warnings = results
+                            .filter((result) => { var _a; return (_a = result.warnings) === null || _a === void 0 ? void 0 : _a.length; })
+                            .map((result) => result.warnings);
+                        if (validateCallback) {
+                            validateCallback((errors === null || errors === void 0 ? void 0 : errors.length) ? errors : undefined, {
+                                warnings: (warnings === null || warnings === void 0 ? void 0 : warnings.length)
+                                    ? warnings
+                                    : undefined
+                            });
                         }
                         else {
-                            if (validateCallback)
-                                validateCallback();
-                            resolve();
+                            formInvalid ? reject(errors) : resolve();
                         }
                     });
                 });

package/lib/form/src/FormItem.d.ts

@@ -282,7 +282,8 @@ declare const _default: import("vue").DefineComponent<{
     internalValidate: FormItemInternalValidate;
     mergedSize: import("vue").ComputedRef<import("./interface").Size>;
     validationErrored: import("vue").Ref<boolean>;
-    mergedLabelStyle: import("vue").ComputedRef<(import("vue").StyleValue | undefined)[]>;
+    validationWarned: import("vue").Ref<boolean>;
+    mergedLabelStyle: import("vue").ComputedRef<import("vue").StyleValue[]>;
     mergedLabelPlacement: import("vue").ComputedRef<LabelPlacement>;
     mergedLabelAlign: import("vue").ComputedRef<LabelAlign | undefined>;
     mergedShowRequireMark: import("vue").ComputedRef<boolean | undefined>;

package/lib/form/src/FormItem.js

@@ -78,7 +78,7 @@ exports.default = (0, vue_1.defineComponent)({
         const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
         const formItemSizeRefs = (0, utils_1.formItemSize)(props);
         const formItemMiscRefs = (0, utils_1.formItemMisc)(props);
-        const { validationErrored: validationErroredRef } = formItemMiscRefs;
+        const { validationErrored: validationErroredRef, validationWarned: validationWarnedRef } = formItemMiscRefs;
         const { mergedRequired: mergedRequiredRef, mergedRules: mergedRulesRef } = (0, utils_1.formItemRule)(props);
         const { mergedSize: mergedSizeRef } = formItemSizeRefs;
         const { mergedLabelPlacement: labelPlacementRef, mergedLabelAlign: labelTextAlignRef, mergedRequireMarkPlacement: mergedRequireMarkPlacementRef } = formItemMiscRefs;
@@ -96,6 +96,7 @@ exports.default = (0, vue_1.defineComponent)({
         function restoreValidation() {
             renderExplainsRef.value = [];
             validationErroredRef.value = false;
+            validationWarnedRef.value = false;
             if (props.feedback) {
                 feedbackIdRef.value = (0, seemly_1.createId)();
             }
@@ -130,16 +131,16 @@ exports.default = (0, vue_1.defineComponent)({
                     asyncValidatorOptions = options.options;
                 }
                 yield new Promise((resolve, reject) => {
-                    void internalValidate(trigger, shouldRuleBeApplied, asyncValidatorOptions).then(({ valid, errors }) => {
+                    void internalValidate(trigger, shouldRuleBeApplied, asyncValidatorOptions).then(({ valid, errors, warnings }) => {
                         if (valid) {
                             if (validateCallback) {
-                                validateCallback();
+                                validateCallback(undefined, { warnings });
                             }
                             resolve();
                         }
                         else {
                             if (validateCallback) {
-                                validateCallback(errors);
+                                validateCallback(errors, { warnings });
                             }
                             reject(errors);
                         }
@@ -190,52 +191,71 @@ exports.default = (0, vue_1.defineComponent)({
                 }
                 return shallowClonedRule;
             });
-            if (!activeRules.length) {
-                return {
-                    valid: true
-                };
-            }
+            const activeErrorRules = activeRules.filter((r) => r.level !== 'warning');
+            const activeWarningRules = activeRules.filter((r) => r.level === 'warning');
             const mergedPath = path !== null && path !== void 0 ? path : '__n_no_path__';
-            const validator = new async_validator_1.default({ [mergedPath]: activeRules });
+            const validator = new async_validator_1.default({
+                [mergedPath]: activeErrorRules
+            });
+            const warningValidator = new async_validator_1.default({
+                [mergedPath]: activeWarningRules
+            });
             const { validateMessages } = (NForm === null || NForm === void 0 ? void 0 : NForm.props) || {};
             if (validateMessages) {
                 validator.messages(validateMessages);
+                warningValidator.messages(validateMessages);
             }
-            return yield new Promise((resolve) => {
-                void validator.validate({ [mergedPath]: value }, options, (errors) => {
-                    if (errors === null || errors === void 0 ? void 0 : errors.length) {
-                        renderExplainsRef.value = errors.map((error) => {
-                            const transformedMessage = (error === null || error === void 0 ? void 0 : error.message) || '';
-                            return {
-                                key: transformedMessage,
-                                render: () => {
-                                    if (transformedMessage.startsWith('__renderMessage__')) {
-                                        return messageRenderers[transformedMessage]();
-                                    }
-                                    return transformedMessage;
-                                }
-                            };
-                        });
-                        errors.forEach((error) => {
-                            var _a;
-                            if ((_a = error.message) === null || _a === void 0 ? void 0 : _a.startsWith('__renderMessage__')) {
-                                error.message = originalMessageRendersMessage[error.message];
+            const renderMessages = (errors) => {
+                renderExplainsRef.value = errors.map((error) => {
+                    const transformedMessage = (error === null || error === void 0 ? void 0 : error.message) || '';
+                    return {
+                        key: transformedMessage,
+                        render: () => {
+                            if (transformedMessage.startsWith('__renderMessage__')) {
+                                return messageRenderers[transformedMessage]();
                             }
-                        });
-                        validationErroredRef.value = true;
-                        resolve({
-                            valid: false,
-                            errors
-                        });
-                    }
-                    else {
-                        restoreValidation();
-                        resolve({
-                            valid: true
-                        });
+                            return transformedMessage;
+                        }
+                    };
+                });
+                errors.forEach((error) => {
+                    var _a;
+                    if ((_a = error.message) === null || _a === void 0 ? void 0 : _a.startsWith('__renderMessage__')) {
+                        error.message = originalMessageRendersMessage[error.message];
                     }
                 });
-            });
+            };
+            const validationResult = {
+                valid: true,
+                errors: undefined,
+                warnings: undefined
+            };
+            if (activeErrorRules.length) {
+                const errors = yield new Promise((resolve) => {
+                    void validator.validate({ [mergedPath]: value }, options, resolve);
+                });
+                if (errors === null || errors === void 0 ? void 0 : errors.length) {
+                    validationErroredRef.value = true;
+                    validationResult.valid = false;
+                    validationResult.errors = errors;
+                    renderMessages(errors);
+                }
+            }
+            // if there are already errors, warning check can be skipped
+            if (activeWarningRules.length && !validationResult.errors) {
+                const warnings = yield new Promise((resolve) => {
+                    void warningValidator.validate({ [mergedPath]: value }, options, resolve);
+                });
+                if (warnings === null || warnings === void 0 ? void 0 : warnings.length) {
+                    renderMessages(warnings);
+                    validationWarnedRef.value = true;
+                    validationResult.warnings = warnings;
+                }
+            }
+            if (!validationResult.errors && !validationResult.warnings) {
+                restoreValidation();
+            }
+            return validationResult;
         });
         (0, vue_1.provide)(use_form_item_1.formItemInjectionKey, {
             path: (0, vue_1.toRef)(props, 'path'),

package/lib/form/src/FormItemCol.d.ts

@@ -141,7 +141,7 @@ export declare const formItemColProps: {
         readonly default: 0;
     };
 };
-export declare const formItemColPropKeys: ("label" | "push" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "labelStyle" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "pull")[];
+export declare const formItemColPropKeys: ("label" | "size" | "push" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "labelStyle" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "pull")[];
 export type FormItemColProps = ExtractPublicPropTypes<typeof formItemColProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;