naive-ui 2.24.4 → 2.25.0

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

package/lib/grid/src/config.js

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

package/lib/icon/index.d.ts

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

package/lib/icon/index.js

@@ -1,9 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NIcon = void 0;
 /* istanbul ignore file */
 var Icon_1 = require("./src/Icon");
-Object.defineProperty(exports, "NIcon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
+Object.defineProperty(exports, "NIcon", { enumerable: true, get: function () { return Icon_1.NIcon; } });

package/lib/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/lib/icon/src/Icon.js

@@ -3,19 +3,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIcon = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.default = (0, vue_1.defineComponent)({
+exports.NIcon = (0, vue_1.defineComponent)({
     _n_icon__: true,
     name: 'Icon',
     inheritAttrs: false,
-    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String }),
+    props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { depth: [String, Number], size: [Number, String], color: String, component: Object }),
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Icon', 'Icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Icon', '-icon', index_cssr_1.default, styles_1.iconLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedStyle: (0, vue_1.computed)(() => {
@@ -44,7 +45,7 @@ exports.default = (0, vue_1.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__) {
             (0, _utils_1.warn)('icon', "don't wrap `n-icon` inside `n-icon`");
         }
@@ -58,6 +59,6 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             ],
             style: Object.assign(this.cssVars, this.mergedStyle)
-        }), this.$slots);
+        }), component ? (0, vue_1.h)(component) : this.$slots);
     }
 });

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

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

package/lib/icon-wrapper/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIconWrapper = void 0;
+var IconWrapper_1 = require("./src/IconWrapper");
+Object.defineProperty(exports, "NIconWrapper", { enumerable: true, get: function () { return IconWrapper_1.NIconWrapper; } });

package/lib/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;
+}>;

package/lib/icon-wrapper/src/IconWrapper.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NIconWrapper = void 0;
+const vue_1 = require("vue");
+const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
+const styles_1 = require("../styles");
+const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const iconWrapperProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: {
+        type: Number,
+        default: 24
+    }, borderRadius: {
+        type: Number,
+        default: 6
+    }, color: String, iconColor: String });
+exports.NIconWrapper = (0, vue_1.defineComponent)({
+    name: 'IconWrapper',
+    props: iconWrapperProps,
+    setup(props, { slots }) {
+        const themeRef = (0, _mixins_1.useTheme)('IconWrapper', '-icon-wrapper', index_cssr_1.default, styles_1.iconWrapperLight, props);
+        const { mergedClsPrefixRef, NConfigProvider } = (0, _mixins_1.useConfig)(props);
+        const { disableInlineTheme } = NConfigProvider || {};
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { color, iconColor } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': color,
+                '--n-icon-color': iconColor
+            };
+        });
+        const cssVarsClassRef = disableInlineTheme
+            ? (0, _mixins_1.useCssVarsClass)('icon-wrapper', undefined, cssVarsRef, props)
+            : undefined;
+        return () => {
+            const size = (0, _utils_1.formatLength)(props.size);
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefixRef.value}-icon-wrapper`,
+                    cssVarsClassRef === null || cssVarsClassRef === void 0 ? void 0 : cssVarsClassRef.value
+                ], style: [
+                    cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
+                    {
+                        height: size,
+                        width: size,
+                        borderRadius: (0, _utils_1.formatLength)(props.borderRadius),
+                        backgroundColor: props.color,
+                        color: props.iconColor
+                    }
+                ] }, slots));
+        };
+    }
+});

package/lib/icon-wrapper/src/styles/index.cssr.d.ts

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

package/lib/icon-wrapper/src/styles/index.cssr.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const cssr_1 = require("../../../_utils/cssr"); // vars:
+// --n-bezier
+// --n-border-radius
+// --n-color
+// --n-icon-color
+
+
+exports.default = (0, cssr_1.cB)('icon-wrapper', `
+ transition:
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
+ background-color: var(--n-color);
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--n-icon-color);
+`);

package/lib/icon-wrapper/styles/dark.d.ts

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

package/lib/icon-wrapper/styles/dark.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const common_1 = require("../../_styles/common");
+const light_1 = require("./light");
+const iconDark = {
+    name: 'IconWrapper',
+    common: common_1.commonDark,
+    self: light_1.self
+};
+exports.default = iconDark;

package/lib/icon-wrapper/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as iconWrapperDark } from './dark';
+export { default as iconWrapperLight } from './light';
+export type { IconWrapperTheme, IconWrapperThemeVars } from './light';

package/lib/icon-wrapper/styles/index.js

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

package/lib/icon-wrapper/styles/light.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import type { Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    color: string;
+    iconColor: string;
+};
+export declare type IconWrapperThemeVars = ReturnType<typeof self>;
+declare const iconWrapperLight: Theme<'IconWrapper', IconWrapperThemeVars>;
+export default iconWrapperLight;
+export declare type IconWrapperTheme = typeof iconWrapperLight;

package/lib/icon-wrapper/styles/light.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.self = void 0;
+const common_1 = require("../../_styles/common");
+const self = (vars) => {
+    const { primaryColor, baseColor } = vars;
+    return {
+        color: primaryColor,
+        iconColor: baseColor
+    };
+};
+exports.self = self;
+const iconWrapperLight = {
+    name: 'IconWrapper',
+    common: common_1.commonLight,
+    self: exports.self
+};
+exports.default = iconWrapperLight;

package/lib/image/src/ImagePreview.js

@@ -24,7 +24,7 @@ exports.default = (0, vue_1.defineComponent)({
             required: true
         } }),
     setup(props) {
-        const themeRef = (0, _mixins_1.useTheme)('Image', 'Image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
+        const themeRef = (0, _mixins_1.useTheme)('Image', '-image', index_cssr_1.default, styles_1.imageLight, props, (0, vue_1.toRef)(props, 'clsPrefix'));
         let thumbnailEl = null;
         const previewRef = (0, vue_1.ref)(null);
         const previewWrapperRef = (0, vue_1.ref)(null);

package/lib/input/src/Input.d.ts

@@ -1,4 +1,5 @@
 import { PropType, InputHTMLAttributes, TextareaHTMLAttributes } from 'vue';
+import type { FormValidationStatus } from '../../form/src/interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { MaybeArray } from '../../_utils';
 import type { OnUpdateValue, Size } from './interface';
@@ -69,6 +70,7 @@ declare const inputProps: {
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     /** private */
@@ -337,6 +339,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     /** private */
@@ -574,6 +577,7 @@ declare const _default: import("vue").DefineComponent<{
     placeholderStyle: import("vue").Ref<{
         top: string;
     }>;
+    mergedStatus: import("vue").ComputedRef<FormValidationStatus | undefined>;
     handleTextAreaScroll: (e: Event) => void;
     handleCompositionStart: () => void;
     handleCompositionEnd: (e: CompositionEvent) => void;
@@ -629,7 +633,7 @@ declare const _default: import("vue").DefineComponent<{
             iconColorDisabled: string;
             opacity1: string;
             opacity2: string;
-            opacity3: string;
+            opacity3: string; /** private */
             opacity4: string;
             opacity5: string;
             dividerColor: string;
@@ -884,6 +888,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
     /** private */
@@ -1093,8 +1098,8 @@ declare const _default: import("vue").DefineComponent<{
         minRows?: number | undefined;
         maxRows?: number | undefined;
     };
-    loading: boolean;
     bordered: boolean | undefined;
+    loading: boolean;
     clearable: boolean;
     defaultValue: string | [string, string] | null;
     resizable: boolean;

package/lib/input/src/Input.js

@@ -47,7 +47,7 @@ const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -67,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
             });
         }
         const { mergedClsPrefixRef, mergedBorderedRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Input', 'Input', input_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Input', '-input', input_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
         // dom refs
         const wrapperElRef = (0, vue_1.ref)(null);
         const textareaElRef = (0, vue_1.ref)(null);
@@ -84,7 +84,7 @@ exports.default = (0, vue_1.defineComponent)({
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
         // form-item
         const formItem = (0, _mixins_1.useFormItem)(props);
-        const { mergedSizeRef, mergedDisabledRef } = formItem;
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
         // states
         const focusedRef = (0, vue_1.ref)(false);
         const hoverRef = (0, vue_1.ref)(false);
@@ -335,7 +335,6 @@ exports.default = (0, vue_1.defineComponent)({
             }
             // force update to sync input's view with value
             // if not set, after input, input value won't sync with dom input value
-            ;
             vm.$forceUpdate();
         }
         function handleInputBlur(e) {
@@ -644,7 +643,7 @@ exports.default = (0, vue_1.defineComponent)({
             textareaMirrorElRef,
             textareaScrollbarInstRef, 
             // value
-            uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, 
+            uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, passwordVisible: passwordVisibleRef, mergedPlaceholder: mergedPlaceholderRef, showPlaceholder1: showPlaceholder1Ref, showPlaceholder2: showPlaceholder2Ref, mergedFocus: mergedFocusRef, isComposing: isComposingRef, activated: activatedRef, showClearButton, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, textDecorationStyle: textDecorationStyleRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, mergedShowPasswordOn: mergedShowPasswordOnRef, placeholderStyle: placeholderStyleRef, mergedStatus: mergedStatusRef, 
             // methods
             handleTextAreaScroll,
             handleCompositionStart,
@@ -724,10 +723,11 @@ exports.default = (0, vue_1.defineComponent)({
             }) });
     },
     render() {
-        var _a, _b, _c, _d;
-        const { mergedClsPrefix, $slots } = this;
+        var _a, _b, _c;
+        const { mergedClsPrefix, mergedStatus, $slots } = this;
         return ((0, vue_1.h)("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
+                mergedStatus && `${mergedClsPrefix}-input--${mergedStatus}-status`,
                 {
                     [`${mergedClsPrefix}-input--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-input--textarea`]: this.type === 'textarea',
@@ -742,7 +742,9 @@ exports.default = (0, vue_1.defineComponent)({
                 ? 0
                 : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeyDown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                $slots.affix || $slots.prefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, (_a = ($slots.affix || $slots.prefix)) === null || _a === void 0 ? void 0 : _a())) : null,
+                (0, _utils_1.resolveWrappedSlot)($slots.prefix, (children) => [
+                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, children)
+                ]),
                 this.type === 'textarea' ? ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
                     default: () => {
                         return ((0, vue_1.h)(vue_1.Fragment, null,
@@ -771,16 +773,18 @@ exports.default = (0, vue_1.defineComponent)({
                         this.showCount ||
                         this.mergedShowPasswordOn ||
                         this.loading !== undefined) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
-                    !this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
+                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })) : null,
+                    !this.internalLoadingBeforeSuffix ? (_a = $slots.suffix) === null || _a === void 0 ? void 0 : _a.call($slots) : null,
                     this.loading !== undefined ? ((0, vue_1.h)(_internal_1.NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
-                    this.internalLoadingBeforeSuffix ? (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots) : null,
-                    this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: $slots.count })) : null,
+                    this.internalLoadingBeforeSuffix ? (_b = $slots.suffix) === null || _b === void 0 ? void 0 : _b.call($slots) : null,
+                    this.showCount && this.type !== 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, {
+                        default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); }
+                    })) : null,
                     this.mergedShowPasswordOn && this.type === 'password' ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
                         default: () => this.passwordVisible ? (0, vue_1.h)(icons_1.EyeIcon, null) : (0, vue_1.h)(icons_1.EyeOffIcon, null)
                     })) : null
                 ])) : null),
-            this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, $slots.separator ? $slots.separator() : this.separator)) : null,
+            this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, (0, _utils_1.resolveSlot)($slots.separator, () => [this.separator]))) : null,
             this.pair ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
                     (0, vue_1.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
@@ -789,11 +793,11 @@ exports.default = (0, vue_1.defineComponent)({
                     this.showPlaceholder2 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[1]))) : null),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || $slots.clear ? ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: $slots.clear })) : null,
-                    (_d = $slots.suffix) === null || _d === void 0 ? void 0 : _d.call($slots)
+                    this.clearable && ((0, vue_1.h)(_internal_1.NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => { var _a; return (_a = $slots.clear) === null || _a === void 0 ? void 0 : _a.call($slots); } })),
+                    (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots)
                 ]))) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
-            this.showCount && this.type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: $slots.count })) : null));
+            this.showCount && this.type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, null, { default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); } })) : null));
     }
 });

package/lib/input/src/InputGroup.js

@@ -12,7 +12,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: inputGroupProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        (0, _mixins_1.useStyle)('InputGroup', input_group_cssr_1.default, mergedClsPrefixRef);
+        (0, _mixins_1.useStyle)('-input-group', input_group_cssr_1.default, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef
         };

package/lib/input/src/InputGroupLabel.js

@@ -20,7 +20,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: inputGroupLabelProps,
     setup(props) {
         const { mergedBorderedRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Input', 'InputGroupLabel', input_group_label_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Input', '-input-group-label', input_group_label_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedBordered: mergedBorderedRef,

package/lib/input/src/WordCount.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 exports.default = (0, vue_1.defineComponent)({
@@ -18,15 +19,15 @@ exports.default = (0, vue_1.defineComponent)({
         return () => {
             const { value: maxlength } = maxlengthRef;
             const { value: mergedValue } = mergedValueRef;
-            return ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-input-word-count` }, slots.default
-                ? slots.default({
-                    value: mergedValue === null || Array.isArray(mergedValue)
-                        ? ''
-                        : mergedValue
-                })
-                : maxlength === undefined
+            return ((0, vue_1.h)("span", { class: `${mergedClsPrefixRef.value}-input-word-count` }, (0, _utils_1.resolveSlotWithProps)(slots.default, {
+                value: mergedValue === null || Array.isArray(mergedValue)
+                    ? ''
+                    : mergedValue
+            }, () => [
+                maxlength === undefined
                     ? wordCountRef.value
-                    : `${wordCountRef.value} / ${maxlength}`));
+                    : `${wordCountRef.value} / ${maxlength}`
+            ])));
         };
     }
 });