naive-ui 2.23.1 → 2.24.2

package/es/input/src/Input.js

@@ -1,9 +1,10 @@
-import { h, computed, defineComponent, nextTick, ref, toRef, onMounted, getCurrentInstance, renderSlot, watch, watchEffect, provide } from 'vue';
+import { h, computed, defineComponent, nextTick, ref, toRef, onMounted, getCurrentInstance, watch, watchEffect, provide, Fragment } from 'vue';
 import { useMergedState, useMemo } from 'vooks';
 import { getPadding } from 'seemly';
 import { VResizeObserver } from 'vueuc';
-import { NBaseClear, NBaseIcon, NBaseSuffix } from '../../_internal';
+import { off, on } from 'evtd';
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
+import { NBaseClear, NBaseIcon, NBaseSuffix, NScrollbar } from '../../_internal';
 import { useTheme, useLocale, useFormItem, useConfig } from '../../_mixins';
 import { call, createKey, warnOnce } from '../../_utils';
 import { inputLight } from '../styles';
@@ -11,7 +12,6 @@ import { inputInjectionKey } from './interface';
 import { isEmptyValue } from './utils';
 import WordCount from './WordCount';
 import style from './styles/input.cssr';
-import { off, on } from 'evtd';
 const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -47,7 +47,7 @@ const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered:
     textDecoration: [String, Array], attrSize: {
         type: Number,
         default: 20
-    }, onInputBlur: [Function, Array], onInputFocus: [Function, Array], onDeactivate: [Function, Array], onActivate: [Function, Array], onWrapperFocus: [Function, Array], onWrapperBlur: [Function, Array], internalDeactivateOnEnter: Boolean, internalForceFocus: Boolean, 
+    }, onInputBlur: [Function, Array], onInputFocus: [Function, Array], onDeactivate: [Function, Array], onActivate: [Function, Array], onWrapperFocus: [Function, Array], onWrapperBlur: [Function, Array], internalDeactivateOnEnter: Boolean, internalForceFocus: Boolean, internalLoadingBeforeSuffix: Boolean, 
     /** deprecated */
     showPasswordToggle: Boolean });
 export default defineComponent({
@@ -70,6 +70,7 @@ export default defineComponent({
         const inputMirrorElRef = ref(null);
         const inputElRef = ref(null);
         const inputEl2Ref = ref(null);
+        const textareaScrollbarInstRef = ref(null);
         // local
         const { localeRef } = useLocale('Input');
         // value
@@ -303,6 +304,12 @@ export default defineComponent({
         function handleInput(e, index = 0, event = 'input') {
             const targetValue = e.target.value;
             syncMirror(targetValue);
+            if (props.type === 'textarea') {
+                const { value: textareaScrollbarInst } = textareaScrollbarInstRef;
+                if (textareaScrollbarInst) {
+                    textareaScrollbarInst.syncUnifiedContainer();
+                }
+            }
             syncSource = targetValue;
             if (isComposingRef.value)
                 return;
@@ -426,10 +433,18 @@ export default defineComponent({
             }
         }
         function handleMouseEnter() {
+            var _a;
             hoverRef.value = true;
+            if (props.type === 'textarea') {
+                (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.handleMouseEnterWrapper();
+            }
         }
         function handleMouseLeave() {
+            var _a;
             hoverRef.value = false;
+            if (props.type === 'textarea') {
+                (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.handleMouseLeaveWrapper();
+            }
         }
         function handlePasswordToggleClick() {
             if (mergedDisabledRef.value)
@@ -561,18 +576,41 @@ export default defineComponent({
         function handleTextAreaMirrorResize() {
             updateTextAreaStyle();
         }
-        let stopWatchMergedValue = null;
+        const placeholderStyleRef = ref({
+            top: '0'
+        });
+        function handleTextAreaScroll(e) {
+            var _a;
+            const { scrollTop } = e.target;
+            placeholderStyleRef.value.top = `${-scrollTop}px`;
+            (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.syncUnifiedContainer();
+        }
+        let stopWatchMergedValue1 = null;
         watchEffect(() => {
             const { autosize, type } = props;
             if (autosize && type === 'textarea') {
-                stopWatchMergedValue = watch(mergedValueRef, (value) => {
+                stopWatchMergedValue1 = watch(mergedValueRef, (value) => {
                     if (!Array.isArray(value) && value !== syncSource) {
                         syncMirror(value);
                     }
                 });
             }
             else {
-                stopWatchMergedValue === null || stopWatchMergedValue === void 0 ? void 0 : stopWatchMergedValue();
+                stopWatchMergedValue1 === null || stopWatchMergedValue1 === void 0 ? void 0 : stopWatchMergedValue1();
+            }
+        });
+        let stopWatchMergedValue2 = null;
+        watchEffect(() => {
+            if (props.type === 'textarea') {
+                stopWatchMergedValue2 = watch(mergedValueRef, (value) => {
+                    var _a;
+                    if (!Array.isArray(value) && value !== syncSource) {
+                        (_a = textareaScrollbarInstRef.value) === null || _a === void 0 ? void 0 : _a.syncUnifiedContainer();
+                    }
+                });
+            }
+            else {
+                stopWatchMergedValue2 === null || stopWatchMergedValue2 === void 0 ? void 0 : stopWatchMergedValue2();
             }
         });
         provide(inputInjectionKey, {
@@ -598,10 +636,12 @@ export default defineComponent({
             inputMirrorElRef,
             inputEl2Ref,
             textareaElRef,
-            textareaMirrorElRef, 
+            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, 
+            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, 
             // methods
+            handleTextAreaScroll,
             handleCompositionStart,
             handleCompositionEnd,
             handleInput,
@@ -618,66 +658,69 @@ export default defineComponent({
             handlePasswordToggleClick,
             handlePasswordToggleMousedown,
             handleWrapperKeyDown,
-            handleTextAreaMirrorResize, mergedTheme: themeRef, cssVars: computed(() => {
+            handleTextAreaMirrorResize, getTextareaScrollContainer: () => {
+                return textareaElRef.value;
+            }, mergedTheme: themeRef, cssVars: computed(() => {
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { color, borderRadius, textColor, caretColor, caretColorError, caretColorWarning, textDecorationColor, border, borderDisabled, borderHover, borderFocus, placeholderColor, placeholderColorDisabled, lineHeightTextarea, colorDisabled, colorFocus, textColorDisabled, boxShadowFocus, iconSize, colorFocusWarning, boxShadowFocusWarning, borderWarning, borderFocusWarning, borderHoverWarning, colorFocusError, boxShadowFocusError, borderError, borderFocusError, borderHoverError, clearSize, clearColor, clearColorHover, clearColorPressed, iconColor, iconColorDisabled, suffixTextColor, countTextColor, iconColorHover, iconColorPressed, loadingColor, loadingColorError, loadingColorWarning, [createKey('padding', size)]: padding, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
                 const { left: paddingLeft, right: paddingRight } = getPadding(padding);
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--count-text-color': countTextColor,
-                    '--color': color,
-                    '--font-size': fontSize,
-                    '--border-radius': borderRadius,
-                    '--height': height,
-                    '--padding-left': paddingLeft,
-                    '--padding-right': paddingRight,
-                    '--text-color': textColor,
-                    '--caret-color': caretColor,
-                    '--text-decoration-color': textDecorationColor,
-                    '--border': border,
-                    '--border-disabled': borderDisabled,
-                    '--border-hover': borderHover,
-                    '--border-focus': borderFocus,
-                    '--placeholder-color': placeholderColor,
-                    '--placeholder-color-disabled': placeholderColorDisabled,
-                    '--icon-size': iconSize,
-                    '--line-height-textarea': lineHeightTextarea,
-                    '--color-disabled': colorDisabled,
-                    '--color-focus': colorFocus,
-                    '--text-color-disabled': textColorDisabled,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-count-text-color': countTextColor,
+                    '--n-color': color,
+                    '--n-font-size': fontSize,
+                    '--n-border-radius': borderRadius,
+                    '--n-height': height,
+                    '--n-padding-left': paddingLeft,
+                    '--n-padding-right': paddingRight,
+                    '--n-text-color': textColor,
+                    '--n-caret-color': caretColor,
+                    '--n-text-decoration-color': textDecorationColor,
+                    '--n-border': border,
+                    '--n-border-disabled': borderDisabled,
+                    '--n-border-hover': borderHover,
+                    '--n-border-focus': borderFocus,
+                    '--n-placeholder-color': placeholderColor,
+                    '--n-placeholder-color-disabled': placeholderColorDisabled,
+                    '--n-icon-size': iconSize,
+                    '--n-line-height-textarea': lineHeightTextarea,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-color-focus': colorFocus,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-loading-color': loadingColor,
                     // form warning
-                    '--caret-color-warning': caretColorWarning,
-                    '--color-focus-warning': colorFocusWarning,
-                    '--box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--border-warning': borderWarning,
-                    '--border-focus-warning': borderFocusWarning,
-                    '--border-hover-warning': borderHoverWarning,
-                    '--loading-color-warning': loadingColorWarning,
+                    '--n-caret-color-warning': caretColorWarning,
+                    '--n-color-focus-warning': colorFocusWarning,
+                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                    '--n-border-warning': borderWarning,
+                    '--n-border-focus-warning': borderFocusWarning,
+                    '--n-border-hover-warning': borderHoverWarning,
+                    '--n-loading-color-warning': loadingColorWarning,
                     // form error
-                    '--caret-color-error': caretColorError,
-                    '--color-focus-error': colorFocusError,
-                    '--box-shadow-focus-error': boxShadowFocusError,
-                    '--border-error': borderError,
-                    '--border-focus-error': borderFocusError,
-                    '--border-hover-error': borderHoverError,
-                    '--loading-color-error': loadingColorError,
+                    '--n-caret-color-error': caretColorError,
+                    '--n-color-focus-error': colorFocusError,
+                    '--n-box-shadow-focus-error': boxShadowFocusError,
+                    '--n-border-error': borderError,
+                    '--n-border-focus-error': borderFocusError,
+                    '--n-border-hover-error': borderHoverError,
+                    '--n-loading-color-error': loadingColorError,
                     // clear-button
-                    '--clear-color': clearColor,
-                    '--clear-size': clearSize,
-                    '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed,
-                    '--icon-color': iconColor,
-                    '--icon-color-hover': iconColorHover,
-                    '--icon-color-pressed': iconColorPressed,
-                    '--icon-color-disabled': iconColorDisabled,
-                    '--suffix-text-color': suffixTextColor
+                    '--n-clear-color': clearColor,
+                    '--n-clear-size': clearSize,
+                    '--n-clear-color-hover': clearColorHover,
+                    '--n-clear-color-pressed': clearColorPressed,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-hover': iconColorHover,
+                    '--n-icon-color-pressed': iconColorPressed,
+                    '--n-icon-color-disabled': iconColorDisabled,
+                    '--n-suffix-text-color': suffixTextColor
                 };
             }) });
     },
     render() {
-        const { mergedClsPrefix } = this;
+        var _a, _b, _c, _d;
+        const { mergedClsPrefix, $slots } = this;
         return (h("div", { ref: "wrapperElRef", class: [
                 `${mergedClsPrefix}-input`,
                 {
@@ -694,15 +737,19 @@ export default 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 },
             h("div", { class: `${mergedClsPrefix}-input-wrapper` },
-                this.$slots.affix || this.$slots.prefix ? (h("div", { class: `${mergedClsPrefix}-input__prefix` }, renderSlot(this.$slots, 'affix', undefined, () => {
-                    return [renderSlot(this.$slots, 'prefix')];
-                }))) : null,
-                this.type === 'textarea' ? (h("div", { class: `${mergedClsPrefix}-input__textarea` },
-                    h("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: `${mergedClsPrefix}-input__textarea-el`, autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, style: this.textDecorationStyle[0], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: this.handleInput, onChange: this.handleChange })),
-                    this.showPlaceholder1 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder`, key: "placeholder" }, this.mergedPlaceholder[0])) : null,
-                    this.autosize ? (h(VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
-                        default: () => (h("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
-                    })) : null)) : (h("div", { class: `${mergedClsPrefix}-input__input` },
+                $slots.affix || $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-input__prefix` }, (_a = ($slots.affix || $slots.prefix)) === null || _a === void 0 ? void 0 : _a())) : null,
+                this.type === 'textarea' ? (h(NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
+                    default: () => {
+                        return (h(Fragment, null,
+                            h("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: `${mergedClsPrefix}-input__textarea-el`, autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
+                                    ? -1
+                                    : undefined, style: this.textDecorationStyle[0], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
+                            this.showPlaceholder1 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder`, style: this.placeholderStyle, key: "placeholder" }, this.mergedPlaceholder[0])) : null,
+                            this.autosize ? (h(VResizeObserver, { onResize: this.handleTextAreaMirrorResize }, {
+                                default: () => (h("div", { ref: "textareaMirrorElRef", class: `${mergedClsPrefix}-input__textarea-mirror`, key: "mirror" }))
+                            })) : null));
+                    }
+                })) : (h("div", { class: `${mergedClsPrefix}-input__input` },
                     h("input", Object.assign({ type: this.type === 'password' &&
                             this.mergedShowPasswordOn &&
                             this.passwordVisible
@@ -714,22 +761,21 @@ export default defineComponent({
                         h("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? (h("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
                 !this.pair &&
-                    (this.$slots.suffix ||
+                    ($slots.suffix ||
                         this.clearable ||
                         this.showCount ||
                         this.mergedShowPasswordOn ||
                         this.loading !== undefined) ? (h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || this.$slots.clear ? (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => renderSlot(this.$slots, 'clear') })) : null,
-                    renderSlot(this.$slots, 'suffix'),
+                    this.clearable || $slots.clear ? (h(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.loading !== undefined ? (h(NBaseSuffix, { clsPrefix: mergedClsPrefix, loading: this.loading, showArrow: false, showClear: false, style: this.cssVars })) : null,
-                    this.showCount && this.type !== 'textarea' ? (h(WordCount, null, { default: this.$slots.count })) : null,
+                    this.internalLoadingBeforeSuffix ? (_c = $slots.suffix) === null || _c === void 0 ? void 0 : _c.call($slots) : null,
+                    this.showCount && this.type !== 'textarea' ? (h(WordCount, null, { default: $slots.count })) : null,
                     this.mergedShowPasswordOn && this.type === 'password' ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-input__eye`, onMousedown: this.handlePasswordToggleMousedown, onClick: this.handlePasswordToggleClick }, {
                         default: () => this.passwordVisible ? h(EyeIcon, null) : h(EyeOffIcon, null)
                     })) : null
                 ])) : null),
-            this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, renderSlot(this.$slots, 'separator', undefined, () => [
-                this.separator
-            ]))) : null,
+            this.pair ? (h("span", { class: `${mergedClsPrefix}-input__separator` }, $slots.separator ? $slots.separator() : this.separator)) : null,
             this.pair ? (h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 h("div", { class: `${mergedClsPrefix}-input__input` },
                     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)
@@ -738,11 +784,11 @@ export default defineComponent({
                     this.showPlaceholder2 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[1]))) : null),
                 h("div", { class: `${mergedClsPrefix}-input__suffix` }, [
-                    this.clearable || this.$slots.clear ? (h(NBaseClear, { clsPrefix: mergedClsPrefix, show: this.showClearButton, onClear: this.handleClear }, { default: () => renderSlot(this.$slots, 'clear') })) : null,
-                    renderSlot(this.$slots, 'suffix')
+                    this.clearable || $slots.clear ? (h(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)
                 ]))) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
-            this.showCount && this.type === 'textarea' ? (h(WordCount, null, { default: this.$slots.count })) : null));
+            this.showCount && this.type === 'textarea' ? (h(WordCount, null, { default: $slots.count })) : null));
     }
 });

package/es/input/src/InputGroup.d.ts

@@ -9,13 +9,9 @@ declare const _default: import("vue").DefineComponent<{
     [x: symbol]: never;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    [x: string]: unknown;
-    [x: number]: unknown;
-    [x: symbol]: unknown;
-} & {} & {
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-}>, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: never;
+    [x: number]: never;
+    [x: symbol]: never;
+}>>, {}>;
 export default _default;

package/es/input/src/InputGroupLabel.d.ts

@@ -385,25 +385,25 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--group-label-color': string;
-        '--group-label-border': string;
-        '--border-radius': string;
-        '--group-label-text-color': string;
-        '--font-size': string;
-        '--line-height': string;
-        '--height': string;
+        '--n-bezier': string;
+        '--n-group-label-color': string;
+        '--n-group-label-border': string;
+        '--n-border-radius': string;
+        '--n-group-label-text-color': string;
+        '--n-font-size': string;
+        '--n-line-height': string;
+        '--n-height': string;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly size?: unknown;
-    readonly bordered?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    size: Size;
-} & {
-    theme?: import("../../_mixins").Theme<"Input", {
+}, 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: PropType<Size>;
+        readonly default: "medium";
+    };
+    readonly bordered: {
+        readonly type: PropType<boolean | undefined>;
+        readonly default: undefined;
+    };
+    readonly theme: PropType<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -462,8 +462,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -522,8 +522,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -582,9 +582,8 @@ declare const _default: import("vue").DefineComponent<{
         paddingMedium: string;
         paddingLarge: string;
         clearSize: string;
-    }, any>> | undefined;
-    bordered?: boolean | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     size: Size;
     bordered: boolean | undefined;
 }>;

package/es/input/src/InputGroupLabel.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, renderSlot, h } from 'vue';
+import { computed, defineComponent, h } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { inputLight } from '../styles';
@@ -23,22 +23,23 @@ export default defineComponent({
                 const { size } = props;
                 const { common: { cubicBezierEaseInOut }, self: { groupLabelColor, borderRadius, groupLabelTextColor, lineHeight, groupLabelBorder, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--group-label-color': groupLabelColor,
-                    '--group-label-border': groupLabelBorder,
-                    '--border-radius': borderRadius,
-                    '--group-label-text-color': groupLabelTextColor,
-                    '--font-size': fontSize,
-                    '--line-height': lineHeight,
-                    '--height': height
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-group-label-color': groupLabelColor,
+                    '--n-group-label-border': groupLabelBorder,
+                    '--n-border-radius': borderRadius,
+                    '--n-group-label-text-color': groupLabelTextColor,
+                    '--n-font-size': fontSize,
+                    '--n-line-height': lineHeight,
+                    '--n-height': height
                 };
             })
         };
     },
     render() {
+        var _a, _b;
         const { mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-input-group-label`, style: this.cssVars },
-            renderSlot(this.$slots, 'default'),
+        return (h("div", { class: `${mergedClsPrefix}-input-group-label`, style: this.cssVars }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a),
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input-group-label__border` })) : null));
     }
 });

package/es/input/src/WordCount.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{} & {} & {}>, {}>;
+declare const _default: import("vue").DefineComponent<{}, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

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

@@ -1,4 +1,4 @@
-import { Ref, UnwrapRef, InjectionKey } from 'vue';
+import { Ref, UnwrapRef } from 'vue';
 export declare type Size = 'tiny' | 'small' | 'medium' | 'large';
 export declare type OnUpdateValue = <T extends string & [string, string]>(value: T) => void;
 export declare type OnUpdateValueImpl = (value: string | [string, string]) => void;
@@ -14,7 +14,7 @@ export interface InputWrappedRef {
     deactivate: () => void;
 }
 export declare type InputInst = UnwrapRef<InputWrappedRef>;
-export declare const inputInjectionKey: InjectionKey<{
+export declare const inputInjectionKey: import("vue").InjectionKey<{
     mergedValueRef: Ref<string | [string, string] | null>;
     maxlengthRef: Ref<number | undefined>;
     mergedClsPrefixRef: Ref<string>;

package/es/input/src/interface.js

@@ -1 +1,2 @@
-export const inputInjectionKey = Symbol('input');
+import { createInjectionKey } from '../../_utils';
+export const inputInjectionKey = createInjectionKey('n-input');

package/es/input/src/styles/input-group-label.cssr.js

@@ -1,11 +1,11 @@
 import { cB, cE } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --group-label-color
-// --border-radius
-// --group-label-text-color
-// --font-size
-// --height
-// --group-label-border
+// --n-bezier
+// --n-group-label-color
+// --n-border-radius
+// --n-group-label-text-color
+// --n-font-size
+// --n-height
+// --n-group-label-border
 
 export default cB('input-group-label', `
  position: relative;
@@ -13,16 +13,16 @@ export default cB('input-group-label', `
  box-sizing: border-box;
  padding: 0 12px;
  display: inline-block;
- border-radius: var(--border-radius);
- background-color: var(--group-label-color);
- color: var(--group-label-text-color);
- font-size: var(--font-size);
- line-height: var(--height);
- height: var(--height);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-group-label-color);
+ color: var(--n-group-label-text-color);
+ font-size: var(--n-font-size);
+ line-height: var(--n-height);
+ height: var(--n-height);
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
 `, [cE('border', `
  position: absolute;
  left: 0;
@@ -30,6 +30,6 @@ export default cB('input-group-label', `
  top: 0;
  bottom: 0;
  border-radius: inherit;
- border: var(--group-label-border);
- transition: border-color .3s var(--bezier);
+ border: var(--n-group-label-border);
+ transition: border-color .3s var(--n-bezier);
  `)]);