naive-ui 2.30.3 → 2.30.4

package/lib/data-table/styles/light.d.ts

@@ -626,6 +626,77 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
             paddingLarge: string;
             clearSize: string;
         }, any>;
+        Popselect: import("../../_mixins").Theme<"Popselect", {
+            menuBoxShadow: string;
+        }, {
+            Popover: import("../../_mixins").Theme<"Popover", {
+                fontSize: string;
+                borderRadius: string;
+                color: string;
+                dividerColor: string;
+                textColor: string;
+                boxShadow: string;
+                space: string;
+                spaceArrow: string;
+                arrowOffset: string;
+                arrowOffsetVertical: string;
+                arrowHeight: string;
+                padding: string;
+            }, any>;
+            InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+                optionFontSizeSmall: string;
+                optionFontSizeMedium: string;
+                optionFontSizeLarge: string;
+                optionFontSizeHuge: string;
+                optionHeightSmall: string;
+                optionHeightMedium: string;
+                optionHeightLarge: string;
+                optionHeightHuge: string;
+                borderRadius: string;
+                color: string;
+                groupHeaderTextColor: string;
+                actionDividerColor: string;
+                optionTextColor: string;
+                optionTextColorPressed: string;
+                optionTextColorDisabled: string;
+                optionTextColorActive: string;
+                optionOpacityDisabled: string;
+                optionCheckColor: string;
+                optionColorPending: string;
+                optionColorActive: string;
+                optionColorActivePending: string;
+                actionTextColor: string;
+                loadingColor: string;
+                height: string;
+                paddingSmall: string;
+                paddingMedium: string;
+                paddingLarge: string;
+                paddingHuge: string;
+                optionPaddingSmall: string;
+                optionPaddingMedium: string;
+                optionPaddingLarge: string;
+                optionPaddingHuge: string;
+                loadingSize: string;
+            }, {
+                Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    color: string;
+                    colorHover: string;
+                }, any>;
+                Empty: import("../../_mixins").Theme<"Empty", {
+                    fontSizeSmall: string;
+                    fontSizeMedium: string;
+                    fontSizeLarge: string;
+                    fontSizeHuge: string;
+                    textColor: string;
+                    iconColor: string;
+                    extraTextColor: string;
+                    iconSizeSmall: string;
+                    iconSizeMedium: string;
+                    iconSizeLarge: string;
+                    iconSizeHuge: string;
+                }, any>;
+            }>;
+        }>;
     }>;
     Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
         color: string;

package/lib/date-picker/src/DatePicker.d.ts

@@ -3948,8 +3948,9 @@ declare const _default: import("vue").DefineComponent<{
     isValueInvalid: import("vue").ComputedRef<boolean>;
     isStartValueInvalid: import("vue").ComputedRef<boolean>;
     isEndValueInvalid: import("vue").ComputedRef<boolean>;
+    handleInputKeydown: (e: KeyboardEvent) => void;
     handleClickOutside: (e: MouseEvent) => void;
-    handleKeyDown: (e: KeyboardEvent) => void;
+    handleKeydown: (e: KeyboardEvent) => void;
     handleClear: () => void;
     handlePanelClear: () => void;
     handleTriggerClick: (e: MouseEvent) => void;

package/lib/date-picker/src/DatePicker.js

@@ -307,11 +307,14 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, _utils_1.call)(onUpdateShow, show);
             uncontrolledShowRef.value = show;
         }
-        function handleKeyDown(e) {
+        function handleKeydown(e) {
             if (e.key === 'Escape') {
-                closeCalendar({
-                    returnFocus: true
-                });
+                if (mergedShowRef.value) {
+                    (0, _utils_1.markEventEffectPerformed)(e);
+                    closeCalendar({
+                        returnFocus: true
+                    });
+                }
             }
             // We need to handle the conflict with normal date value input
             // const { value: mergedValue } = mergedValueRef
@@ -320,6 +323,12 @@ exports.default = (0, vue_1.defineComponent)({
             //   doUpdateValue(nextValue)
             // }
         }
+        function handleInputKeydown(e) {
+            if (e.key === 'Escape' && mergedShowRef.value) {
+                (0, _utils_1.markEventEffectPerformed)(e);
+                // closeCalendar will be called in handleDeactivated
+            }
+        }
         function handleClear() {
             var _a;
             doUpdateShow(false);
@@ -600,8 +609,9 @@ exports.default = (0, vue_1.defineComponent)({
             : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
-            inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
-            handleKeyDown,
+            inputInstRef, isMounted: (0, vooks_1.useIsMounted)(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleInputKeydown,
+            handleClickOutside,
+            handleKeydown,
             handleClear,
             handlePanelClear,
             handleTriggerClick,
@@ -623,7 +633,7 @@ exports.default = (0, vue_1.defineComponent)({
             onTabOut: this.handlePanelTabOut,
             onClose: this.handlePanelClose,
             onClear: this.handlePanelClear,
-            onKeydown: this.handleKeyDown,
+            onKeydown: this.handleKeydown,
             onConfirm: this.handlePanelConfirm,
             ref: 'panelInstRef',
             value: this.pendingValue,
@@ -653,6 +663,7 @@ exports.default = (0, vue_1.defineComponent)({
             clearable,
             onClear: this.handleClear,
             onClick: this.handleTriggerClick,
+            onKeydown: this.handleInputKeydown,
             onActivate: this.handleInputActivate,
             onDeactivate: this.handleInputDeactivate,
             onFocus: this.handleInputFocus,
@@ -663,7 +674,7 @@ exports.default = (0, vue_1.defineComponent)({
                 this.mergedDisabled && `${mergedClsPrefix}-date-picker--disabled`,
                 this.isRange && `${mergedClsPrefix}-date-picker--range`,
                 this.triggerThemeClass
-            ], style: this.triggerCssVars, onKeydown: this.handleKeyDown },
+            ], style: this.triggerCssVars, onKeydown: this.handleKeydown },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {

package/lib/date-picker/src/panel/month.js

@@ -32,6 +32,7 @@ exports.default = (0, vue_1.defineComponent)({
                     return `Q ${item.dateObject.quarter}`;
             }
         };
+        const { useAsQuickJump } = props;
         const renderItem = (item, i, mergedClsPrefix) => {
             const { mergedIsDateDisabled, handleDateClick, handleQuickMonthClick } = useCalendarRef;
             return ((0, vue_1.h)("div", { "data-n-date": true, key: i, class: [
@@ -39,10 +40,10 @@ exports.default = (0, vue_1.defineComponent)({
                     {
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--current`]: item.isCurrent,
                         [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--selected`]: item.selected,
-                        [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: mergedIsDateDisabled(item.ts)
+                        [`${mergedClsPrefix}-date-panel-month-calendar__picker-col-item--disabled`]: !useAsQuickJump && mergedIsDateDisabled(item.ts)
                     }
                 ], onClick: () => {
-                    props.useAsQuickJump
+                    useAsQuickJump
                         ? handleQuickMonthClick(item, (value) => props.onUpdateValue(value, false))
                         : handleDateClick(item);
                 } }, getRenderContent(item)));

package/lib/drawer/src/Drawer.d.ts

@@ -295,7 +295,7 @@ declare const _default: import("vue").DefineComponent<{
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties)[]>;
     handleMaskClick: (e: MouseEvent) => void;
-    handleEsc: () => void;
+    handleEsc: (e: KeyboardEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;

package/lib/drawer/src/Drawer.js

@@ -108,10 +108,10 @@ exports.default = (0, vue_1.defineComponent)({
                 onMaskClick(e);
         }
         const isComposingRef = (0, _utils_1.useIsComposing)();
-        function handleEsc() {
+        function handleEsc(e) {
             var _a;
             (_a = props.onEsc) === null || _a === void 0 ? void 0 : _a.call(props);
-            if (props.closeOnEsc) {
+            if (props.show && props.closeOnEsc && (0, _utils_1.eventEffectNotPerformed)(e)) {
                 !isComposingRef.value && doUpdateShow(false);
             }
         }

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -36,7 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
 }, {
     bodyRef: import("vue").Ref<HTMLElement | null>;
     mergedClsPrefix: import("vue").Ref<string>;
@@ -222,7 +222,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickoutside: PropType<(e: MouseEvent) => void>;
     onAfterLeave: PropType<() => void>;
     onAfterEnter: PropType<() => void>;
-    onEsc: PropType<() => void>;
+    onEsc: PropType<(e: KeyboardEvent) => void>;
 }>>, {
     show: boolean | undefined;
     autoFocus: boolean;

package/lib/dropdown/src/Dropdown.d.ts

@@ -323,6 +323,7 @@ declare const dropdownProps: {
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -646,6 +647,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -1160,6 +1162,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
+    readonly internalDeactivateImmediately: BooleanConstructor;
     readonly internalSyncTargetWithParent: BooleanConstructor;
     readonly internalInheritedEventHandlers: {
         type: PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
@@ -1199,6 +1202,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly arrowPointToCenter: boolean;
     readonly displayDirective: "show" | "if";
     readonly keepAliveOnHover: boolean;
+    readonly internalDeactivateImmediately: boolean;
     readonly animated: boolean;
     readonly internalTrapFocus: boolean;
     readonly defaultShow: boolean;

package/lib/dynamic-tags/src/DynamicTags.js

@@ -92,7 +92,7 @@ exports.default = (0, vue_1.defineComponent)({
             const nextValue = externalValue !== null && externalValue !== void 0 ? externalValue : inputValueRef.value;
             if (nextValue) {
                 const tags = mergedValueRef.value.slice(0);
-                tags.push(nextValue);
+                tags.push(props.onCreate(nextValue));
                 doChange(tags);
             }
             showInputRef.value = false;

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/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;