naive-ui 2.24.4 → 2.25.0

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

package/es/form/src/utils.js

@@ -1,6 +1,6 @@
 import { inject, computed, ref } from 'vue';
 import { get } from 'lodash-es';
-import { formInjectionKey } from './interface';
+import { formInjectionKey } from './context';
 import { formatLength } from '../../_utils';
 export function formItemSize(props) {
     const NForm = inject(formInjectionKey, null);

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

@@ -1,7 +1,7 @@
 import { defineComponent, watchEffect, onBeforeMount, onUnmounted, inject } from 'vue';
 import { warn } from '../../_utils';
 import { commonLight } from '../../_styles/common';
-import { configProviderInjectionKey } from '../../config-provider/src/ConfigProvider';
+import { configProviderInjectionKey } from '../../config-provider/src/context';
 import { merge } from 'lodash-es';
 export default defineComponent({
     name: 'GlobalStyle',

package/es/gradient-text/src/GradientText.d.ts

@@ -9,7 +9,7 @@ declare const gradientTextProps: {
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -62,7 +62,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -111,7 +111,7 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    compatibleType: import("vue").ComputedRef<"error" | "info" | "success" | "warning" | "primary">;
+    compatibleType: import("vue").ComputedRef<"success" | "error" | "warning" | "info" | "primary">;
     styleFontSize: import("vue").ComputedRef<string | number | undefined>;
     styleBgImage: import("vue").ComputedRef<string | undefined>;
     cssVars: import("vue").ComputedRef<{
@@ -125,7 +125,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;
     readonly type: {
-        readonly type: PropType<"error" | "info" | "success" | "warning" | "primary" | "danger">;
+        readonly type: PropType<"success" | "error" | "warning" | "info" | "primary" | "danger">;
         readonly default: "primary";
     };
     readonly color: PropType<Gradient>;
@@ -173,6 +173,6 @@ declare const _default: import("vue").DefineComponent<{
         colorEndSuccess: string;
     }, any>>>;
 }>>, {
-    type: "error" | "info" | "success" | "warning" | "primary" | "danger";
+    type: "success" | "error" | "warning" | "info" | "primary" | "danger";
 }>;
 export default _default;

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

@@ -38,7 +38,7 @@ export default defineComponent({
             }
             return undefined;
         });
-        const themeRef = useTheme('GradientText', 'GradientText', style, gradientTextLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('GradientText', '-gradient-text', style, gradientTextLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compatibleType: compatibleTypeRef,

package/es/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/es/grid/src/Grid.js

@@ -4,8 +4,8 @@ import { VResizeObserver } from 'vueuc';
 import { pxfy, parseResponsivePropValue, beforeNextFrameOnce } from 'seemly';
 import { defaultBreakpoints } from '../../config-provider/src/config';
 import { useConfig } from '../../_mixins';
-import { getSlot, flatten, createInjectionKey } from '../../_utils';
-import { defaultSpan } from './GridItem';
+import { getSlot, flatten } from '../../_utils';
+import { defaultSpan, gridInjectionKey } from './config';
 const defaultCols = 24;
 const gridProps = {
     responsive: {
@@ -33,7 +33,6 @@ const gridProps = {
         default: 0
     }
 };
-export const gridInjectionKey = createInjectionKey('n-grid');
 export default defineComponent({
     name: 'Grid',
     inheritAttrs: false,

package/es/grid/src/GridItem.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, inject, getCurrentInstance } from 'vue';
 import { pxfy } from 'seemly';
-import { gridInjectionKey } from './Grid';
 import { keysOf } from '../../_utils';
+import { gridInjectionKey } from './config';
 export const defaultSpan = 1;
 export const gridItemProps = {
     span: {

package/es/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>;

package/es/grid/src/config.js

@@ -0,0 +1,3 @@
+import { createInjectionKey } from '../../_utils';
+export const defaultSpan = 1;
+export const gridInjectionKey = createInjectionKey('n-grid');

package/es/icon/index.d.ts

@@ -1 +1 @@
-export { default as NIcon } from './src/Icon';
+export { NIcon } from './src/Icon';

package/es/icon/index.js

@@ -1,2 +1,2 @@
 /* istanbul ignore file */
-export { default as NIcon } from './src/Icon';
+export { NIcon } from './src/Icon';

package/es/icon/src/Icon.d.ts

@@ -1,9 +1,10 @@
-import { PropType } from 'vue';
+import { Component, PropType } from 'vue';
 export declare type Depth = 1 | 2 | 3 | 4 | 5 | '1' | '2' | '3' | '4' | '5' | undefined;
-declare const _default: import("vue").DefineComponent<{
+export declare const NIcon: import("vue").DefineComponent<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];
     color: StringConstructor;
+    component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
     theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -47,6 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     depth: PropType<Depth>;
     size: (StringConstructor | NumberConstructor)[];
     color: StringConstructor;
+    component: PropType<Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
     theme: PropType<import("../../_mixins").Theme<"Icon", {
         color: string;
         opacity1Depth: string;
@@ -72,4 +74,3 @@ declare const _default: import("vue").DefineComponent<{
         opacity5Depth: string;
     }, any>>>;
 }>>, {}>;
-export default _default;

package/es/icon/src/Icon.js

@@ -1,16 +1,16 @@
-import { h, defineComponent, computed, mergeProps } from 'vue';
+import { computed, defineComponent, h, mergeProps } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { formatLength, warn } from '../../_utils';
 import { iconLight } from '../styles';
 import style from './styles/index.cssr';
-export default defineComponent({
+export const NIcon = defineComponent({
     _n_icon__: true,
     name: 'Icon',
     inheritAttrs: false,
-    props: Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String }),
+    props: Object.assign(Object.assign({}, useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Icon', 'Icon', style, iconLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Icon', '-icon', style, iconLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedStyle: computed(() => {
@@ -39,7 +39,7 @@ export default defineComponent({
     },
     render() {
         var _a;
-        const { $parent, depth, mergedClsPrefix } = this;
+        const { $parent, depth, mergedClsPrefix, component } = this;
         if ((_a = $parent === null || $parent === void 0 ? void 0 : $parent.$options) === null || _a === void 0 ? void 0 : _a._n_icon__) {
             warn('icon', "don't wrap `n-icon` inside `n-icon`");
         }
@@ -53,6 +53,6 @@ export default defineComponent({
                 }
             ],
             style: Object.assign(this.cssVars, this.mergedStyle)
-        }), this.$slots);
+        }), component ? h(component) : this.$slots);
     }
 });

package/es/icon-wrapper/index.d.ts

@@ -0,0 +1 @@
+export { NIconWrapper } from './src/IconWrapper';

package/es/icon-wrapper/index.js

@@ -0,0 +1 @@
+export { NIconWrapper } from './src/IconWrapper';

package/es/icon-wrapper/src/IconWrapper.d.ts

@@ -0,0 +1,50 @@
+export declare const NIconWrapper: import("vue").DefineComponent<{
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+    readonly borderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly color: StringConstructor;
+    readonly iconColor: StringConstructor;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+    readonly borderRadius: {
+        readonly type: NumberConstructor;
+        readonly default: 6;
+    };
+    readonly color: StringConstructor;
+    readonly iconColor: StringConstructor;
+    readonly theme: import("vue").PropType<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>;
+    readonly themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+    readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"IconWrapper", {
+        color: string;
+        iconColor: string;
+    }, any>>>;
+}>>, {
+    size: number;
+    borderRadius: number;
+}>;