naive-ui 2.24.6 → 2.25.2

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

@@ -7,11 +7,11 @@ const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
+const use_form_item_1 = require("../../_mixins/use-form-item");
 const _internal_1 = require("../../_internal");
 const button_1 = require("../../button");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-const use_form_item_1 = require("../../_mixins/use-form-item");
 const styles_1 = require("../styles");
 const InputPreset_1 = __importDefault(require("./InputPreset"));
 const PairPreset_1 = __importDefault(require("./PairPreset"));
@@ -42,7 +42,7 @@ const dynamicInputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     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] });
 exports.default = (0, vue_1.defineComponent)({
@@ -64,7 +64,7 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
-        const themeRef = (0, _mixins_1.useTheme)('DynamicInput', 'DynamicInput', index_cssr_1.default, styles_1.dynamicInputLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('DynamicInput', '-dynamic-input', index_cssr_1.default, styles_1.dynamicInputLight, props, mergedClsPrefixRef);
         const insertionDisabledRef = (0, vue_1.computed)(() => {
             const { value: mergedValue } = mergedValueRef;
             if (Array.isArray(mergedValue)) {
@@ -169,6 +169,32 @@ exports.default = (0, vue_1.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);
+        }
         (0, vue_1.provide)(interface_1.dynamicInputInjectionKey, {
             mergedThemeRef: themeRef,
             keyPlaceholderRef: (0, vue_1.toRef)(props, 'keyPlaceholder'),
@@ -188,6 +214,7 @@ exports.default = (0, vue_1.defineComponent)({
             ensureKey,
             handleValueChange,
             remove,
+            move,
             createItem,
             mergedTheme: themeRef,
             cssVars: (0, vue_1.computed)(() => {
@@ -199,28 +226,44 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, $slots, preset, itemStyle, NFormItem, ensureKey, handleValueChange, remove, createItem } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.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: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) }))
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.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: () => (0, _utils_1.resolveSlot)($slots['create-button-default'], () => [
+                locale.create
+            ]),
+            icon: () => (0, _utils_1.resolveSlot)($slots['create-button-icon'], () => [
+                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) })
+            ])
         })) : (mergedValue.map((_, index) => ((0, vue_1.h)("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: `${mergedClsPrefix}-dynamic-input-item`, style: itemStyle },
-            $slots.default ? ($slots.default({
+            (0, _utils_1.resolveSlotWithProps)($slots.default, {
                 value: mergedValue[index],
                 index
-            })) : preset === 'input' ? ((0, vue_1.h)(InputPreset_1.default, { 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' ? ((0, vue_1.h)(PairPreset_1.default, { 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' ? ((0, vue_1.h)(InputPreset_1.default, { 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' ? ((0, vue_1.h)(PairPreset_1.default, { 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
+                ];
+            }),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input-item__action` },
                 (0, vue_1.h)(button_1.NButtonGroup, { size: buttonSize }, {
                     default: () => [
-                        !this.removeDisabled ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
+                        (0, vue_1.h)(button_1.NButton, { disabled: this.removeDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
                             icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.RemoveIcon, null) }))
-                        })) : null,
+                        }),
                         (0, vue_1.h)(button_1.NButton, { disabled: this.insertionDisabled, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => createItem(index) }, {
                             icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) }))
-                        })
+                        }),
+                        showSortButton ? ((0, vue_1.h)(button_1.NButton, { disabled: index === 0, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('up', index) }, {
+                            icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => (0, vue_1.h)(icons_1.ArrowUpIcon, null)
+                            }))
+                        })) : null,
+                        showSortButton ? ((0, vue_1.h)(button_1.NButton, { disabled: index === mergedValue.length - 1, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('down', index) }, {
+                            icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.ArrowDownIcon, null) }))
+                        })) : null
                     ]
                 }))))))));
     }

package/lib/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,15 +13,12 @@ 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">;
@@ -1053,15 +1051,12 @@ 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">;
@@ -2584,15 +2579,12 @@ 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">;
@@ -3617,7 +3609,6 @@ declare const _default: import("vue").DefineComponent<{
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     closable: boolean;
     defaultValue: string[];
 }>;

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

@@ -22,22 +22,20 @@ const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, _mixins_1
     }, 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') {
-                (0, _utils_1.warn)('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DynamicTags',
     props: dynamicTagsProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const { localeRef } = (0, _mixins_1.useLocale)('DynamicTags');
         const formItem = (0, _mixins_1.useFormItem)(props);
@@ -46,7 +44,7 @@ exports.default = (0, vue_1.defineComponent)({
         const showInputRef = (0, vue_1.ref)(false);
         const inputForceFocusedRef = (0, vue_1.ref)(true);
         const inputInstRef = (0, vue_1.ref)(null);
-        const themeRef = (0, _mixins_1.useTheme)('DynamicTags', 'DynamicTags', index_cssr_1.default, styles_1.dynamicTagsLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('DynamicTags', '-dynamic-tags', index_cssr_1.default, styles_1.dynamicTagsLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
@@ -139,9 +137,9 @@ exports.default = (0, vue_1.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) => ((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: () => handleCloseClick(index) }, { default: () => tag })))
-                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : ((0, vue_1.h)(input_1.NInput, { ref: "inputInstRef", autosize: true, value: inputValue, onUpdateValue: (v) => {
+                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : ((0, vue_1.h)(input_1.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
                 })) : ((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/element/src/Element.js

@@ -14,7 +14,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: elementProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Element', 'Element', undefined, styles_1.elementLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Element', '-element', undefined, styles_1.elementLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {

package/lib/ellipsis/src/Ellipsis.js

@@ -24,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: ellipsisProps,
     setup(props, { slots, attrs }) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const mergedTheme = (0, _mixins_1.useTheme)('Ellipsis', 'ellipsis', index_cssr_1.default, styles_1.ellipsisLight, props, mergedClsPrefixRef);
+        const mergedTheme = (0, _mixins_1.useTheme)('Ellipsis', '-ellipsis', index_cssr_1.default, styles_1.ellipsisLight, props, mergedClsPrefixRef);
         const triggerRef = (0, vue_1.ref)(null);
         const tooltipRef = (0, vue_1.ref)(null);
         const expandedRef = (0, vue_1.ref)(false);

package/lib/empty/src/Empty.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
-const ConfigProvider_1 = require("../../config-provider/src/ConfigProvider");
+const context_1 = require("../../config-provider/src/context");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
@@ -26,9 +26,9 @@ exports.default = (0, vue_1.defineComponent)({
     props: emptyProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Empty', 'Empty', index_cssr_1.default, styles_1.emptyLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Empty', '-empty', index_cssr_1.default, styles_1.emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = (0, _mixins_1.useLocale)('Empty');
-        const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const mergedDescriptionRef = (0, vue_1.computed)(() => {
             var _a, _b, _c;
             return ((_a = props.description) !== null && _a !== void 0 ? _a : (_c = (_b = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _b === void 0 ? void 0 : _b.Empty) === null || _c === void 0 ? void 0 : _c.description);

package/lib/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/lib/form/src/Form.js

@@ -16,8 +16,8 @@ const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const form_cssr_1 = __importDefault(require("./styles/form.cssr"));
-const interface_1 = require("./interface");
 const _utils_1 = require("../../_utils");
+const context_1 = require("./context");
 const formProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { inline: Boolean, labelWidth: [Number, String], labelAlign: String, labelPlacement: {
         type: String,
         default: 'top'
@@ -42,7 +42,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: formProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        (0, _mixins_1.useTheme)('Form', 'Form', form_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
+        (0, _mixins_1.useTheme)('Form', '-form', form_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
         // from path to form-item
         const formItems = {};
         // for label-width = 'auto'
@@ -93,12 +93,12 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        (0, vue_1.provide)(interface_1.formInjectionKey, {
+        (0, vue_1.provide)(context_1.formInjectionKey, {
             props,
             maxChildLabelWidthRef,
             deriveMaxChildLabelWidth
         });
-        (0, vue_1.provide)(interface_1.formItemInstsInjectionKey, { formItems });
+        (0, vue_1.provide)(context_1.formItemInstsInjectionKey, { formItems });
         const formExposedMethod = {
             validate,
             restoreValidation

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

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

package/lib/form/src/FormItem.js

@@ -23,8 +23,8 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const Feedbacks_1 = __importDefault(require("./Feedbacks"));
+const context_1 = require("./context");
 const form_item_cssr_1 = __importDefault(require("./styles/form-item.cssr"));
-const interface_1 = require("./interface");
 exports.formItemProps = Object.assign(Object.assign({}, _mixins_1.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
@@ -75,9 +75,9 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'FormItem',
     props: exports.formItemProps,
     setup(props) {
-        (0, _utils_1.useInjectionInstanceCollection)(interface_1.formItemInstsInjectionKey, 'formItems', (0, vue_1.toRef)(props, 'path'));
+        (0, _utils_1.useInjectionInstanceCollection)(context_1.formItemInstsInjectionKey, 'formItems', (0, vue_1.toRef)(props, 'path'));
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+        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;
@@ -95,7 +95,7 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedDisabledRef = NForm
             ? (0, vue_1.toRef)(NForm.props, 'disabled')
             : (0, vue_1.ref)(false);
-        const themeRef = (0, _mixins_1.useTheme)('Form', 'FormItem', form_item_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Form', '-form-item', form_item_cssr_1.default, styles_1.formLight, props, mergedClsPrefixRef);
         (0, vue_1.watch)((0, vue_1.toRef)(props, 'path'), () => {
             if (props.ignorePathChange)
                 return;
@@ -221,6 +221,7 @@ exports.default = (0, vue_1.defineComponent)({
             path: (0, vue_1.toRef)(props, 'path'),
             disabled: mergedDisabledRef,
             mergedSize: formItemSizeRefs.mergedSize,
+            mergedValidationStatus: formItemMiscRefs.mergedValidationStatus,
             restoreValidation,
             handleContentBlur,
             handleContentChange,

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

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

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

@@ -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" | "suffix" | "labelWidth" | "labelAlign" | "labelPlacement" | "showRequireMark" | "requireMarkPlacement" | "showFeedback" | "showLabel" | "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;

package/lib/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/lib/form/src/context.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formItemInstsInjectionKey = exports.formInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.formInjectionKey = (0, _utils_1.createInjectionKey)('n-form');
+exports.formItemInstsInjectionKey = (0, _utils_1.createInjectionKey)('n-form-item-insts');

package/lib/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/lib/form/src/interface.js

@@ -1,6 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formItemInstsInjectionKey = exports.formInjectionKey = void 0;
-const _utils_1 = require("../../_utils");
-exports.formInjectionKey = (0, _utils_1.createInjectionKey)('n-form');
-exports.formItemInstsInjectionKey = (0, _utils_1.createInjectionKey)('n-form-item-insts');

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

@@ -91,10 +91,11 @@ exports.default = (0, cssr_1.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;
- `, [(0, cssr_1.cB)('form-item-feedback', {
+ `, [(0, cssr_1.c)('&:not(:empty)', `
+ padding: var(--n-feedback-padding);
+ `), (0, cssr_1.cB)('form-item-feedback', {
   transition: 'color .3s var(--n-bezier)',
   color: 'var(--n-feedback-text-color)'
 }, [(0, cssr_1.cM)('warning', {

package/lib/form/src/utils.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formItemRule = exports.formItemMisc = exports.formItemSize = void 0;
 const vue_1 = require("vue");
 const lodash_1 = require("lodash");
-const interface_1 = require("./interface");
+const context_1 = require("./context");
 const _utils_1 = require("../../_utils");
 function formItemSize(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     return {
         mergedSize: (0, vue_1.computed)(() => {
             if (props.size !== undefined)
@@ -20,7 +20,7 @@ function formItemSize(props) {
 exports.formItemSize = formItemSize;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function formItemMisc(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     const mergedLabelWidthRef = (0, vue_1.computed)(() => {
         if (mergedLabelPlacementRef.value === 'top')
             return;
@@ -120,7 +120,7 @@ function formItemMisc(props) {
 exports.formItemMisc = formItemMisc;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function formItemRule(props) {
-    const NForm = (0, vue_1.inject)(interface_1.formInjectionKey, null);
+    const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
     const compatibleRulePathRef = (0, vue_1.computed)(() => {
         const { rulePath } = props;
         if (rulePath !== undefined)

package/lib/global-style/src/GlobalStyle.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
 const common_1 = require("../../_styles/common");
-const ConfigProvider_1 = require("../../config-provider/src/ConfigProvider");
+const context_1 = require("../../config-provider/src/context");
 const lodash_1 = require("lodash");
 exports.default = (0, vue_1.defineComponent)({
     name: 'GlobalStyle',
     setup() {
         if (typeof document === 'undefined')
             return; // TODO: inject style for SSR
-        const NConfigProvider = (0, vue_1.inject)(ConfigProvider_1.configProviderInjectionKey, null);
+        const NConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const { body } = document;
         const { style } = body;
         let styleApplied = false;

package/lib/gradient-text/src/GradientText.js

@@ -43,7 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        const themeRef = (0, _mixins_1.useTheme)('GradientText', 'GradientText', index_cssr_1.default, styles_1.gradientTextLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('GradientText', '-gradient-text', index_cssr_1.default, styles_1.gradientTextLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compatibleType: compatibleTypeRef,

package/lib/grid/src/Grid.d.ts

@@ -31,7 +31,6 @@ export interface NGridInjection {
     xGapRef: Ref<string | undefined>;
     overflowRef: Ref<boolean>;
 }
-export declare const gridInjectionKey: import("vue").InjectionKey<NGridInjection>;
 export declare type GridProps = ExtractPublicPropTypes<typeof gridProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly responsive: {

package/lib/grid/src/Grid.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.gridInjectionKey = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const vueuc_1 = require("vueuc");
@@ -8,7 +7,7 @@ const seemly_1 = require("seemly");
 const config_1 = require("../../config-provider/src/config");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-const GridItem_1 = require("./GridItem");
+const config_2 = require("./config");
 const defaultCols = 24;
 const gridProps = {
     responsive: {
@@ -36,7 +35,6 @@ const gridProps = {
         default: 0
     }
 };
-exports.gridInjectionKey = (0, _utils_1.createInjectionKey)('n-grid');
 exports.default = (0, vue_1.defineComponent)({
     name: 'Grid',
     inheritAttrs: false,
@@ -81,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return undefined;
         });
-        (0, vue_1.provide)(exports.gridInjectionKey, {
+        (0, vue_1.provide)(config_2.gridInjectionKey, {
             itemStyleRef: (0, vue_1.toRef)(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
             overflowRef
@@ -118,7 +116,7 @@ exports.default = (0, vue_1.defineComponent)({
                 if (((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.__GRID_ITEM__) !== true)
                     return;
                 const clonedChild = (0, vue_1.cloneVNode)(child);
-                const rawChildSpan = Number((_c = (0, seemly_1.parseResponsivePropValue)((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : GridItem_1.defaultSpan);
+                const rawChildSpan = Number((_c = (0, seemly_1.parseResponsivePropValue)((_b = clonedChild.props) === null || _b === void 0 ? void 0 : _b.span, responsiveQuery)) !== null && _c !== void 0 ? _c : config_2.defaultSpan);
                 if (rawChildSpan === 0)
                     return;
                 childrenAndRawSpan.push({
@@ -131,7 +129,7 @@ exports.default = (0, vue_1.defineComponent)({
             if (maybeSuffixNode === null || maybeSuffixNode === void 0 ? void 0 : maybeSuffixNode.props) {
                 const suffixPropValue = (_b = maybeSuffixNode.props) === null || _b === void 0 ? void 0 : _b.suffix;
                 if (suffixPropValue !== undefined && suffixPropValue !== false) {
-                    suffixSpan = (_d = (_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span) !== null && _d !== void 0 ? _d : GridItem_1.defaultSpan;
+                    suffixSpan = (_d = (_c = maybeSuffixNode.props) === null || _c === void 0 ? void 0 : _c.span) !== null && _d !== void 0 ? _d : config_2.defaultSpan;
                     maybeSuffixNode.props.privateSpan = suffixSpan;
                     maybeSuffixNode.props.privateColStart =
                         responsiveCols + 1 - suffixSpan;

package/lib/grid/src/GridItem.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.gridItemPropKeys = exports.gridItemProps = exports.defaultSpan = void 0;
 const vue_1 = require("vue");
 const seemly_1 = require("seemly");
-const Grid_1 = require("./Grid");
 const _utils_1 = require("../../_utils");
+const config_1 = require("./config");
 exports.defaultSpan = 1;
 exports.gridItemProps = {
     span: {
@@ -34,7 +34,7 @@ exports.default = (0, vue_1.defineComponent)({
     setup() {
         const { xGapRef, itemStyleRef, overflowRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(Grid_1.gridInjectionKey);
+         } = (0, vue_1.inject)(config_1.gridInjectionKey);
         const self = (0, vue_1.getCurrentInstance)();
         return {
             overflow: overflowRef,

package/lib/grid/src/config.d.ts

@@ -0,0 +1,3 @@
+import type { NGridInjection } from './Grid';
+export declare const defaultSpan = 1;
+export declare const gridInjectionKey: import("vue").InjectionKey<NGridInjection>;