naive-ui 2.24.7 → 2.25.0

package/es/dynamic-input/src/DynamicInput.js

@@ -1,12 +1,12 @@
 import { h, ref, toRef, isProxy, toRaw, computed, defineComponent, inject, provide, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { createId } from 'seemly';
-import { RemoveIcon, AddIcon } from '../../_internal/icons';
+import { RemoveIcon, AddIcon, ArrowDownIcon, ArrowUpIcon } from '../../_internal/icons';
+import { formItemInjectionKey } from '../../_mixins/use-form-item';
 import { NBaseIcon } from '../../_internal';
 import { NButton, NButtonGroup } from '../../button';
 import { useTheme, useLocale, useConfig } from '../../_mixins';
-import { call, warnOnce } from '../../_utils';
-import { formItemInjectionKey } from '../../_mixins/use-form-item';
+import { call, warnOnce, resolveSlotWithProps, resolveSlot } from '../../_utils';
 import { dynamicInputLight } from '../styles';
 import NDynamicInputInputPreset from './InputPreset';
 import NDynamicInputPairPreset from './PairPreset';
@@ -37,7 +37,7 @@ const dynamicInputProps = Object.assign(Object.assign({}, useTheme.props), { max
     placeholder: {
         type: String,
         default: ''
-    }, onCreate: Function, onRemove: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, showSortButton: Boolean, createButtonProps: Object, onCreate: Function, onRemove: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     // deprecated
     onClear: Function, onInput: [Function, Array] });
 export default defineComponent({
@@ -59,7 +59,7 @@ export default defineComponent({
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-        const themeRef = useTheme('DynamicInput', 'DynamicInput', style, dynamicInputLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('DynamicInput', '-dynamic-input', style, dynamicInputLight, props, mergedClsPrefixRef);
         const insertionDisabledRef = computed(() => {
             const { value: mergedValue } = mergedValueRef;
             if (Array.isArray(mergedValue)) {
@@ -164,6 +164,32 @@ export default defineComponent({
             if (onRemove)
                 onRemove(index);
         }
+        function swap(array, currentIndex, targetIndex) {
+            if (currentIndex < 0 ||
+                targetIndex < 0 ||
+                currentIndex >= array.length ||
+                targetIndex >= array.length) {
+                return;
+            }
+            if (currentIndex === targetIndex)
+                return;
+            const currentItem = array[currentIndex];
+            array[currentIndex] = array[targetIndex];
+            array[targetIndex] = currentItem;
+        }
+        function move(type, index) {
+            const { value: mergedValue } = mergedValueRef;
+            if (!Array.isArray(mergedValue))
+                return;
+            const newValue = Array.from(mergedValue);
+            if (type === 'up') {
+                swap(newValue, index, index - 1);
+            }
+            if (type === 'down') {
+                swap(newValue, index, index + 1);
+            }
+            doUpdateValue(newValue);
+        }
         provide(dynamicInputInjectionKey, {
             mergedThemeRef: themeRef,
             keyPlaceholderRef: toRef(props, 'keyPlaceholder'),
@@ -183,6 +209,7 @@ export default defineComponent({
             ensureKey,
             handleValueChange,
             remove,
+            move,
             createItem,
             mergedTheme: themeRef,
             cssVars: computed(() => {
@@ -194,28 +221,44 @@ export default defineComponent({
         };
     },
     render() {
-        const { buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, $slots, preset, itemStyle, NFormItem, ensureKey, handleValueChange, remove, createItem } = this;
-        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, { block: true, ghost: true, dashed: true, disabled: this.insertionDisabled, size: buttonSize, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }, {
-            default: () => locale.create,
-            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
+        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
+            default: () => resolveSlot($slots['create-button-default'], () => [
+                locale.create
+            ]),
+            icon: () => resolveSlot($slots['create-button-icon'], () => [
+                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) })
+            ])
         })) : (mergedValue.map((_, index) => (h("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: `${mergedClsPrefix}-dynamic-input-item`, style: itemStyle },
-            $slots.default ? ($slots.default({
+            resolveSlotWithProps($slots.default, {
                 value: mergedValue[index],
                 index
-            })) : preset === 'input' ? (h(NDynamicInputInputPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
-                    ? `${NFormItem.path.value}[${index}]`
-                    : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : preset === 'pair' ? (h(NDynamicInputPairPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
-                    ? `${NFormItem.path.value}[${index}]`
-                    : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : null,
+            }, () => {
+                return [
+                    preset === 'input' ? (h(NDynamicInputInputPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
+                            ? `${NFormItem.path.value}[${index}]`
+                            : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : preset === 'pair' ? (h(NDynamicInputPairPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
+                            ? `${NFormItem.path.value}[${index}]`
+                            : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : null
+                ];
+            }),
             h("div", { class: `${mergedClsPrefix}-dynamic-input-item__action` },
                 h(NButtonGroup, { size: buttonSize }, {
                     default: () => [
-                        !this.removeDisabled ? (h(NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
+                        h(NButton, { disabled: this.removeDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
                             icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(RemoveIcon, null) }))
-                        })) : null,
+                        }),
                         h(NButton, { disabled: this.insertionDisabled, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => createItem(index) }, {
                             icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
-                        })
+                        }),
+                        showSortButton ? (h(NButton, { disabled: index === 0, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('up', index) }, {
+                            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => h(ArrowUpIcon, null)
+                            }))
+                        })) : null,
+                        showSortButton ? (h(NButton, { disabled: index === mergedValue.length - 1, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('down', index) }, {
+                            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ArrowDownIcon, null) }))
+                        })) : null
                     ]
                 }))))))));
     }

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -1,4 +1,5 @@
 import { PropType, CSSProperties } from 'vue';
+import type { InputProps } from '../../input';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const dynamicTagsProps: {
@@ -12,18 +13,15 @@ declare const dynamicTagsProps: {
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -1053,18 +1051,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -2584,18 +2579,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -3613,11 +3605,10 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "error" | "info" | "success" | "warning" | "primary";
+    type: "default" | "success" | "error" | "warning" | "info" | "primary";
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     closable: boolean;
     defaultValue: string[];
 }>;

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

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, nextTick, toRef } from 'vue';
+import { h, defineComponent, ref, computed, nextTick, toRef, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import commonProps from '../../tag/src/common-props';
 import { AddIcon } from '../../_internal/icons';
@@ -8,7 +8,7 @@ import { NInput } from '../../input';
 import { NTag } from '../../tag';
 import { NBaseIcon } from '../../_internal';
 import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
-import { warn, call, smallerSize } from '../../_utils';
+import { call, smallerSize, warnOnce } from '../../_utils';
 import { dynamicTagsLight } from '../styles';
 import style from './styles/index.cssr';
 const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { closable: {
@@ -17,22 +17,20 @@ const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.
     }, defaultValue: {
         type: Array,
         default: () => []
-    }, value: Array, inputStyle: [String, Object], max: Number, tagStyle: [String, Object], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, value: Array, inputStyle: [String, Object], inputProps: Object, max: Number, tagStyle: [String, Object], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 export default defineComponent({
     name: 'DynamicTags',
     props: dynamicTagsProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onChange !== undefined) {
+                    warnOnce('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = useConfig(props);
         const { localeRef } = useLocale('DynamicTags');
         const formItem = useFormItem(props);
@@ -41,7 +39,7 @@ export default defineComponent({
         const showInputRef = ref(false);
         const inputForceFocusedRef = ref(true);
         const inputInstRef = ref(null);
-        const themeRef = useTheme('DynamicTags', 'DynamicTags', style, dynamicTagsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('DynamicTags', '-dynamic-tags', style, dynamicTagsLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -134,9 +132,9 @@ export default defineComponent({
                 const { mergedTheme, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
                 return this.mergedValue
                     .map((tag, index) => (h(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: () => handleCloseClick(index) }, { default: () => tag })))
-                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : (h(NInput, { ref: "inputInstRef", autosize: true, value: inputValue, onUpdateValue: (v) => {
+                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : (h(NInput, Object.assign({ placeholder: "", size: inputSize, style: inputStyle, autosize: true }, this.inputProps, { ref: "inputInstRef", value: inputValue, onUpdateValue: (v) => {
                         this.inputValue = v;
-                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, style: inputStyle, size: inputSize, placeholder: "", onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused }))) : $slots.trigger ? ($slots.trigger({
+                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused })))) : $slots.trigger ? ($slots.trigger({
                     activate: handleAddClick,
                     disabled: triggerDisabled
                 })) : (h(NButton, { dashed: true, disabled: triggerDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: inputSize, onClick: handleAddClick }, {

package/es/element/src/Element.js

@@ -12,7 +12,7 @@ export default defineComponent({
     props: elementProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Element', 'Element', undefined, elementLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Element', '-element', undefined, elementLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: computed(() => {

package/es/ellipsis/src/Ellipsis.js

@@ -19,7 +19,7 @@ export default defineComponent({
     props: ellipsisProps,
     setup(props, { slots, attrs }) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const mergedTheme = useTheme('Ellipsis', 'ellipsis', style, ellipsisLight, props, mergedClsPrefixRef);
+        const mergedTheme = useTheme('Ellipsis', '-ellipsis', style, ellipsisLight, props, mergedClsPrefixRef);
         const triggerRef = ref(null);
         const tooltipRef = ref(null);
         const expandedRef = ref(false);

package/es/empty/src/Empty.js

@@ -1,5 +1,5 @@
 import { h, defineComponent, computed, inject } from 'vue';
-import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider';
+import { configProviderInjectionKey } from '../../config-provider/src/context';
 import { EmptyIcon } from '../../_internal/icons';
 import { useConfig, useLocale, useTheme } from '../../_mixins';
 import { createKey } from '../../_utils';
@@ -21,7 +21,7 @@ export default defineComponent({
     props: emptyProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Empty', 'Empty', style, emptyLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Empty', '-empty', style, emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Empty');
         const NConfigProvider = inject(configProviderInjectionKey, null);
         const mergedDescriptionRef = computed(() => {

package/es/form/src/Form.d.ts

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { FormRules, LabelAlign, LabelPlacement, FormInst, Size } from './interface';
+import type { FormRules, LabelAlign, LabelPlacement, FormInst, Size } from './interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 declare const formProps: {
     readonly inline: BooleanConstructor;

package/es/form/src/Form.js

@@ -11,8 +11,8 @@ import { h, defineComponent, provide, ref } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { formLight } from '../styles';
 import style from './styles/form.cssr';
-import { formItemInstsInjectionKey, formInjectionKey } from './interface';
 import { keysOf } from '../../_utils';
+import { formInjectionKey, formItemInstsInjectionKey } from './context';
 const formProps = Object.assign(Object.assign({}, useTheme.props), { inline: Boolean, labelWidth: [Number, String], labelAlign: String, labelPlacement: {
         type: String,
         default: 'top'
@@ -37,7 +37,7 @@ export default defineComponent({
     props: formProps,
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        useTheme('Form', 'Form', style, formLight, props, mergedClsPrefixRef);
+        useTheme('Form', '-form', style, formLight, props, mergedClsPrefixRef);
         // from path to form-item
         const formItems = {};
         // for label-width = 'auto'

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

@@ -23,7 +23,7 @@ export declare const formItemProps: {
     readonly rule: PropType<FormItemRule | FormItemRule[]>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: PropType<"error" | "success" | "warning">;
+    readonly validationStatus: PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: PropType<boolean | undefined>;
@@ -126,7 +126,7 @@ export declare const formItemProps: {
 };
 export declare type FormItemSetupProps = ExtractPropTypes<typeof formItemProps>;
 export declare type FormItemProps = ExtractPublicPropTypes<typeof formItemProps>;
-export declare const formItemPropKeys: ("label" | "size" | "first" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps")[];
+export declare const formItemPropKeys: ("label" | "size" | "first" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "labelStyle" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps")[];
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
     readonly labelWidth: PropType<string | number>;
@@ -149,7 +149,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: PropType<FormItemRule | FormItemRule[]>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: PropType<"error" | "success" | "warning">;
+    readonly validationStatus: PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: PropType<boolean | undefined>;
@@ -278,7 +278,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedLabelAlign: import("vue").ComputedRef<LabelAlign | undefined>;
     mergedShowRequireMark: import("vue").ComputedRef<boolean | undefined>;
     mergedRequireMarkPlacement: import("vue").ComputedRef<"left" | "right" | "right-hanging">;
-    mergedValidationStatus: import("vue").ComputedRef<"error" | "success" | "warning" | undefined>;
+    mergedValidationStatus: import("vue").ComputedRef<"success" | "error" | "warning" | undefined>;
     mergedShowFeedback: import("vue").ComputedRef<boolean>;
     mergedShowLabel: import("vue").ComputedRef<boolean>;
     labelElementRef: import("vue").Ref<HTMLLabelElement | null>;
@@ -309,7 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: PropType<FormItemRule | FormItemRule[]>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: PropType<"error" | "success" | "warning">;
+    readonly validationStatus: PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: PropType<boolean | undefined>;

package/es/form/src/FormItem.js

@@ -17,8 +17,8 @@ import { warn, createKey, useInjectionInstanceCollection, keysOf } from '../../_
 import { formLight } from '../styles';
 import { formItemMisc, formItemSize, formItemRule } from './utils';
 import Feedbacks from './Feedbacks';
+import { formInjectionKey, formItemInstsInjectionKey } from './context';
 import style from './styles/form-item.cssr';
-import { formItemInstsInjectionKey, formInjectionKey } from './interface';
 export const formItemProps = Object.assign(Object.assign({}, useTheme.props), { label: String, labelWidth: [Number, String], labelStyle: [String, Object], labelAlign: String, labelPlacement: String, path: String, first: Boolean, rulePath: String, required: Boolean, showRequireMark: {
         type: Boolean,
         default: undefined
@@ -89,7 +89,7 @@ export default defineComponent({
         const mergedDisabledRef = NForm
             ? toRef(NForm.props, 'disabled')
             : ref(false);
-        const themeRef = useTheme('Form', 'FormItem', style, formLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Form', '-form-item', style, formLight, props, mergedClsPrefixRef);
         watch(toRef(props, 'path'), () => {
             if (props.ignorePathChange)
                 return;
@@ -215,6 +215,7 @@ export default defineComponent({
             path: toRef(props, 'path'),
             disabled: mergedDisabledRef,
             mergedSize: formItemSizeRefs.mergedSize,
+            mergedValidationStatus: formItemMiscRefs.mergedValidationStatus,
             restoreValidation,
             handleContentBlur,
             handleContentChange,

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

@@ -21,7 +21,7 @@ export declare const formItemColProps: {
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -138,7 +138,7 @@ export declare const formItemColProps: {
         readonly default: 0;
     };
 };
-export declare const formItemColPropKeys: ("label" | "push" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "pull")[];
+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 type FormItemColProps = ExtractPublicPropTypes<typeof formItemColProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
@@ -162,7 +162,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -309,7 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;

package/es/form/src/FormItemGridItem.d.ts

@@ -21,7 +21,7 @@ export declare const formItemGiProps: {
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -138,7 +138,7 @@ export declare const formItemGiProps: {
         readonly default: true;
     };
 };
-export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "suffix" | "labelPlacement" | "labelAlign" | "labelStyle" | "labelWidth" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "privateSpan" | "privateColStart" | "privateShow" | "privateOffset")[];
+export declare const formItemGiPropKeys: ("label" | "size" | "first" | "offset" | "span" | "required" | "path" | "theme" | "themeOverrides" | "builtinThemeOverrides" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "suffix" | "labelStyle" | "rulePath" | "rule" | "ignorePathChange" | "validationStatus" | "feedback" | "labelProps" | "privateSpan" | "privateColStart" | "privateShow" | "privateOffset")[];
 export declare type FormItemGiProps = ExtractPublicPropTypes<typeof formItemGiProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly label: StringConstructor;
@@ -162,7 +162,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -309,7 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     readonly size: import("vue").PropType<"small" | "medium" | "large">;
     readonly ignorePathChange: BooleanConstructor;
-    readonly validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    readonly validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     readonly feedback: StringConstructor;
     readonly showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -430,10 +430,10 @@ declare const _default: import("vue").DefineComponent<{
     offset: string | number;
     span: string | number;
     required: boolean;
-    suffix: boolean;
     showRequireMark: boolean | undefined;
     showFeedback: boolean | undefined;
     showLabel: boolean | undefined;
+    suffix: boolean;
     ignorePathChange: boolean;
     privateShow: boolean;
 }>;

package/es/form/src/FormItemRow.d.ts

@@ -21,7 +21,7 @@ declare const formItemRowProps: {
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -167,7 +167,7 @@ declare const _default: import("vue").DefineComponent<{
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;
@@ -320,7 +320,7 @@ declare const _default: import("vue").DefineComponent<{
     rule: import("vue").PropType<import("./interface").FormItemRule | import("./interface").FormItemRule[]>;
     size: import("vue").PropType<"small" | "medium" | "large">;
     ignorePathChange: BooleanConstructor;
-    validationStatus: import("vue").PropType<"error" | "success" | "warning">;
+    validationStatus: import("vue").PropType<"success" | "error" | "warning">;
     feedback: StringConstructor;
     showLabel: {
         readonly type: import("vue").PropType<boolean | undefined>;

package/es/form/src/context.d.ts

@@ -0,0 +1,3 @@
+import type { FormInjection } from './interface';
+export declare const formInjectionKey: import("vue").InjectionKey<FormInjection>;
+export declare const formItemInstsInjectionKey: import("vue").InjectionKey<unknown>;

package/es/form/src/context.js

@@ -0,0 +1,3 @@
+import { createInjectionKey } from '../../_utils';
+export const formInjectionKey = createInjectionKey('n-form');
+export const formItemInstsInjectionKey = createInjectionKey('n-form-item-insts');

package/es/form/src/interface.d.ts

@@ -4,7 +4,8 @@ import { FormSetupProps } from './Form';
 export interface FormRules {
     [path: string]: FormRules | FormItemRule | FormItemRule[];
 }
-export declare type FormItemRuleValidatorParams = Parameters<NonNullable<RuleItem['validator']>>;
+declare type SetRule<T, R> = T extends (rule: any, ...args: infer K) => infer P ? (rule: R, ...args: K) => P : never;
+export declare type FormItemRuleValidatorParams = Parameters<SetRule<NonNullable<RuleItem['validator']>, FormItemRule>>;
 export declare type FormItemRuleValidator = (...args: FormItemRuleValidatorParams) => boolean | Error | Error[] | Promise<void> | undefined;
 export declare type FormItemRuleAsyncValidator = (...args: FormItemRuleValidatorParams) => Promise<void> | undefined;
 export declare type FormItemRule = Omit<RuleItem, 'validator' | 'asyncValidator'> & {
@@ -37,8 +38,6 @@ export interface FormInjection {
     maxChildLabelWidthRef: Ref<number | undefined>;
     deriveMaxChildLabelWidth: (currentWidth: number) => void;
 }
-export declare const formInjectionKey: import("vue").InjectionKey<FormInjection>;
-export declare const formItemInstsInjectionKey: import("vue").InjectionKey<unknown>;
 export declare type LabelAlign = 'left' | 'center' | 'right';
 export declare type LabelPlacement = 'left' | 'top';
 export declare type Size = 'small' | 'medium' | 'large';
@@ -52,3 +51,5 @@ export interface FormInst {
     validate: FormValidate;
     restoreValidation: () => void;
 }
+export declare type FormValidationStatus = 'success' | 'error' | 'warning';
+export {};

package/es/form/src/interface.js

@@ -1,3 +1 @@
-import { createInjectionKey } from '../../_utils';
-export const formInjectionKey = createInjectionKey('n-form');
-export const formItemInstsInjectionKey = createInjectionKey('n-form-item-insts');
+export {};

package/es/form/src/styles/form-item.cssr.js

@@ -1,5 +1,5 @@
-import { cB, cE, cM } from '../../../_utils/cssr';
-import fadeDownTranstion from '../../../_styles/transitions/fade-down.cssr'; // vars:
+import { cB, cE, cM, c } from '../../../_utils/cssr';
+import fadeDownTransition from '../../../_styles/transitions/fade-down.cssr'; // vars:
 // --n-line-height
 // --n-blank-height
 // --n-feedback-padding
@@ -77,17 +77,18 @@ export default cB('form-item', {
  box-sizing: border-box;
  min-height: var(--n-feedback-height);
  font-size: var(--n-feedback-font-size);
- padding: var(--n-feedback-padding);
  line-height: 1.25;
  transform-origin: top left;
- `, [cB('form-item-feedback', {
+ `, [c('&:not(:empty)', `
+ padding: var(--n-feedback-padding);
+ `), cB('form-item-feedback', {
   transition: 'color .3s var(--n-bezier)',
   color: 'var(--n-feedback-text-color)'
 }, [cM('warning', {
   color: 'var(--n-feedback-text-color-warning)'
 }), cM('error', {
   color: 'var(--n-feedback-text-color-error)'
-}), fadeDownTranstion({
+}), fadeDownTransition({
   fromOffset: '-3px',
   enterDuration: '.3s',
   leaveDuration: '.2s'

package/es/form/src/utils.d.ts

@@ -11,7 +11,7 @@ export declare function formItemMisc(props: FormItemSetupProps): {
     mergedLabelAlign: ComputedRef<import("./interface").LabelAlign | undefined>;
     mergedShowRequireMark: ComputedRef<boolean | undefined>;
     mergedRequireMarkPlacement: ComputedRef<"left" | "right" | "right-hanging">;
-    mergedValidationStatus: ComputedRef<"error" | "success" | "warning" | undefined>;
+    mergedValidationStatus: ComputedRef<"success" | "error" | "warning" | undefined>;
     mergedShowFeedback: ComputedRef<boolean>;
     mergedShowLabel: ComputedRef<boolean>;
 };