naive-ui 2.33.4 → 2.34.0

package/lib/form/src/FormItem.js

@@ -81,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { validationErrored: validationErroredRef } = formItemMiscRefs;
         const { mergedRequired: mergedRequiredRef, mergedRules: mergedRulesRef } = (0, utils_1.formItemRule)(props);
         const { mergedSize: mergedSizeRef } = formItemSizeRefs;
-        const { mergedLabelPlacement: labelPlacementRef, mergedLabelAlign: labelTextAlignRef } = formItemMiscRefs;
+        const { mergedLabelPlacement: labelPlacementRef, mergedLabelAlign: labelTextAlignRef, mergedRequireMarkPlacement: mergedRequireMarkPlacementRef } = formItemMiscRefs;
         const renderExplainsRef = (0, vue_1.ref)([]);
         const feedbackIdRef = (0, vue_1.ref)((0, seemly_1.createId)());
         const mergedDisabledRef = NForm
@@ -296,11 +296,26 @@ exports.default = (0, vue_1.defineComponent)({
             };
             return cssVars;
         });
-        const themeClassHandle = (0, _mixins_1.useThemeClass)('form-item', (0, vue_1.computed)(() => {
-            var _a;
-            return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
-        }), cssVarsRef, props);
-        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('form-item', (0, vue_1.computed)(() => {
+                var _a;
+                return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
+            }), cssVarsRef, props)
+            : undefined;
+        const reverseColSpaceRef = (0, vue_1.computed)(() => {
+            // label placement left
+            // require-mark-placement | label align | areas (1fr auto)
+            // left                   | left        | mark text (need reverse)
+            // left                   | right       | mark text (okay)
+            // right                  | left        | mark text (okay)
+            // right                  | right       | mark text (okay)
+            // right-hanging          | left        | text mark (okay)
+            // right-hanging          | right       | text mark (okay)
+            return (labelPlacementRef.value === 'left' &&
+                mergedRequireMarkPlacementRef.value === 'left' &&
+                labelTextAlignRef.value === 'left');
+        });
+        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, feedbackId: feedbackIdRef, renderExplains: renderExplainsRef, reverseColSpace: reverseColSpaceRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
@@ -318,7 +333,9 @@ exports.default = (0, vue_1.defineComponent)({
             return ((0, vue_1.h)("label", Object.assign({}, labelProps, { class: [
                     labelProps === null || labelProps === void 0 ? void 0 : labelProps.class,
                     `${mergedClsPrefix}-form-item-label`,
-                    `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`
+                    `${mergedClsPrefix}-form-item-label--${mergedRequireMarkPlacement}-mark`,
+                    this.reverseColSpace &&
+                        `${mergedClsPrefix}-form-item-label--reverse-columns-space`
                 ], style: this.mergedLabelStyle, ref: "labelElementRef" }), mergedRequireMarkPlacement === 'left'
                 ? [markNode, textNode]
                 : [textNode, markNode]));

package/lib/form/src/styles/form-item.cssr.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
-const fade_down_cssr_1 = require("../../../_styles/transitions/fade-down.cssr"); // vars:
+const fade_down_cssr_1 = require("../../../_styles/transitions/fade-down.cssr");
+// vars:
 // --n-line-height
 // --n-blank-height
 // --n-feedback-padding
@@ -23,8 +22,6 @@ const fade_down_cssr_1 = require("../../../_styles/transitions/fade-down.cssr");
 // --n-feedback-text-color-error
 // --n-label-text-align
 // --n-label-padding
-
-
 exports.default = (0, cssr_1.cB)('form-item', `
  display: grid;
  line-height: var(--n-line-height);
@@ -68,7 +65,9 @@ exports.default = (0, cssr_1.cB)('form-item', `
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
- `, [(0, cssr_1.cM)('left-mark', `
+ `, [(0, cssr_1.cM)('reverse-columns-space', `
+ grid-template-columns: auto 1fr;
+ `), (0, cssr_1.cM)('left-mark', `
  grid-template-areas:
  "mark text"
  ". text";

package/lib/form/src/styles/form.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('form', [(0, cssr_1.cM)('inline', `
  width: 100%;
  display: inline-flex;

package/lib/gradient-text/src/styles/index.cssr.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-font-weight
 // --n-rotate
 // --n-bezier
 // --n-color-start
 // --n-color-end
-
-
 exports.default = (0, cssr_1.cB)('gradient-text', `
  display: inline-block;
  font-weight: var(--n-font-weight);

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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-bezier
 // --n-color
 // --n-opacity
-
-
 exports.default = (0, cssr_1.cB)('icon', `
  height: 1em;
  width: 1em;

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-bezier
 // --n-border-radius
 // --n-color
 // --n-icon-color
-
-
 exports.default = (0, cssr_1.cB)('icon-wrapper', `
  transition:
  color .3s var(--n-bezier),

package/lib/image/src/Image.d.ts

@@ -100,6 +100,7 @@ export declare const imageProps: {
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
@@ -212,6 +213,7 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {
@@ -236,10 +238,10 @@ declare const _default: import("vue").DefineComponent<{
         toggleShow: () => void;
     } | null>;
     imageRef: import("vue").Ref<HTMLImageElement | null>;
-    imgProps: import("vue").Ref<ImgHTMLAttributes | undefined>;
     showError: import("vue").Ref<boolean>;
     shouldStartLoading: import("vue").Ref<boolean>;
     loaded: import("vue").Ref<boolean>;
+    mergedOnClick: (e: MouseEvent) => void;
     mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -338,6 +340,7 @@ declare const _default: import("vue").DefineComponent<{
     alt: StringConstructor;
     height: PropType<string | number>;
     imgProps: PropType<ImgHTMLAttributes>;
+    previewedImgProps: PropType<ImgHTMLAttributes>;
     lazy: BooleanConstructor;
     intersectionObserverOptions: PropType<IntersectionObserverOptions>;
     objectFit: {

package/lib/image/src/Image.js

@@ -11,7 +11,7 @@ const interface_1 = require("./interface");
 const utils_1 = require("./utils");
 const ImageGroup_1 = require("./ImageGroup");
 const ImagePreview_1 = __importDefault(require("./ImagePreview"));
-exports.imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, lazy: Boolean, intersectionObserverOptions: Object, objectFit: {
+exports.imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, previewedImgProps: Object, lazy: Boolean, intersectionObserverOptions: Object, objectFit: {
         type: String,
         default: 'fill'
     }, previewSrc: String, fallbackSrc: String, width: [String, Number], src: String, previewDisabled: Boolean, loadDescription: String, onError: Function, onLoad: Function }, interface_1.imagePreviewSharedProps);
@@ -22,7 +22,6 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const imageRef = (0, vue_1.ref)(null);
         const showErrorRef = (0, vue_1.ref)(false);
-        const imgPropsRef = (0, vue_1.toRef)(props, 'imgProps');
         const previewInstRef = (0, vue_1.ref)(null);
         const imageGroupHandle = (0, vue_1.inject)(ImageGroup_1.imageGroupInjectionKey, null);
         const { mergedClsPrefixRef } = imageGroupHandle || (0, _mixins_1.useConfig)(props);
@@ -74,8 +73,15 @@ exports.default = (0, vue_1.defineComponent)({
             showErrorRef.value = false;
         });
         const loadedRef = (0, vue_1.ref)(false);
+        (0, vue_1.provide)(interface_1.imageContextKey, {
+            previewedImgPropsRef: (0, vue_1.toRef)(props, 'previewedImgProps')
+        });
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnError: (e) => {
+            imageRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnClick: (e) => {
+                var _a, _b;
+                exposedMethods.click();
+                (_b = (_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            }, mergedOnError: (e) => {
                 if (!shouldStartLoadingRef.value)
                     return;
                 showErrorRef.value = true;
@@ -94,13 +100,13 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix, imgProps = {}, loaded, $attrs, lazy } = this;
         const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
         const loadSrc = this.src || imgProps.src || '';
-        const imgNode = (0, vue_1.h)('img', Object.assign(Object.assign({}, imgProps), { class: imgProps.class, ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: is_native_lazy_load_1.isImageSupportNativeLazy
+        const imgNode = (0, vue_1.h)('img', Object.assign(Object.assign({}, imgProps), { ref: 'imageRef', width: this.width || imgProps.width, height: this.height || imgProps.height, src: is_native_lazy_load_1.isImageSupportNativeLazy
                 ? loadSrc
                 : this.showError
                     ? this.fallbackSrc
                     : this.shouldStartLoading
                         ? loadSrc
-                        : undefined, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, loading: lazy ? 'lazy' : 'eager', style: [
+                        : undefined, alt: this.alt || imgProps.alt, 'aria-label': this.alt || imgProps.alt, onClick: this.mergedOnClick, onError: this.mergedOnError, onLoad: this.mergedOnLoad, loading: lazy ? 'lazy' : 'eager', style: [
                 imgProps.style || '',
                 placeholderNode && !loaded
                     ? { height: '0', width: '0', visibility: 'hidden' }

package/lib/image/src/ImagePreview.d.ts

@@ -113,12 +113,13 @@ declare const _default: import("vue").DefineComponent<{
     show: import("vue").Ref<boolean>;
     appear: Readonly<import("vue").Ref<boolean>>;
     displayed: import("vue").Ref<boolean>;
+    previewedImgProps: import("vue").Ref<import("vue").ImgHTMLAttributes> | undefined;
     handleWheel(e: WheelEvent): void;
     handlePreviewMousedown: (e: MouseEvent) => void;
-    handlePreviewDblclick: () => void;
+    handlePreviewDblclick: (e: MouseEvent) => void;
     syncTransformOrigin: () => void;
     handleAfterLeave: () => void;
-    handleDragStart: (e: Event) => void;
+    handleDragStart: (e: DragEvent) => void;
     zoomIn: () => void;
     zoomOut: () => void;
     rotateCounterclockwise: () => void;

package/lib/image/src/ImagePreview.js

@@ -9,6 +9,7 @@ const vooks_1 = require("vooks");
 const vueuc_1 = require("vueuc");
 const evtd_1 = require("evtd");
 const seemly_1 = require("seemly");
+const lodash_1 = require("lodash");
 const icons_1 = require("../../_internal/icons");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -46,6 +47,9 @@ exports.default = (0, vue_1.defineComponent)({
         function handleKeydown(e) {
             var _a, _b;
             switch (e.key) {
+                case ' ':
+                    e.preventDefault();
+                    break;
                 case 'ArrowLeft':
                     (_a = props.onPrev) === null || _a === void 0 ? void 0 : _a.call(props);
                     break;
@@ -155,7 +159,12 @@ exports.default = (0, vue_1.defineComponent)({
             offsetY = offset.offsetY;
             derivePreviewStyle();
         }
+        const imageContext = (0, vue_1.inject)(interface_1.imageContextKey, null);
         function handlePreviewMousedown(e) {
+            var _a, _b;
+            (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onMousedown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            if (e.button !== 0)
+                return;
             const { clientX, clientY } = e;
             dragging = true;
             startX = clientX - offsetX;
@@ -168,7 +177,9 @@ exports.default = (0, vue_1.defineComponent)({
             (0, evtd_1.on)('mousemove', document, handleMouseMove);
             (0, evtd_1.on)('mouseup', document, handleMouseUp);
         }
-        function handlePreviewDblclick() {
+        function handlePreviewDblclick(e) {
+            var _a, _b;
+            (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onDblclick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             const originalImageSizeScale = getOrignalImageSizeScale();
             scale = scale === originalImageSizeScale ? 1 : originalImageSizeScale;
             derivePreviewStyle();
@@ -251,13 +262,27 @@ exports.default = (0, vue_1.defineComponent)({
             if (!preview)
                 return;
             const { style } = preview;
+            const controlledStyle = (0, vue_1.normalizeStyle)(imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef.value.style);
+            let controlledStyleString = '';
+            if (typeof controlledStyle === 'string') {
+                controlledStyleString = controlledStyle + ';';
+            }
+            else {
+                for (const key in controlledStyle) {
+                    controlledStyleString += `${(0, lodash_1.kebabCase)(key)}: ${controlledStyle[key]};`;
+                }
+            }
             const transformStyle = `transform-origin: center; transform: translateX(${offsetX}px) translateY(${offsetY}px) rotate(${rotate}deg) scale(${scale});`;
             if (dragging) {
-                style.cssText = 'cursor: grabbing; transition: none;' + transformStyle;
+                style.cssText =
+                    controlledStyleString +
+                        'cursor: grabbing; transition: none;' +
+                        transformStyle;
             }
             else {
                 style.cssText =
-                    'cursor: grab;' +
+                    controlledStyleString +
+                        'cursor: grab;' +
                         transformStyle +
                         (transition ? '' : 'transition: none;');
             }
@@ -314,7 +339,7 @@ exports.default = (0, vue_1.defineComponent)({
             ? (0, _mixins_1.useThemeClass)('image-preview', undefined, cssVarsRef, props)
             : undefined;
         return Object.assign({ previewRef,
-            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, handleWheel(e) {
+            previewWrapperRef, previewSrc: previewSrcRef, show: showRef, appear: (0, vooks_1.useIsMounted)(), displayed: displayedRef, previewedImgProps: imageContext === null || imageContext === void 0 ? void 0 : imageContext.previewedImgPropsRef, handleWheel(e) {
                 e.preventDefault();
             },
             handlePreviewMousedown,
@@ -324,6 +349,8 @@ exports.default = (0, vue_1.defineComponent)({
                 rotate = 0;
                 displayedRef.value = false;
             }, handleDragStart: (e) => {
+                var _a, _b;
+                (_b = imageContext === null || imageContext === void 0 ? void 0 : (_a = imageContext.previewedImgPropsRef.value).onDragstart) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 e.preventDefault();
             }, zoomIn,
             zoomOut,
@@ -383,8 +410,14 @@ exports.default = (0, vue_1.defineComponent)({
                             // onEnter will be called twice, I don't know why
                             // Maybe it is a bug of vue
                             onEnter: this.syncTransformOrigin, onBeforeLeave: this.syncTransformOrigin }, {
-                            default: () => (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
-                                (0, vue_1.h)("img", { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: `${clsPrefix}-image-preview`, key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart })), [[vue_1.vShow, this.show]])
+                            default: () => {
+                                const { previewedImgProps = {} } = this;
+                                return (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: `${clsPrefix}-image-preview-wrapper`, ref: "previewWrapperRef" },
+                                    (0, vue_1.h)("img", Object.assign({}, previewedImgProps, { draggable: false, onMousedown: this.handlePreviewMousedown, onDblclick: this.handlePreviewDblclick, class: [
+                                            `${clsPrefix}-image-preview`,
+                                            previewedImgProps.class
+                                        ], key: this.previewSrc, src: this.previewSrc, ref: "previewRef", onDragstart: this.handleDragStart }))), [[vue_1.vShow, this.show]]);
+                            }
                         })), [[vdirs_1.zindexable, { enabled: this.show }]]);
                 }
             })));

package/lib/image/src/interface.d.ts

@@ -1,3 +1,4 @@
+import { ImgHTMLAttributes, Ref } from 'vue';
 export interface MoveStrategy {
     moveVerticalDirection: 'verticalTop' | 'verticalBottom';
     moveHorizontalDirection: 'horizontalLeft' | 'horizontalRight';
@@ -98,3 +99,7 @@ export declare const imagePreviewSharedProps: {
         }>;
     }>>>;
 };
+export interface ImageContext {
+    previewedImgPropsRef: Ref<ImgHTMLAttributes>;
+}
+export declare const imageContextKey: import("vue").InjectionKey<ImageContext>;

package/lib/image/src/interface.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.imagePreviewSharedProps = void 0;
+exports.imageContextKey = exports.imagePreviewSharedProps = void 0;
 const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
 exports.imagePreviewSharedProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { showToolbar: { type: Boolean, default: true }, showToolbarTooltip: Boolean });
+exports.imageContextKey = (0, _utils_1.createInjectionKey)('n-image');

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

@@ -3,19 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 const fade_in_cssr_1 = require("../../../_styles/transitions/fade-in.cssr");
-
-const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr"); // vars:
+const fade_in_scale_up_cssr_1 = require("../../../_styles/transitions/fade-in-scale-up.cssr");
+// vars:
 // --n-toolbar-icon-color
 // --n-toolbar-color
 // --n-toolbar-border-radius
 // --n-toolbar-box-shadow
 // --n-bezier
-
-
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('body >', [(0, cssr_1.cB)('image-container', 'position: fixed;')]), (0, cssr_1.cB)('image-preview-container', `
  position: fixed;
  left: 0;

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

@@ -74,6 +74,7 @@ export declare const inputProps: {
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -350,6 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
@@ -917,6 +919,7 @@ declare const _default: import("vue").DefineComponent<{
     onClick: PropType<MaybeArray<(e: MouseEvent) => void>>;
     onChange: PropType<OnUpdateValue>;
     onClear: PropType<MaybeArray<(e: MouseEvent) => void>>;
+    countGraphemes: PropType<(value: string) => number>;
     status: PropType<FormValidationStatus>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;

package/lib/input/src/Input.js

@@ -73,7 +73,7 @@ exports.inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, 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], 
+    }, 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], countGraphemes: Function, status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -384,6 +384,24 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }
         function allowInput(value) {
+            const { countGraphemes, maxlength, minlength } = props;
+            if (countGraphemes) {
+                let graphemesCount;
+                if (maxlength !== undefined) {
+                    if (graphemesCount === undefined) {
+                        graphemesCount = countGraphemes(value);
+                    }
+                    if (graphemesCount > Number(maxlength))
+                        return false;
+                }
+                if (minlength !== undefined) {
+                    if (graphemesCount === undefined) {
+                        graphemesCount = countGraphemes(value);
+                    }
+                    if (graphemesCount < Number(maxlength))
+                        return false;
+                }
+            }
             const { allowInput } = props;
             if (typeof allowInput === 'function') {
                 return allowInput(value);
@@ -692,7 +710,8 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.provide)(interface_1.inputInjectionKey, {
             mergedValueRef,
             maxlengthRef,
-            mergedClsPrefixRef
+            mergedClsPrefixRef,
+            countGraphemesRef: (0, vue_1.toRef)(props, 'countGraphemes')
         });
         const exposedProps = {
             wrapperElRef,
@@ -806,7 +825,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b;
-        const { mergedClsPrefix, mergedStatus, themeClass, type, onRender } = this;
+        const { mergedClsPrefix, mergedStatus, themeClass, type, countGraphemes, onRender } = this;
         const $slots = this.$slots;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { ref: "wrapperElRef", class: [
@@ -842,7 +861,7 @@ exports.default = (0, vue_1.defineComponent)({
                             (0, vue_1.h)("textarea", Object.assign({}, this.inputProps, { ref: "textareaElRef", class: [
                                     `${mergedClsPrefix}-input__textarea-el`,
                                     (_a = this.inputProps) === null || _a === void 0 ? void 0 : _a.class
-                                ], 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
+                                ], autofocus: this.autofocus, rows: Number(this.rows), placeholder: this.placeholder, value: this.mergedValue, disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, readonly: this.readonly, tabindex: this.passivelyActivated && !this.activated
                                     ? -1
                                     : undefined, style: [
                                     this.textDecorationStyle[0],
@@ -868,7 +887,7 @@ exports.default = (0, vue_1.defineComponent)({
                         ], style: [
                             this.textDecorationStyle[0],
                             (_b = this.inputProps) === null || _b === void 0 ? void 0 : _b.style
-                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
+                        ], tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[0], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[0]
                             : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: (e) => this.handleInputFocus(e, 0), onInput: (e) => this.handleInput(e, 0), onChange: (e) => this.handleChange(e, 0) })),
                     this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },
@@ -905,7 +924,7 @@ exports.default = (0, vue_1.defineComponent)({
             this.pair ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-input__separator` }, (0, _utils_1.resolveSlot)($slots.separator, () => [this.separator]))) : null,
             this.pair ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input` },
-                    (0, vue_1.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
+                    (0, vue_1.h)("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: countGraphemes ? undefined : this.maxlength, minlength: countGraphemes ? undefined : this.minlength, value: Array.isArray(this.mergedValue)
                             ? this.mergedValue[1]
                             : undefined, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: (e) => this.handleInputFocus(e, 1), onInput: (e) => this.handleInput(e, 1), onChange: (e) => this.handleChange(e, 1) }),
                     this.showPlaceholder2 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder` },

package/lib/input/src/WordCount.js

@@ -7,14 +7,14 @@ const utils_1 = require("./utils");
 exports.default = (0, vue_1.defineComponent)({
     name: 'InputWordCount',
     setup(_, { slots }) {
-        const { mergedValueRef, maxlengthRef, mergedClsPrefixRef } = 
+        const { mergedValueRef, maxlengthRef, mergedClsPrefixRef, countGraphemesRef } = 
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         (0, vue_1.inject)(interface_1.inputInjectionKey);
         const wordCountRef = (0, vue_1.computed)(() => {
             const { value: mergedValue } = mergedValueRef;
             if (mergedValue === null || Array.isArray(mergedValue))
                 return 0;
-            return (0, utils_1.len)(mergedValue);
+            return (countGraphemesRef.value || utils_1.len)(mergedValue);
         });
         return () => {
             const { value: maxlength } = maxlengthRef;

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

@@ -16,6 +16,7 @@ export interface InputWrappedRef {
 }
 export declare type InputInst = UnwrapRef<InputWrappedRef>;
 export declare const inputInjectionKey: import("vue").InjectionKey<{
+    countGraphemesRef: Ref<((input: string) => number) | undefined>;
     mergedValueRef: Ref<string | [string, string] | null>;
     maxlengthRef: Ref<number | undefined>;
     mergedClsPrefixRef: Ref<string>;

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-bezier
 // --n-group-label-color
 // --n-border-radius
@@ -12,8 +12,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-font-size
 // --n-height
 // --n-group-label-border
-
-
 exports.default = (0, cssr_1.cB)('input-group-label', `
  position: relative;
  user-select: none;

package/lib/input/src/styles/input-group.cssr.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const cssr_1 = require("../../../_utils/cssr");
-
 exports.default = (0, cssr_1.cB)('input-group', `
  display: inline-flex;
  width: 100%;

package/lib/input/src/styles/input.cssr.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.safariStyle = void 0;
-
-const cssr_1 = require("../../../_utils/cssr"); // vars:
+const cssr_1 = require("../../../_utils/cssr");
+// vars:
 // --n-bezier
 // --n-color
 // --n-font-size
@@ -40,8 +40,6 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-count-text-color-disabled
 // --n-loading-color
 // ...form item vars
-
-
 exports.default = (0, cssr_1.cB)('input', `
  max-width: 100%;
  cursor: text;
@@ -56,7 +54,8 @@ exports.default = (0, cssr_1.cB)('input', `
  transition: background-color .3s var(--n-bezier);
  font-size: var(--n-font-size);
  --n-padding-vertical: calc((var(--n-height) - 1.5 * var(--n-font-size)) / 2);
-`, [// common
+`, [
+// common
 (0, cssr_1.cE)('input, textarea', `
  overflow: hidden;
  flex-grow: 1;
@@ -108,7 +107,8 @@ exports.default = (0, cssr_1.cB)('input', `
  top: 0;
  left: 0;
  height: 100%;
- `)]), // input
+ `)]),
+// input
 (0, cssr_1.cB)('input-wrapper', `
  overflow: hidden;
  display: inline-flex;
@@ -122,7 +122,7 @@ exports.default = (0, cssr_1.cB)('input', `
  overflow: hidden;
  visibility: hidden;
  position: static;
- white-space: nowrap;
+ white-space: pre;
  pointer-events: none;
  `), (0, cssr_1.cE)('input-el', `
  padding: 0;
@@ -133,7 +133,8 @@ exports.default = (0, cssr_1.cB)('input', `
  align-items: center; 
  `)])]), (0, cssr_1.cNotM)('textarea', [(0, cssr_1.cE)('placeholder', 'white-space: nowrap;')]), (0, cssr_1.cE)('eye', `
  transition: color .3s var(--n-bezier);
- `), // textarea
+ `),
+// textarea
 (0, cssr_1.cM)('textarea', 'width: 100%;', [(0, cssr_1.cB)('input-word-count', `
  position: absolute;
  right: var(--n-padding-right);
@@ -163,7 +164,8 @@ exports.default = (0, cssr_1.cB)('input', `
  position: static;
  white-space: pre-wrap;
  overflow-wrap: break-word;
- `)]), // pair
+ `)]),
+// pair
 (0, cssr_1.cM)('pair', [(0, cssr_1.cE)('input-el, placeholder', 'text-align: center;'), (0, cssr_1.cE)('separator', `
  display: flex;
  align-items: center;