naive-ui 2.30.3 → 2.30.6

package/lib/image/src/Image.js

@@ -8,7 +8,8 @@ const ImagePreview_1 = __importDefault(require("./ImagePreview"));
 const ImageGroup_1 = require("./ImageGroup");
 const _mixins_1 = require("../../_mixins");
 const interface_1 = require("./interface");
-const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, objectFit: {
+const utils_1 = require("./utils");
+const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: 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);
@@ -42,18 +43,36 @@ exports.default = (0, vue_1.defineComponent)({
                 previewInst.toggleShow();
             }
         };
+        const shouldStartLoadingRef = (0, vue_1.ref)(!props.lazy);
         (0, vue_1.onMounted)(() => {
             var _a;
             (_a = imageRef.value) === null || _a === void 0 ? void 0 : _a.setAttribute('data-group-id', (imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId) || '');
         });
+        (0, vue_1.onMounted)(() => {
+            let unobserve;
+            const stopWatchHandle = (0, vue_1.watchEffect)(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = (0, utils_1.observeIntersection)(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            (0, vue_1.onBeforeUnmount)(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
         (0, vue_1.watchEffect)(() => {
             var _a;
             void props.src;
             void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
             showErrorRef.value = false;
         });
+        const loadedRef = (0, vue_1.ref)(false);
         return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, groupId: imageGroupHandle === null || imageGroupHandle === void 0 ? void 0 : imageGroupHandle.groupId, previewInstRef,
-            imageRef, imgProps: imgPropsRef, showError: showErrorRef, mergedOnError: (e) => {
+            imageRef, imgProps: imgPropsRef, showError: showErrorRef, shouldStartLoading: shouldStartLoadingRef, loaded: loadedRef, mergedOnError: (e) => {
+                if (!shouldStartLoadingRef.value)
+                    return;
                 showErrorRef.value = true;
                 const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
                 onError === null || onError === void 0 ? void 0 : onError(e);
@@ -62,18 +81,33 @@ exports.default = (0, vue_1.defineComponent)({
                 const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
                 imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
+                loadedRef.value = true;
             } }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, imgProps = {}, $attrs } = this;
-        const imgNode = ((0, vue_1.h)("img", Object.assign({}, imgProps, { class: imgProps.class, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError ? this.fallbackSrc : this.src || imgProps.src, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [imgProps.style || '', { objectFit: this.objectFit }], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
+        var _a, _b;
+        const { mergedClsPrefix, imgProps = {}, loaded, $attrs } = this;
+        const placeholderNode = (_b = (_a = this.$slots).placeholder) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const imgNode = ((0, vue_1.h)("img", Object.assign({}, imgProps, { class: imgProps.class, ref: "imageRef", width: this.width || imgProps.width, height: this.height || imgProps.height, src: this.showError
+                ? this.fallbackSrc
+                : this.shouldStartLoading
+                    ? this.src || imgProps.src
+                    : undefined, alt: this.alt || imgProps.alt, "aria-label": this.alt || imgProps.alt, onClick: this.click, onError: this.mergedOnError, onLoad: this.mergedOnLoad, style: [
+                imgProps.style || '',
+                placeholderNode && !loaded
+                    ? { height: '0', width: '0', visibility: 'hidden' }
+                    : '',
+                { objectFit: this.objectFit }
+            ], "data-error": this.showError, "data-preview-src": this.previewSrc || this.src })));
         return ((0, vue_1.h)("div", Object.assign({}, $attrs, { role: "none", class: [
                 $attrs.class,
                 `${mergedClsPrefix}-image`,
                 (this.previewDisabled || this.showError) &&
                     `${mergedClsPrefix}-image--preview-disabled`
-            ] }), this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
-            default: () => imgNode
-        }))));
+            ] }),
+            this.groupId ? (imgNode) : ((0, vue_1.h)(ImagePreview_1.default, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
+                default: () => imgNode
+            })),
+            !loaded && placeholderNode));
     }
 });

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

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export declare type IntersectionObserverOptions = Omit<IntersectionObserverInit, 'root'> & {
+    root?: Element | Document | null | string;
+};
+export declare const resolveOptionsAndHash: (options?: IntersectionObserverOptions | undefined) => {
+    hash: string;
+    options: Omit<IntersectionObserverInit, "root"> & {
+        root: Element | Document;
+    };
+};
+export declare const observeIntersection: (el: HTMLImageElement | null, options: IntersectionObserverOptions | undefined, shouldStartLoadingRef: Ref<boolean>) => () => void;

package/lib/image/src/utils.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeIntersection = exports.resolveOptionsAndHash = void 0;
+const resolveOptionsAndHash = (options = {}) => {
+    var _a;
+    const { root = null } = options;
+    return {
+        hash: `${options.rootMargin || '0px 0px 0px 0px'}-${Array.isArray(options.threshold)
+            ? options.threshold.join(',')
+            : (_a = options.threshold) !== null && _a !== void 0 ? _a : '0'}`,
+        options: Object.assign(Object.assign({}, options), { root: (typeof root === 'string' ? document.querySelector(root) : root) ||
+                document.documentElement })
+    };
+};
+exports.resolveOptionsAndHash = resolveOptionsAndHash;
+// root -> options -> [observer, elements]
+const observers = new WeakMap();
+const unobserveHandleMap = new WeakMap();
+const shouldStartLoadingRefMap = new WeakMap();
+const observeIntersection = (el, options, shouldStartLoadingRef) => {
+    if (!el)
+        return () => { };
+    const resolvedOptionsAndHash = (0, exports.resolveOptionsAndHash)(options);
+    const { root } = resolvedOptionsAndHash.options;
+    let rootObservers;
+    const _rootObservers = observers.get(root);
+    if (_rootObservers) {
+        rootObservers = _rootObservers;
+    }
+    else {
+        rootObservers = new Map();
+        observers.set(root, rootObservers);
+    }
+    let observer;
+    let observerAndObservedElements;
+    if (rootObservers.has(resolvedOptionsAndHash.hash)) {
+        observerAndObservedElements =
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            rootObservers.get(resolvedOptionsAndHash.hash);
+        if (!observerAndObservedElements[1].has(el)) {
+            observer = observerAndObservedElements[0];
+            observerAndObservedElements[1].add(el);
+            observer.observe(el);
+        }
+    }
+    else {
+        observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const _unobserve = unobserveHandleMap.get(entry.target);
+                    const _shouldStartLoadingRef = shouldStartLoadingRefMap.get(entry.target);
+                    if (_unobserve)
+                        _unobserve();
+                    if (_shouldStartLoadingRef) {
+                        _shouldStartLoadingRef.value = true;
+                    }
+                }
+            });
+        }, resolvedOptionsAndHash.options);
+        observer.observe(el);
+        observerAndObservedElements = [observer, new Set([el])];
+        rootObservers.set(resolvedOptionsAndHash.hash, observerAndObservedElements);
+    }
+    let unobservered = false;
+    const unobserve = () => {
+        if (unobservered)
+            return;
+        unobserveHandleMap.delete(el);
+        shouldStartLoadingRefMap.delete(el);
+        unobservered = true;
+        if (observerAndObservedElements[1].has(el)) {
+            observerAndObservedElements[0].unobserve(el);
+            observerAndObservedElements[1].delete(el);
+        }
+        if (observerAndObservedElements[1].size <= 0) {
+            rootObservers.delete(resolvedOptionsAndHash.hash);
+        }
+        if (!rootObservers.size) {
+            observers.delete(root);
+        }
+    };
+    unobserveHandleMap.set(el, unobserve);
+    shouldStartLoadingRefMap.set(el, shouldStartLoadingRef);
+    return unobserve;
+};
+exports.observeIntersection = observeIntersection;

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

@@ -61,6 +61,7 @@ declare const inputProps: {
         type: BooleanConstructor;
         default: undefined;
     };
+    allowInput: PropType<(value: string) => boolean>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -330,6 +331,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    allowInput: PropType<(value: string) => boolean>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;
@@ -587,7 +589,7 @@ declare const _default: import("vue").DefineComponent<{
     handleCompositionEnd: (e: CompositionEvent) => void;
     handleInput: (e: InputEvent | CompositionEvent | Event, index?: 0 | 1, event?: string) => void;
     handleInputBlur: (e: FocusEvent) => void;
-    handleInputFocus: (e: FocusEvent) => void;
+    handleInputFocus: (e: FocusEvent, index: number) => void;
     handleWrapperBlur: (e: FocusEvent) => void;
     handleWrapperFocus: (e: FocusEvent) => void;
     handleMouseEnter: () => void;
@@ -598,7 +600,7 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: (e: MouseEvent) => void;
     handlePasswordToggleClick: () => void;
     handlePasswordToggleMousedown: (e: MouseEvent) => void;
-    handleWrapperKeyDown: (e: KeyboardEvent) => void;
+    handleWrapperKeydown: (e: KeyboardEvent) => void;
     handleTextAreaMirrorResize: () => void;
     getTextareaScrollContainer: () => HTMLTextAreaElement | null;
     mergedTheme: import("vue").ComputedRef<{
@@ -655,7 +657,7 @@ declare const _default: import("vue").DefineComponent<{
             scrollbarWidth: string;
             scrollbarHeight: string;
             scrollbarBorderRadius: string;
-            progressRailColor: string; /** deprecated */
+            progressRailColor: string;
             railColor: string;
             popoverColor: string;
             tableColor: string;
@@ -887,6 +889,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: undefined;
     };
+    allowInput: PropType<(value: string) => boolean>;
     onMousedown: PropType<(e: MouseEvent) => void>;
     onKeydown: PropType<(e: KeyboardEvent) => void>;
     onKeyup: PropType<(e: KeyboardEvent) => void>;

package/lib/input/src/Input.js

@@ -9,6 +9,7 @@ const seemly_1 = require("seemly");
 const vueuc_1 = require("vueuc");
 const evtd_1 = require("evtd");
 const icons_1 = require("../../_internal/icons");
+const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
@@ -17,7 +18,6 @@ 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 use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
 const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -48,7 +48,7 @@ const inputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, showCount: Boolean, loading: {
         type: Boolean,
         default: undefined
-    }, onMousedown: Function, onKeydown: Function, onKeyup: Function, onInput: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], onClick: [Function, Array], onChange: [Function, Array], onClear: [Function, Array], status: String, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, 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], 
     /** private */
     textDecoration: [String, Array], attrSize: {
         type: Number,
@@ -76,6 +76,8 @@ exports.default = (0, vue_1.defineComponent)({
         const inputMirrorElRef = (0, vue_1.ref)(null);
         const inputElRef = (0, vue_1.ref)(null);
         const inputEl2Ref = (0, vue_1.ref)(null);
+        const currentFocusedInputRef = (0, vue_1.ref)(null);
+        const focusedInputCursorControl = (0, utils_1.useCursor)(currentFocusedInputRef);
         const textareaScrollbarInstRef = (0, vue_1.ref)(null);
         // local
         const { localeRef } = (0, _mixins_1.useLocale)('Input');
@@ -116,8 +118,8 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: mergedValue } = mergedValueRef;
             const { value: mergedPlaceholder } = mergedPlaceholderRef;
             return (!isComposing &&
-                ((0, utils_1.isEmptyValue)(mergedValue) ||
-                    (Array.isArray(mergedValue) && (0, utils_1.isEmptyValue)(mergedValue[0]))) &&
+                ((0, utils_1.isEmptyInputValue)(mergedValue) ||
+                    (Array.isArray(mergedValue) && (0, utils_1.isEmptyInputValue)(mergedValue[0]))) &&
                 mergedPlaceholder[0]);
         });
         const showPlaceholder2Ref = (0, vue_1.computed)(() => {
@@ -126,8 +128,8 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: mergedPlaceholder } = mergedPlaceholderRef;
             return (!isComposing &&
                 mergedPlaceholder[1] &&
-                ((0, utils_1.isEmptyValue)(mergedValue) ||
-                    (Array.isArray(mergedValue) && (0, utils_1.isEmptyValue)(mergedValue[1]))));
+                ((0, utils_1.isEmptyInputValue)(mergedValue) ||
+                    (Array.isArray(mergedValue) && (0, utils_1.isEmptyInputValue)(mergedValue[1]))));
         });
         // focus
         const mergedFocusRef = (0, vooks_1.useMemo)(() => {
@@ -325,24 +327,37 @@ exports.default = (0, vue_1.defineComponent)({
             syncSource = targetValue;
             if (isComposingRef.value)
                 return;
-            const changedValue = targetValue;
-            if (!props.pair) {
-                event === 'input' ? doUpdateValue(changedValue) : doChange(changedValue);
-            }
-            else {
-                let { value } = mergedValueRef;
-                if (!Array.isArray(value)) {
-                    value = ['', ''];
+            focusedInputCursorControl.recordCursor();
+            const isIncomingValueValid = allowInput(targetValue);
+            if (isIncomingValueValid) {
+                if (!props.pair) {
+                    event === 'input' ? doUpdateValue(targetValue) : doChange(targetValue);
                 }
                 else {
-                    value = [...value];
+                    let { value } = mergedValueRef;
+                    if (!Array.isArray(value)) {
+                        value = ['', ''];
+                    }
+                    else {
+                        value = [value[0], value[1]];
+                    }
+                    value[index] = targetValue;
+                    event === 'input' ? doUpdateValue(value) : doChange(value);
                 }
-                value[index] = changedValue;
-                event === 'input' ? doUpdateValue(value) : doChange(value);
             }
             // force update to sync input's view with value
             // if not set, after input, input value won't sync with dom input value
             vm.$forceUpdate();
+            if (!isIncomingValueValid) {
+                void (0, vue_1.nextTick)(focusedInputCursorControl.restoreCursor);
+            }
+        }
+        function allowInput(value) {
+            const { allowInput } = props;
+            if (typeof allowInput === 'function') {
+                return allowInput(value);
+            }
+            return true;
         }
         function handleInputBlur(e) {
             doUpdateValueBlur(e);
@@ -356,13 +371,23 @@ exports.default = (0, vue_1.defineComponent)({
                 activatedRef.value = false;
             }
             dealWithEvent(e, 'blur');
+            currentFocusedInputRef.value = null;
         }
-        function handleInputFocus(e) {
+        function handleInputFocus(e, index) {
             doUpdateValueFocus(e);
             focusedRef.value = true;
             activatedRef.value = true;
             doActivate();
             dealWithEvent(e, 'focus');
+            if (index === 0) {
+                currentFocusedInputRef.value = inputElRef.value;
+            }
+            else if (index === 1) {
+                currentFocusedInputRef.value = inputEl2Ref.value;
+            }
+            else if (index === 2) {
+                currentFocusedInputRef.value = textareaElRef.value;
+            }
         }
         function handleWrapperBlur(e) {
             if (props.passivelyActivated) {
@@ -482,25 +507,25 @@ exports.default = (0, vue_1.defineComponent)({
             };
             (0, evtd_1.on)('mouseup', document, hidePassword);
         }
-        function handleWrapperKeyDown(e) {
+        function handleWrapperKeydown(e) {
             var _a;
             (_a = props.onKeydown) === null || _a === void 0 ? void 0 : _a.call(props, e);
             switch (e.key) {
                 case 'Escape':
-                    handleWrapperKeyDownEsc();
+                    handleWrapperKeydownEsc();
                     break;
                 case 'Enter':
-                    handleWrapperKeyDownEnter(e);
+                    handleWrapperKeydownEnter(e);
                     break;
             }
         }
-        function handleWrapperKeyDownEnter(e) {
+        function handleWrapperKeydownEnter(e) {
             var _a, _b;
             if (props.passivelyActivated) {
                 const { value: focused } = activatedRef;
                 if (focused) {
                     if (props.internalDeactivateOnEnter) {
-                        handleWrapperKeyDownEsc();
+                        handleWrapperKeydownEsc();
                     }
                     return;
                 }
@@ -513,7 +538,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             }
         }
-        function handleWrapperKeyDownEsc() {
+        function handleWrapperKeydownEsc() {
             if (props.passivelyActivated) {
                 activatedRef.value = false;
                 void (0, vue_1.nextTick)(() => {
@@ -558,7 +583,7 @@ exports.default = (0, vue_1.defineComponent)({
             const { value: wrapperEl } = wrapperElRef;
             if ((wrapperEl === null || wrapperEl === void 0 ? void 0 : wrapperEl.contains(document.activeElement)) &&
                 wrapperEl !== document.activeElement) {
-                handleWrapperKeyDownEsc();
+                handleWrapperKeydownEsc();
             }
         }
         function syncMirror(value) {
@@ -731,7 +756,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleClear,
             handlePasswordToggleClick,
             handlePasswordToggleMousedown,
-            handleWrapperKeyDown,
+            handleWrapperKeydown,
             handleTextAreaMirrorResize, getTextareaScrollContainer: () => {
                 return textareaElRef.value;
             }, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
@@ -758,7 +783,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             ], style: this.cssVars, tabindex: !this.mergedDisabled && this.passivelyActivated && !this.activated
                 ? 0
-                : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeyDown },
+                : undefined, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, onClick: this.handleClick, onMousedown: this.handleMouseDown, onMouseenter: this.handleMouseEnter, onMouseleave: this.handleMouseLeave, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onKeyup: this.onKeyup, onKeydown: this.handleWrapperKeydown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 (0, _utils_1.resolveWrappedSlot)($slots.prefix, (children) => children && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 this.type === 'textarea' ? ((0, vue_1.h)(_internal_1.NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
@@ -780,7 +805,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     this.textDecorationStyle[0],
                                     (_b = this.inputProps) === null || _b === void 0 ? void 0 : _b.style,
                                     scrollContainerWidthStyle
-                                ], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
+                                ], onBlur: this.handleInputBlur, onFocus: (e) => this.handleInputFocus(e, 2), onInput: this.handleInput, onChange: this.handleChange, onScroll: this.handleTextAreaScroll })),
                             this.showPlaceholder1 ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__placeholder`, style: [
                                     this.placeholderStyle,
                                     scrollContainerWidthStyle
@@ -802,7 +827,7 @@ exports.default = (0, vue_1.defineComponent)({
                             (_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)
                             ? this.mergedValue[0]
-                            : this.mergedValue, readonly: this.readonly, autofocus: this.autofocus, size: this.attrSize, onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: (e) => this.handleInput(e, 0), onChange: (e) => this.handleChange(e, 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` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
@@ -839,7 +864,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (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)
                             ? this.mergedValue[1]
-                            : undefined, readonly: this.readonly, style: this.textDecorationStyle[1], onBlur: this.handleInputBlur, onFocus: this.handleInputFocus, onInput: (e) => this.handleInput(e, 1), onChange: (e) => this.handleChange(e, 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` },
                         (0, vue_1.h)("span", null, this.mergedPlaceholder[1]))) : null),
                 (0, _utils_1.resolveWrappedSlot)($slots.suffix, (children) => {

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

@@ -26,6 +26,8 @@ exports.default = (0, cssr_1.cB)('input-group-label', `
  font-size: var(--n-font-size);
  line-height: var(--n-height);
  height: var(--n-height);
+ flex-shrink: 0;
+ white-space: nowrap;
  transition: 
  color .3s var(--n-bezier),
  background-color .3s var(--n-bezier),

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

@@ -1,2 +1,8 @@
+import type { Ref } from 'vue';
 export declare function len(s: string): number;
-export declare function isEmptyValue(value: any): boolean;
+export declare function isEmptyInputValue(value: unknown): boolean;
+export interface UseCursorControl {
+    recordCursor: () => void;
+    restoreCursor: () => void;
+}
+export declare function useCursor(inputElRef: Ref<HTMLInputElement | HTMLTextAreaElement | null>): UseCursorControl;

package/lib/input/src/utils.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isEmptyValue = exports.len = void 0;
+exports.useCursor = exports.isEmptyInputValue = exports.len = void 0;
+const vue_1 = require("vue");
 function len(s) {
     let count = 0;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -10,7 +11,62 @@ function len(s) {
     return count;
 }
 exports.len = len;
-function isEmptyValue(value) {
-    return ['', undefined, null].includes(value);
+function isEmptyInputValue(value) {
+    return value === '' || value == null;
 }
-exports.isEmptyValue = isEmptyValue;
+exports.isEmptyInputValue = isEmptyInputValue;
+function useCursor(inputElRef) {
+    const selectionRef = (0, vue_1.ref)(null);
+    function recordCursor() {
+        const { value: input } = inputElRef;
+        if (!input || !input.focus) {
+            reset();
+            return;
+        }
+        const { selectionStart, selectionEnd, value } = input;
+        if (selectionStart == null || selectionEnd == null) {
+            reset();
+            return;
+        }
+        selectionRef.value = {
+            start: selectionStart,
+            end: selectionEnd,
+            beforeText: value.slice(0, selectionStart),
+            afterText: value.slice(selectionEnd)
+        };
+    }
+    function restoreCursor() {
+        var _a;
+        const { value: selection } = selectionRef;
+        const { value: inputEl } = inputElRef;
+        if (!selection || !inputEl) {
+            return;
+        }
+        const { value } = inputEl;
+        const { start, beforeText, afterText } = selection;
+        let startPos = value.length;
+        if (value.endsWith(afterText)) {
+            startPos = value.length - afterText.length;
+        }
+        else if (value.startsWith(beforeText)) {
+            startPos = beforeText.length;
+        }
+        else {
+            const beforeLastChar = beforeText[start - 1];
+            const newIndex = value.indexOf(beforeLastChar, start - 1);
+            if (newIndex !== -1) {
+                startPos = newIndex + 1;
+            }
+        }
+        (_a = inputEl.setSelectionRange) === null || _a === void 0 ? void 0 : _a.call(inputEl, startPos, startPos);
+    }
+    function reset() {
+        selectionRef.value = null;
+    }
+    (0, vue_1.watch)(inputElRef, reset);
+    return {
+        recordCursor,
+        restoreCursor
+    };
+}
+exports.useCursor = useCursor;

package/lib/layout/src/Layout.d.ts

@@ -1,6 +1,6 @@
 import { PropType, CSSProperties, ExtractPropTypes } from 'vue';
 import type { ScrollbarProps } from '../../_internal';
-import { ExtractPublicPropTypes } from '../../_utils';
+import type { ExtractPublicPropTypes } from '../../_utils';
 declare const layoutProps: {
     readonly embedded: BooleanConstructor;
     readonly position: {
@@ -319,6 +319,7 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;
@@ -718,6 +719,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;

package/lib/layout/src/Layout.js

@@ -7,10 +7,10 @@ exports.createLayoutComponent = exports.layoutInjectionKey = void 0;
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
+const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
-const layout_cssr_1 = __importDefault(require("./styles/layout.cssr"));
 const interface_1 = require("./interface");
-const _utils_1 = require("../../_utils");
+const layout_cssr_1 = __importDefault(require("./styles/layout.cssr"));
 const layoutProps = {
     embedded: Boolean,
     position: interface_1.positionProp,
@@ -61,6 +61,24 @@ function createLayoutComponent(isContent) {
                 }
             }
             (0, vue_1.provide)(exports.layoutInjectionKey, props);
+            let scrollX = 0;
+            let scrollY = 0;
+            const handleNativeElScroll = (e) => {
+                var _a;
+                const target = e.target;
+                scrollX = target.scrollLeft;
+                scrollY = target.scrollTop;
+                (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            };
+            (0, _utils_1.useReactivated)(() => {
+                if (props.nativeScrollbar) {
+                    const el = scrollableElRef.value;
+                    if (el) {
+                        el.scrollTop = scrollY;
+                        el.scrollLeft = scrollX;
+                    }
+                }
+            });
             const hasSiderStyle = {
                 display: 'flex',
                 flexWrap: 'nowrap',
@@ -83,7 +101,7 @@ function createLayoutComponent(isContent) {
                 : undefined;
             return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, scrollableElRef,
                 scrollbarInstRef,
-                hasSiderStyle, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
+                hasSiderStyle, mergedTheme: themeRef, handleNativeElScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
         },
         render() {
             var _a;
@@ -96,7 +114,7 @@ function createLayoutComponent(isContent) {
                 `${mergedClsPrefix}-layout`,
                 `${mergedClsPrefix}-layout--${this.position}-positioned`
             ];
-            return ((0, vue_1.h)("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? ((0, vue_1.h)("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.onScroll }, this.$slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
+            return ((0, vue_1.h)("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? ((0, vue_1.h)("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.handleNativeElScroll }, this.$slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { onScroll: this.onScroll, ref: "scrollbarInstRef", theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar, contentStyle: [this.contentStyle, hasSiderStyle] }), this.$slots))));
         }
     });
 }

package/lib/layout/src/LayoutContent.d.ts

@@ -271,6 +271,7 @@ declare const _default: import("vue").DefineComponent<{
             } | undefined;
         };
     }>;
+    handleNativeElScroll: (e: Event) => void;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-color': string;

package/lib/layout/src/LayoutSider.d.ts

@@ -362,6 +362,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedCollapsed: import("vue").ComputedRef<boolean>;
     scrollContainerStyle: import("vue").ComputedRef<CSSProperties>;
     siderPlacement: import("vue").ComputedRef<"left" | "right">;
+    handleNativeElScroll: (e: Event) => void;
     handleTransitionend: (e: TransitionEvent) => void;
     handleTriggerClick: () => void;
     inlineThemeDisabled: boolean | undefined;