naive-ui 2.32.0 → 2.32.2

package/es/dropdown/src/styles/index.cssr.js

@@ -64,40 +64,41 @@ export default cB('dropdown-menu', `
  right: 4px;
  transition: background-color .3s var(--n-bezier);
  border-radius: var(--n-border-radius);
- `), cNotM('disabled', [cM('pending', {
-  color: 'var(--n-option-text-color-hover)'
-}, [cE('prefix, suffix', {
-  color: 'var(--n-option-text-color-hover)'
-}), c('&::before', 'background-color: var(--n-option-color-hover);')]), cM('active', {
-  color: 'var(--n-option-text-color-active)'
-}, [cE('prefix, suffix', {
-  color: 'var(--n-option-text-color-active)'
-}), c('&::before', 'background-color: var(--n-option-color-active);')]), cM('child-active', {
-  color: 'var(--n-option-text-color-child-active)'
-}, [cE('prefix, suffix', {
-  color: 'var(--n-option-text-color-child-active)'
-})])]), cM('disabled', {
-  cursor: 'not-allowed',
-  opacity: 'var(--n-option-opacity-disabled)'
-}), cM('group', {
-  fontSize: 'calc(var(--n-font-size) - 1px)',
-  color: 'var(--n-group-header-text-color)'
-}, [cE('prefix', {
-  width: 'calc(var(--n-option-prefix-width) / 2)'
-}, [cM('show-icon', {
-  width: 'calc(var(--n-option-icon-prefix-width) / 2)'
-})])]), cE('prefix', `
+ `), cNotM('disabled', [cM('pending', `
+ color: var(--n-option-text-color-hover);
+ `, [cE('prefix, suffix', `
+ color: var(--n-option-text-color-hover);
+ `), c('&::before', 'background-color: var(--n-option-color-hover);')]), cM('active', `
+ color: var(--n-option-text-color-active);
+ `, [cE('prefix, suffix', `
+ color: var(--n-option-text-color-active);
+ `), c('&::before', 'background-color: var(--n-option-color-active);')]), cM('child-active', `
+ color: var(--n-option-text-color-child-active);
+ `, [cE('prefix, suffix', `
+ color: var(--n-option-text-color-child-active);
+ `)])]), cM('disabled', `
+ cursor: not-allowed;
+ opacity: var(--n-option-opacity-disabled);
+ `), cM('group', `
+ font-size: calc(var(--n-font-size) - 1px);
+ color: var(--n-group-header-text-color);
+ `, [cE('prefix', `
+ width: calc(var(--n-option-prefix-width) / 2);
+ `, [cM('show-icon', `
+ width: calc(var(--n-option-icon-prefix-width) / 2);
+ `)])]), cE('prefix', `
  width: var(--n-option-prefix-width);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--n-prefix-color);
  transition: color .3s var(--n-bezier);
- `, [cM('show-icon', {
-  width: 'var(--n-option-icon-prefix-width)'
-}), cB('icon', {
-  fontSize: 'var(--n-option-icon-size)'
-})]), cE('label', `
+ z-index: 1;
+ `, [cM('show-icon', `
+ width: var(--n-option-icon-prefix-width);
+ `), cB('icon', `
+ font-size: var(--n-option-icon-size);
+ `)]), cE('label', `
  white-space: nowrap;
  flex: 1;
  z-index: 1;
@@ -112,11 +113,12 @@ export default cB('dropdown-menu', `
  padding: 0 8px;
  transition: color .3s var(--n-bezier);
  color: var(--n-suffix-color);
- `, [cM('has-submenu', {
-  width: 'var(--n-option-icon-suffix-width)'
-}), cB('icon', {
-  fontSize: 'var(--n-option-icon-size)'
-})]), cB('dropdown-menu', 'pointer-events: all;')]), cB('dropdown-offset-container', `
+ z-index: 1;
+ `, [cM('has-submenu', `
+ width: var(--n-option-icon-suffix-width);
+ `), cB('icon', `
+ font-size: var(--n-option-icon-size);
+ `)]), cB('dropdown-menu', 'pointer-events: all;')]), cB('dropdown-offset-container', `
  pointer-events: none;
  position: absolute;
  left: 0;

package/es/dynamic-input/src/DynamicInput.d.ts

@@ -44,6 +44,7 @@ export declare const dynamicInputProps: {
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -313,6 +314,7 @@ export declare const dynamicInputProps: {
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -582,6 +584,7 @@ export declare const dynamicInputProps: {
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -890,6 +893,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1159,6 +1163,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1428,6 +1433,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1822,6 +1828,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2147,6 +2154,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2416,6 +2424,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2685,6 +2694,7 @@ declare const _default: import("vue").DefineComponent<{
         actionMarginRtl: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/dynamic-input/src/InputPreset.d.ts

@@ -127,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

package/es/dynamic-input/src/PairPreset.d.ts

@@ -136,6 +136,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;

package/es/dynamic-input/styles/light.d.ts

@@ -8,6 +8,7 @@ declare const dynamicInputLight: import("../../_mixins").Theme<"DynamicInput", {
     actionMarginRtl: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

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

@@ -42,6 +42,7 @@ export declare const dynamicTagsProps: {
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -404,6 +405,7 @@ export declare const dynamicTagsProps: {
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -766,6 +768,7 @@ export declare const dynamicTagsProps: {
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1166,6 +1169,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1528,6 +1532,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1890,6 +1895,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -2389,6 +2395,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -2815,6 +2822,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3177,6 +3185,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -3539,6 +3548,7 @@ declare const _default: import("vue").DefineComponent<{
         inputWidth: string;
     }, {
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/dynamic-tags/styles/light.d.ts

@@ -2,6 +2,7 @@ declare const dynamicTagsLight: import("../../_mixins").Theme<"DynamicTags", {
     inputWidth: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/es/empty/styles/light.js

@@ -5,7 +5,7 @@ export const self = (vars) => {
     return Object.assign(Object.assign({}, commonVars), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
-        fontSizeHuge, textColor: textColorDisabled, iconColor: iconColor, extraTextColor: textColor2 });
+        fontSizeHuge, textColor: textColorDisabled, iconColor, extraTextColor: textColor2 });
 };
 const emptyLight = {
     name: 'Empty',

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

@@ -2,6 +2,7 @@ import { CSSProperties, PropType, Ref } from 'vue';
 import { VResizeObserverOnResize } from 'vueuc';
 import { ExtractPublicPropTypes } from '../../_utils';
 export declare const gridProps: {
+    readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
         readonly type: PropType<"screen" | "self">;
         readonly default: "self";
@@ -31,9 +32,11 @@ export interface NGridInjection {
     itemStyleRef: Ref<CSSProperties | string | undefined>;
     xGapRef: Ref<string | undefined>;
     overflowRef: Ref<boolean>;
+    layoutShiftDisabledRef: Ref<boolean>;
 }
 export declare type GridProps = ExtractPublicPropTypes<typeof gridProps>;
 declare const _default: import("vue").DefineComponent<{
+    readonly layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
         readonly type: PropType<"screen" | "self">;
         readonly default: "self";
@@ -68,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     handleResize: import("vue").ComputedRef<VResizeObserverOnResize | undefined>;
     overflow: Ref<boolean>;
 }, 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 layoutShiftDisabled: BooleanConstructor;
     readonly responsive: {
         readonly type: PropType<"screen" | "self">;
         readonly default: "self";
@@ -95,6 +99,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly cols: string | number;
     readonly responsive: "screen" | "self";
     readonly collapsed: boolean;
+    readonly layoutShiftDisabled: boolean;
     readonly itemResponsive: boolean;
     readonly collapsedRows: number;
     readonly xGap: string | number;

package/es/grid/src/Grid.js

@@ -9,6 +9,7 @@ import { defaultSpan, gridInjectionKey } from './config';
 const defaultCols = 24;
 const SSR_ATTR_NAME = '__ssr__';
 export const gridProps = {
+    layoutShiftDisabled: Boolean,
     responsive: {
         type: [String, Boolean],
         default: 'self'
@@ -91,6 +92,7 @@ export default defineComponent({
             }
         });
         provide(gridInjectionKey, {
+            layoutShiftDisabledRef: toRef(props, 'layoutShiftDisabled'),
             isSsrRef,
             itemStyleRef: toRef(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
@@ -101,6 +103,15 @@ export default defineComponent({
             contentEl: contentElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             style: computed(() => {
+                if (props.layoutShiftDisabled) {
+                    return {
+                        width: '100%',
+                        display: 'grid',
+                        gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))`,
+                        columnGap: pxfy(props.xGap),
+                        rowGap: pxfy(props.yGap)
+                    };
+                }
                 return {
                     width: '100%',
                     display: 'grid',
@@ -117,6 +128,13 @@ export default defineComponent({
         };
     },
     render() {
+        if (this.layoutShiftDisabled) {
+            return h('div', mergeProps({
+                ref: 'contentEl',
+                class: `${this.mergedClsPrefix}-grid`,
+                style: this.style
+            }, this.$attrs), this.$slots);
+        }
         const renderContent = () => {
             var _a, _b, _c, _d, _e, _f, _g;
             this.overflow = false;

package/es/grid/src/GridItem.d.ts

@@ -41,6 +41,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     overflow: import("vue").Ref<boolean>;
     itemStyle: import("vue").Ref<string | import("vue").CSSProperties | undefined>;
+    layoutShiftDisabled: import("vue").Ref<boolean>;
+    mergedXGap: import("vue").ComputedRef<string>;
     deriveStyle: () => {
         display: string;
         gridColumn: string;

package/es/grid/src/GridItem.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, inject, getCurrentInstance } from 'vue';
+import { h, defineComponent, inject, getCurrentInstance, computed } from 'vue';
 import { pxfy } from 'seemly';
 import { keysOf } from '../../_utils';
 import { gridInjectionKey } from './config';
@@ -29,13 +29,17 @@ export default defineComponent({
     alias: ['Gi'],
     props: gridItemProps,
     setup() {
-        const { isSsrRef, xGapRef, itemStyleRef, overflowRef
+        const { isSsrRef, xGapRef, itemStyleRef, overflowRef, layoutShiftDisabledRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(gridInjectionKey);
         const self = getCurrentInstance();
         return {
             overflow: overflowRef,
             itemStyle: itemStyleRef,
+            layoutShiftDisabled: layoutShiftDisabledRef,
+            mergedXGap: computed(() => {
+                return pxfy(xGapRef.value || 0);
+            }),
             deriveStyle: () => {
                 void isSsrRef.value;
                 // Here is quite a hack, I hope there is a better way to solve it
@@ -56,6 +60,15 @@ export default defineComponent({
     },
     render() {
         var _a, _b;
+        if (this.layoutShiftDisabled) {
+            const { span, offset, mergedXGap } = this;
+            return (h("div", { style: {
+                    gridColumn: `span ${span} / span ${span}`,
+                    marginLeft: offset
+                        ? `calc((100% - (${span} - 1) * ${mergedXGap}) / ${span} * ${offset} + ${mergedXGap} * ${offset})`
+                        : ''
+                } }, this.$slots));
+        }
         return (h("div", { style: [this.itemStyle, this.deriveStyle()] }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a, { overflow: this.overflow })));
     }
 });

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

@@ -1,4 +1,4 @@
-import { PropType, InputHTMLAttributes, TextareaHTMLAttributes } from 'vue';
+import { PropType, InputHTMLAttributes, TextareaHTMLAttributes, VNodeChild } from 'vue';
 import type { FormValidationStatus } from '../../form/src/interface';
 import { ExtractPublicPropTypes } from '../../_utils';
 import type { MaybeArray } from '../../_utils';
@@ -62,6 +62,9 @@ export declare const inputProps: {
         default: undefined;
     };
     allowInput: PropType<(value: string) => boolean>;
+    renderCount: PropType<(props: {
+        value: string;
+    }) => VNodeChild>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -92,6 +95,7 @@ export declare const inputProps: {
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -152,6 +156,7 @@ export declare const inputProps: {
         clearSize: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -212,6 +217,7 @@ export declare const inputProps: {
         clearSize: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -332,6 +338,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     allowInput: PropType<(value: string) => boolean>;
+    renderCount: PropType<(props: {
+        value: string;
+    }) => VNodeChild>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -362,6 +371,7 @@ declare const _default: import("vue").DefineComponent<{
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -422,6 +432,7 @@ declare const _default: import("vue").DefineComponent<{
         clearSize: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -482,6 +493,7 @@ declare const _default: import("vue").DefineComponent<{
         clearSize: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -710,6 +722,7 @@ declare const _default: import("vue").DefineComponent<{
             name: "common";
         };
         self: {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -777,6 +790,7 @@ declare const _default: import("vue").DefineComponent<{
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-count-text-color': string;
+        '--n-count-text-color-disabled': string;
         '--n-color': string;
         '--n-font-size': string;
         '--n-border-radius': string;
@@ -891,6 +905,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     allowInput: PropType<(value: string) => boolean>;
+    renderCount: PropType<(props: {
+        value: string;
+    }) => VNodeChild>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -921,6 +938,7 @@ declare const _default: import("vue").DefineComponent<{
     /** deprecated */
     showPasswordToggle: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -981,6 +999,7 @@ declare const _default: import("vue").DefineComponent<{
         clearSize: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;
@@ -1041,6 +1060,7 @@ declare const _default: import("vue").DefineComponent<{
         clearSize: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

package/es/input/src/Input.js

@@ -3,16 +3,17 @@ import { useMergedState, useMemo } from 'vooks';
 import { getPadding } from 'seemly';
 import { VResizeObserver } from 'vueuc';
 import { off, on } from 'evtd';
+import { isSafari } from '../../_utils/env/browser';
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
 import { useRtl } from '../../_mixins/use-rtl';
 import { NBaseClear, NBaseIcon, NBaseSuffix, NScrollbar } from '../../_internal';
-import { useTheme, useLocale, useFormItem, useConfig, useThemeClass } from '../../_mixins';
+import { useTheme, useLocale, useFormItem, useConfig, useThemeClass, useStyle } from '../../_mixins';
 import { call, createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { inputLight } from '../styles';
 import { inputInjectionKey } from './interface';
 import { isEmptyInputValue, useCursor } from './utils';
 import WordCount from './WordCount';
-import style from './styles/input.cssr';
+import style, { safariStyle } from './styles/input.cssr';
 export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -43,7 +44,7 @@ export const inputProps = Object.assign(Object.assign({}, useTheme.props), { bor
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, allowInput: Function, 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], 
+    }, allowInput: Function, renderCount: Function, 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,
@@ -64,6 +65,9 @@ export default defineComponent({
         }
         const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const themeRef = useTheme('Input', '-input', style, inputLight, props, mergedClsPrefixRef);
+        if (isSafari) {
+            useStyle('-input-safari', safariStyle, mergedClsPrefixRef);
+        }
         // dom refs
         const wrapperElRef = ref(null);
         const textareaElRef = ref(null);
@@ -313,6 +317,9 @@ export default defineComponent({
         function handleInput(e, index = 0, event = 'input') {
             const targetValue = e.target.value;
             syncMirror(targetValue);
+            if (e instanceof InputEvent && !e.isComposing) {
+                isComposingRef.value = false;
+            }
             if (props.type === 'textarea') {
                 const { value: textareaScrollbarInst } = textareaScrollbarInstRef;
                 if (textareaScrollbarInst) {
@@ -447,7 +454,7 @@ export default defineComponent({
                         const { left, top, width, height } = wrapperEl.getBoundingClientRect();
                         const resizeHandleSize = 14;
                         if (left + width - resizeHandleSize < e.clientX &&
-                            e.clientY < left + width &&
+                            e.clientX < left + width &&
                             top + height - resizeHandleSize < e.clientY &&
                             e.clientY < top + height) {
                             // touching resize handle, just let it go.
@@ -673,11 +680,12 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Input', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = 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 { 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, countTextColorDisabled, 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 {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-count-text-color': countTextColor,
+                '--n-count-text-color-disabled': countTextColorDisabled,
                 '--n-color': color,
                 '--n-font-size': fontSize,
                 '--n-border-radius': borderRadius,
@@ -884,6 +892,15 @@ export default defineComponent({
                 }))) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__border` })) : null,
             this.mergedBordered ? (h("div", { class: `${mergedClsPrefix}-input__state-border` })) : null,
-            this.showCount && type === 'textarea' ? (h(WordCount, null, { default: (props) => { var _a; return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props); } })) : null));
+            this.showCount && type === 'textarea' ? (h(WordCount, null, {
+                default: (props) => {
+                    var _a;
+                    const { renderCount } = this;
+                    if (renderCount) {
+                        return renderCount(props);
+                    }
+                    return (_a = $slots.count) === null || _a === void 0 ? void 0 : _a.call($slots, props);
+                }
+            })) : null));
     }
 });