naive-ui 2.30.3 → 2.30.6

package/es/image/src/Image.js

@@ -1,9 +1,10 @@
-import { defineComponent, h, inject, ref, toRef, watchEffect, onMounted } from 'vue';
+import { defineComponent, h, inject, ref, toRef, watchEffect, onMounted, onBeforeUnmount } from 'vue';
 import NImagePreview from './ImagePreview';
 import { imageGroupInjectionKey } from './ImageGroup';
 import { useConfig } from '../../_mixins';
 import { imagePreviewSharedProps } from './interface';
-const imageProps = Object.assign({ alt: String, height: [String, Number], imgProps: Object, objectFit: {
+import { observeIntersection } from './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 }, imagePreviewSharedProps);
@@ -37,18 +38,36 @@ export default defineComponent({
                 previewInst.toggleShow();
             }
         };
+        const shouldStartLoadingRef = ref(!props.lazy);
         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) || '');
         });
+        onMounted(() => {
+            let unobserve;
+            const stopWatchHandle = watchEffect(() => {
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                unobserve = undefined;
+                if (props.lazy) {
+                    unobserve = observeIntersection(imageRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                }
+            });
+            onBeforeUnmount(() => {
+                stopWatchHandle();
+                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+            });
+        });
         watchEffect(() => {
             var _a;
             void props.src;
             void ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src);
             showErrorRef.value = false;
         });
+        const loadedRef = 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);
@@ -57,18 +76,33 @@ export default 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 = (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 = (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 (h("div", Object.assign({}, $attrs, { role: "none", class: [
                 $attrs.class,
                 `${mergedClsPrefix}-image`,
                 (this.previewDisabled || this.showError) &&
                     `${mergedClsPrefix}-image--preview-disabled`
-            ] }), this.groupId ? (imgNode) : (h(NImagePreview, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
-            default: () => imgNode
-        }))));
+            ] }),
+            this.groupId ? (imgNode) : (h(NImagePreview, { theme: this.theme, themeOverrides: this.themeOverrides, clsPrefix: mergedClsPrefix, ref: "previewInstRef", showToolbar: this.showToolbar, showToolbarTooltip: this.showToolbarTooltip }, {
+                default: () => imgNode
+            })),
+            !loaded && placeholderNode));
     }
 });

package/es/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/es/image/src/utils.js

@@ -0,0 +1,81 @@
+export 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 })
+    };
+};
+// root -> options -> [observer, elements]
+const observers = new WeakMap();
+const unobserveHandleMap = new WeakMap();
+const shouldStartLoadingRefMap = new WeakMap();
+export const observeIntersection = (el, options, shouldStartLoadingRef) => {
+    if (!el)
+        return () => { };
+    const resolvedOptionsAndHash = 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;
+};

package/es/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/es/input/src/Input.js

@@ -4,15 +4,15 @@ import { getPadding } from 'seemly';
 import { VResizeObserver } from 'vueuc';
 import { off, on } from 'evtd';
 import { EyeIcon, EyeOffIcon } from '../../_internal/icons';
+import useRtl from '../../_mixins/use-rtl';
 import { NBaseClear, NBaseIcon, NBaseSuffix, NScrollbar } from '../../_internal';
 import { useTheme, useLocale, useFormItem, useConfig, useThemeClass } from '../../_mixins';
 import { call, createKey, resolveSlot, resolveWrappedSlot, warnOnce } from '../../_utils';
 import { inputLight } from '../styles';
 import { inputInjectionKey } from './interface';
-import { isEmptyValue } from './utils';
+import { isEmptyInputValue, useCursor } from './utils';
 import WordCount from './WordCount';
 import style from './styles/input.cssr';
-import useRtl from '../../_mixins/use-rtl';
 const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered: {
         type: Boolean,
         default: undefined
@@ -43,7 +43,7 @@ const inputProps = Object.assign(Object.assign({}, useTheme.props), { bordered:
     }, 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,
@@ -71,6 +71,8 @@ export default defineComponent({
         const inputMirrorElRef = ref(null);
         const inputElRef = ref(null);
         const inputEl2Ref = ref(null);
+        const currentFocusedInputRef = ref(null);
+        const focusedInputCursorControl = useCursor(currentFocusedInputRef);
         const textareaScrollbarInstRef = ref(null);
         // local
         const { localeRef } = useLocale('Input');
@@ -111,8 +113,8 @@ export default defineComponent({
             const { value: mergedValue } = mergedValueRef;
             const { value: mergedPlaceholder } = mergedPlaceholderRef;
             return (!isComposing &&
-                (isEmptyValue(mergedValue) ||
-                    (Array.isArray(mergedValue) && isEmptyValue(mergedValue[0]))) &&
+                (isEmptyInputValue(mergedValue) ||
+                    (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[0]))) &&
                 mergedPlaceholder[0]);
         });
         const showPlaceholder2Ref = computed(() => {
@@ -121,8 +123,8 @@ export default defineComponent({
             const { value: mergedPlaceholder } = mergedPlaceholderRef;
             return (!isComposing &&
                 mergedPlaceholder[1] &&
-                (isEmptyValue(mergedValue) ||
-                    (Array.isArray(mergedValue) && isEmptyValue(mergedValue[1]))));
+                (isEmptyInputValue(mergedValue) ||
+                    (Array.isArray(mergedValue) && isEmptyInputValue(mergedValue[1]))));
         });
         // focus
         const mergedFocusRef = useMemo(() => {
@@ -320,24 +322,37 @@ export default 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 nextTick(focusedInputCursorControl.restoreCursor);
+            }
+        }
+        function allowInput(value) {
+            const { allowInput } = props;
+            if (typeof allowInput === 'function') {
+                return allowInput(value);
+            }
+            return true;
         }
         function handleInputBlur(e) {
             doUpdateValueBlur(e);
@@ -351,13 +366,23 @@ export default 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) {
@@ -477,25 +502,25 @@ export default defineComponent({
             };
             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;
                 }
@@ -508,7 +533,7 @@ export default defineComponent({
                 }
             }
         }
-        function handleWrapperKeyDownEsc() {
+        function handleWrapperKeydownEsc() {
             if (props.passivelyActivated) {
                 activatedRef.value = false;
                 void nextTick(() => {
@@ -553,7 +578,7 @@ export default 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) {
@@ -726,7 +751,7 @@ export default 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 });
@@ -753,7 +778,7 @@ export default 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 },
             h("div", { class: `${mergedClsPrefix}-input-wrapper` },
                 resolveWrappedSlot($slots.prefix, (children) => children && (h("div", { class: `${mergedClsPrefix}-input__prefix` }, children))),
                 this.type === 'textarea' ? (h(NScrollbar, { ref: "textareaScrollbarInstRef", class: `${mergedClsPrefix}-input__textarea`, container: this.getTextareaScrollContainer, triggerDisplayManually: true, useUnifiedContainer: true }, {
@@ -775,7 +800,7 @@ export default 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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder`, style: [
                                     this.placeholderStyle,
                                     scrollContainerWidthStyle
@@ -797,7 +822,7 @@ export default 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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[0]))) : null,
                     this.autosize ? (h("div", { class: `${mergedClsPrefix}-input__input-mirror`, key: "mirror", ref: "inputMirrorElRef" }, "\u00A0")) : null)),
@@ -834,7 +859,7 @@ export default defineComponent({
                 h("div", { class: `${mergedClsPrefix}-input__input` },
                     h("input", { ref: "inputEl2Ref", type: this.type, class: `${mergedClsPrefix}-input__input-el`, tabindex: this.passivelyActivated && !this.activated ? -1 : undefined, placeholder: this.mergedPlaceholder[1], disabled: this.mergedDisabled, maxlength: this.maxlength, minlength: this.minlength, value: Array.isArray(this.mergedValue)
                             ? 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 ? (h("div", { class: `${mergedClsPrefix}-input__placeholder` },
                         h("span", null, this.mergedPlaceholder[1]))) : null),
                 resolveWrappedSlot($slots.suffix, (children) => {

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

@@ -19,6 +19,8 @@ export default 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/es/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/es/input/src/utils.js

@@ -1,3 +1,4 @@
+import { ref, watch } from 'vue';
 export function len(s) {
     let count = 0;
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -6,6 +7,60 @@ export function len(s) {
     }
     return count;
 }
-export function isEmptyValue(value) {
-    return ['', undefined, null].includes(value);
+export function isEmptyInputValue(value) {
+    return value === '' || value == null;
+}
+export function useCursor(inputElRef) {
+    const selectionRef = 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;
+    }
+    watch(inputElRef, reset);
+    return {
+        recordCursor,
+        restoreCursor
+    };
 }

package/es/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/es/layout/src/Layout.js

@@ -1,10 +1,10 @@
 import { h, defineComponent, computed, ref, provide } from 'vue';
 import { NScrollbar } from '../../_internal';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { createInjectionKey, useReactivated } from '../../_utils';
 import { layoutLight } from '../styles';
-import style from './styles/layout.cssr';
 import { positionProp } from './interface';
-import { createInjectionKey } from '../../_utils';
+import style from './styles/layout.cssr';
 const layoutProps = {
     embedded: Boolean,
     position: positionProp,
@@ -55,6 +55,24 @@ export function createLayoutComponent(isContent) {
                 }
             }
             provide(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);
+            };
+            useReactivated(() => {
+                if (props.nativeScrollbar) {
+                    const el = scrollableElRef.value;
+                    if (el) {
+                        el.scrollTop = scrollY;
+                        el.scrollLeft = scrollX;
+                    }
+                }
+            });
             const hasSiderStyle = {
                 display: 'flex',
                 flexWrap: 'nowrap',
@@ -77,7 +95,7 @@ export 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;
@@ -90,7 +108,7 @@ export function createLayoutComponent(isContent) {
                 `${mergedClsPrefix}-layout`,
                 `${mergedClsPrefix}-layout--${this.position}-positioned`
             ];
-            return (h("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? (h("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.onScroll }, this.$slots)) : (h(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 (h("div", { class: layoutClass, style: this.cssVars }, this.nativeScrollbar ? (h("div", { ref: "scrollableElRef", class: `${mergedClsPrefix}-layout-scroll-container`, style: [this.contentStyle, hasSiderStyle], onScroll: this.handleNativeElScroll }, this.$slots)) : (h(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/es/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/es/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;