naive-ui 2.32.0 → 2.32.2

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

@@ -72,40 +72,41 @@ exports.default = (0, cssr_1.cB)('dropdown-menu', `
  right: 4px;
  transition: background-color .3s var(--n-bezier);
  border-radius: var(--n-border-radius);
- `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('pending', {
-  color: 'var(--n-option-text-color-hover)'
-}, [(0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--n-option-text-color-hover)'
-}), (0, cssr_1.c)('&::before', 'background-color: var(--n-option-color-hover);')]), (0, cssr_1.cM)('active', {
-  color: 'var(--n-option-text-color-active)'
-}, [(0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--n-option-text-color-active)'
-}), (0, cssr_1.c)('&::before', 'background-color: var(--n-option-color-active);')]), (0, cssr_1.cM)('child-active', {
-  color: 'var(--n-option-text-color-child-active)'
-}, [(0, cssr_1.cE)('prefix, suffix', {
-  color: 'var(--n-option-text-color-child-active)'
-})])]), (0, cssr_1.cM)('disabled', {
-  cursor: 'not-allowed',
-  opacity: 'var(--n-option-opacity-disabled)'
-}), (0, cssr_1.cM)('group', {
-  fontSize: 'calc(var(--n-font-size) - 1px)',
-  color: 'var(--n-group-header-text-color)'
-}, [(0, cssr_1.cE)('prefix', {
-  width: 'calc(var(--n-option-prefix-width) / 2)'
-}, [(0, cssr_1.cM)('show-icon', {
-  width: 'calc(var(--n-option-icon-prefix-width) / 2)'
-})])]), (0, cssr_1.cE)('prefix', `
+ `), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('pending', `
+ color: var(--n-option-text-color-hover);
+ `, [(0, cssr_1.cE)('prefix, suffix', `
+ color: var(--n-option-text-color-hover);
+ `), (0, cssr_1.c)('&::before', 'background-color: var(--n-option-color-hover);')]), (0, cssr_1.cM)('active', `
+ color: var(--n-option-text-color-active);
+ `, [(0, cssr_1.cE)('prefix, suffix', `
+ color: var(--n-option-text-color-active);
+ `), (0, cssr_1.c)('&::before', 'background-color: var(--n-option-color-active);')]), (0, cssr_1.cM)('child-active', `
+ color: var(--n-option-text-color-child-active);
+ `, [(0, cssr_1.cE)('prefix, suffix', `
+ color: var(--n-option-text-color-child-active);
+ `)])]), (0, cssr_1.cM)('disabled', `
+ cursor: not-allowed;
+ opacity: var(--n-option-opacity-disabled);
+ `), (0, cssr_1.cM)('group', `
+ font-size: calc(var(--n-font-size) - 1px);
+ color: var(--n-group-header-text-color);
+ `, [(0, cssr_1.cE)('prefix', `
+ width: calc(var(--n-option-prefix-width) / 2);
+ `, [(0, cssr_1.cM)('show-icon', `
+ width: calc(var(--n-option-icon-prefix-width) / 2);
+ `)])]), (0, cssr_1.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);
- `, [(0, cssr_1.cM)('show-icon', {
-  width: 'var(--n-option-icon-prefix-width)'
-}), (0, cssr_1.cB)('icon', {
-  fontSize: 'var(--n-option-icon-size)'
-})]), (0, cssr_1.cE)('label', `
+ z-index: 1;
+ `, [(0, cssr_1.cM)('show-icon', `
+ width: var(--n-option-icon-prefix-width);
+ `), (0, cssr_1.cB)('icon', `
+ font-size: var(--n-option-icon-size);
+ `)]), (0, cssr_1.cE)('label', `
  white-space: nowrap;
  flex: 1;
  z-index: 1;
@@ -120,11 +121,12 @@ exports.default = (0, cssr_1.cB)('dropdown-menu', `
  padding: 0 8px;
  transition: color .3s var(--n-bezier);
  color: var(--n-suffix-color);
- `, [(0, cssr_1.cM)('has-submenu', {
-  width: 'var(--n-option-icon-suffix-width)'
-}), (0, cssr_1.cB)('icon', {
-  fontSize: 'var(--n-option-icon-size)'
-})]), (0, cssr_1.cB)('dropdown-menu', 'pointer-events: all;')]), (0, cssr_1.cB)('dropdown-offset-container', `
+ z-index: 1;
+ `, [(0, cssr_1.cM)('has-submenu', `
+ width: var(--n-option-icon-suffix-width);
+ `), (0, cssr_1.cB)('icon', `
+ font-size: var(--n-option-icon-size);
+ `)]), (0, cssr_1.cB)('dropdown-menu', 'pointer-events: all;')]), (0, cssr_1.cB)('dropdown-offset-container', `
  pointer-events: none;
  position: absolute;
  left: 0;

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/empty/styles/light.js

@@ -11,7 +11,7 @@ const self = (vars) => {
     return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
-        fontSizeHuge, textColor: textColorDisabled, iconColor: iconColor, extraTextColor: textColor2 });
+        fontSizeHuge, textColor: textColorDisabled, iconColor, extraTextColor: textColor2 });
 };
 exports.self = self;
 const emptyLight = {

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

@@ -12,6 +12,7 @@ const config_2 = require("./config");
 const defaultCols = 24;
 const SSR_ATTR_NAME = '__ssr__';
 exports.gridProps = {
+    layoutShiftDisabled: Boolean,
     responsive: {
         type: [String, Boolean],
         default: 'self'
@@ -94,6 +95,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
         });
         (0, vue_1.provide)(config_2.gridInjectionKey, {
+            layoutShiftDisabledRef: (0, vue_1.toRef)(props, 'layoutShiftDisabled'),
             isSsrRef,
             itemStyleRef: (0, vue_1.toRef)(props, 'itemStyle'),
             xGapRef: responsiveXGapRef,
@@ -104,6 +106,15 @@ exports.default = (0, vue_1.defineComponent)({
             contentEl: contentElRef,
             mergedClsPrefix: mergedClsPrefixRef,
             style: (0, vue_1.computed)(() => {
+                if (props.layoutShiftDisabled) {
+                    return {
+                        width: '100%',
+                        display: 'grid',
+                        gridTemplateColumns: `repeat(${props.cols}, minmax(0, 1fr))`,
+                        columnGap: (0, seemly_1.pxfy)(props.xGap),
+                        rowGap: (0, seemly_1.pxfy)(props.yGap)
+                    };
+                }
                 return {
                     width: '100%',
                     display: 'grid',
@@ -120,6 +131,13 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
+        if (this.layoutShiftDisabled) {
+            return (0, vue_1.h)('div', (0, vue_1.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/lib/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/lib/grid/src/GridItem.js

@@ -32,13 +32,17 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['Gi'],
     props: exports.gridItemProps,
     setup() {
-        const { isSsrRef, xGapRef, itemStyleRef, overflowRef
+        const { isSsrRef, xGapRef, itemStyleRef, overflowRef, layoutShiftDisabledRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = (0, vue_1.inject)(config_1.gridInjectionKey);
         const self = (0, vue_1.getCurrentInstance)();
         return {
             overflow: overflowRef,
             itemStyle: itemStyleRef,
+            layoutShiftDisabled: layoutShiftDisabledRef,
+            mergedXGap: (0, vue_1.computed)(() => {
+                return (0, seemly_1.pxfy)(xGapRef.value || 0);
+            }),
             deriveStyle: () => {
                 void isSsrRef.value;
                 // Here is quite a hack, I hope there is a better way to solve it
@@ -59,6 +63,15 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b;
+        if (this.layoutShiftDisabled) {
+            const { span, offset, mergedXGap } = this;
+            return ((0, vue_1.h)("div", { style: {
+                    gridColumn: `span ${span} / span ${span}`,
+                    marginLeft: offset
+                        ? `calc((100% - (${span} - 1) * ${mergedXGap}) / ${span} * ${offset} + ${mergedXGap} * ${offset})`
+                        : ''
+                } }, this.$slots));
+        }
         return ((0, vue_1.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/lib/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/lib/input/src/Input.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -9,6 +32,7 @@ const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
 const evtd_1 = require("evtd");
+const browser_1 = require("../../_utils/env/browser");
 const icons_1 = require("../../_internal/icons");
 const use_rtl_1 = require("../../_mixins/use-rtl");
 const _internal_1 = require("../../_internal");
@@ -18,7 +42,7 @@ const styles_1 = require("../styles");
 const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 const WordCount_1 = __importDefault(require("./WordCount"));
-const input_cssr_1 = __importDefault(require("./styles/input.cssr"));
+const input_cssr_1 = __importStar(require("./styles/input.cssr"));
 exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -49,7 +73,7 @@ exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, 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,
@@ -70,6 +94,9 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Input', '-input', input_cssr_1.default, styles_1.inputLight, props, mergedClsPrefixRef);
+        if (browser_1.isSafari) {
+            (0, _mixins_1.useStyle)('-input-safari', input_cssr_1.safariStyle, mergedClsPrefixRef);
+        }
         // dom refs
         const wrapperElRef = (0, vue_1.ref)(null);
         const textareaElRef = (0, vue_1.ref)(null);
@@ -319,6 +346,9 @@ exports.default = (0, vue_1.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) {
@@ -453,7 +483,7 @@ exports.default = (0, vue_1.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.
@@ -679,11 +709,12 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Input', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height } } = themeRef.value;
             const { left: paddingLeft, right: paddingRight } = (0, seemly_1.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,
@@ -890,6 +921,15 @@ exports.default = (0, vue_1.defineComponent)({
                 }))) : 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 && 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.showCount && type === 'textarea' ? ((0, vue_1.h)(WordCount_1.default, 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));
     }
 });