vant 4.0.0-rc.9 → 4.0.0

package/README.md

@@ -37,7 +37,7 @@
 - 🍭 Support Tree Shaking
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
-- 🍭 Support Dark Mode (Requires upgrade to [Vant 4](https://vant-contrib.gitee.io/vant/v4/#/en-US/config-provider))
+- 🍭 Support Dark Mode
 - 🍭 Support SSR
 - 🌍 Support i18n, built-in 20+ languages
 

package/es/back-top/BackTop.d.ts

@@ -1,15 +1,9 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
 export declare const backTopProps: {
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -20,16 +14,10 @@ export declare const backTopProps: {
 };
 export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
 declare const _default: import("vue").DefineComponent<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -38,16 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -58,9 +40,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    bottom: string | number;
-    right: string | number;
+    offset: string | number;
     teleport: string | import("vue").RendererElement | null | undefined;
-    visibilityHeight: string | number;
 }>;
 export default _default;

package/es/back-top/BackTop.mjs

@@ -1,15 +1,15 @@
 import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
-import { ref, computed, Teleport, nextTick, onMounted, defineComponent } from "vue";
-import { addUnit, isObject, inBrowser, getScrollTop, createNamespace, makeNumericProp } from "../utils/index.mjs";
+import { ref, watch, computed, Teleport, nextTick, onMounted, defineComponent } from "vue";
+import { addUnit, inBrowser, numericProp, getScrollTop, createNamespace, makeNumericProp } from "../utils/index.mjs";
 import { throttle } from "../lazyload/vue-lazyload/util.mjs";
 import { useEventListener, getScrollParent } from "@vant/use";
 import { Icon } from "../icon/index.mjs";
 const [name, bem] = createNamespace("back-top");
 const backTopProps = {
-  right: makeNumericProp(30),
-  bottom: makeNumericProp(40),
+  right: numericProp,
+  bottom: numericProp,
   target: [String, Object],
-  visibilityHeight: makeNumericProp(200),
+  offset: makeNumericProp(200),
   teleport: {
     type: [String, Object],
     default: "body"
@@ -26,50 +26,52 @@ var stdin_default = defineComponent({
     attrs
   }) {
     const show = ref(false);
+    const root = ref();
     const scrollParent = ref();
-    const root = ref(null);
-    let target;
     const style = computed(() => ({
       right: addUnit(props.right),
       bottom: addUnit(props.bottom)
     }));
     const onClick = (event) => {
+      var _a;
       emit("click", event);
-      target.scrollTo({
+      (_a = scrollParent.value) == null ? void 0 : _a.scrollTo({
         top: 0,
         behavior: "smooth"
       });
     };
     const scroll = () => {
-      show.value = getScrollTop(target) >= props.visibilityHeight;
+      show.value = scrollParent.value ? getScrollTop(scrollParent.value) >= props.offset : false;
     };
     const getTarget = () => {
       const {
-        target: target2
+        target
       } = props;
-      if (typeof target2 === "string") {
-        const el = document.querySelector(props.target);
-        if (!el) {
-          throw Error("[Vant] BackTop: target element is not found.");
+      if (typeof target === "string") {
+        const el = document.querySelector(target);
+        if (el) {
+          return el;
         }
-        return el;
+        if (process.env.NODE_ENV !== "production") {
+          console.error(`[Vant] BackTop: target element "${target}" was not found, the BackTop component will not be rendered.`);
+        }
+      } else {
+        return target;
       }
-      if (isObject(target2)) {
-        return target2;
+    };
+    const updateTarget = () => {
+      if (inBrowser) {
+        nextTick(() => {
+          scrollParent.value = props.target ? getTarget() : getScrollParent(root.value);
+          scroll();
+        });
       }
-      throw Error('[Vant] BackTop: type of prop "target" should be a selector or an element object');
     };
-    useEventListener("scroll", throttle(scroll, 300), {
+    useEventListener("scroll", throttle(scroll, 100), {
       target: scrollParent
     });
-    onMounted(() => {
-      nextTick(() => {
-        if (inBrowser) {
-          target = props.target ? getTarget() : getScrollParent(root.value);
-          scrollParent.value = target;
-        }
-      });
-    });
+    onMounted(updateTarget);
+    watch(() => props.target, updateTarget);
     return () => {
       const Content = _createVNode("div", _mergeProps({
         "ref": root,

package/es/back-top/index.css

@@ -1 +1 @@
-:root{--van-back-top-size: 40px;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:.3s cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}
+:root{--van-back-top-size: 40px;--van-back-top-right: 30px;--van-back-top-bottom: 40px;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);right:var(--van-back-top-right);bottom:var(--van-back-top-bottom);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:var(--van-duration-base) cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}

package/es/back-top/index.d.ts

@@ -1,14 +1,8 @@
 export declare const BackTop: import("../utils").WithInstall<import("vue").DefineComponent<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -17,16 +11,10 @@ export declare const BackTop: import("../utils").WithInstall<import("vue").Defin
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -37,10 +25,8 @@ export declare const BackTop: import("../utils").WithInstall<import("vue").Defin
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    bottom: string | number;
-    right: string | number;
+    offset: string | number;
     teleport: string | import("vue").RendererElement | null | undefined;
-    visibilityHeight: string | number;
 }>>;
 export default BackTop;
 export { backTopProps } from './BackTop';

package/es/field/Field.mjs

@@ -201,7 +201,12 @@ var stdin_default = defineComponent({
         value = props.formatter(value);
       }
       if (inputRef.value && inputRef.value.value !== value) {
+        const {
+          selectionStart,
+          selectionEnd
+        } = inputRef.value;
         inputRef.value.value = value;
+        inputRef.value.setSelectionRange(selectionStart, selectionEnd);
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);

package/es/index.d.ts

@@ -94,4 +94,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.0.0-rc.9";
+export const version: "4.0.0";

package/es/index.mjs

@@ -87,7 +87,7 @@ import { TimePicker } from "./time-picker/index.mjs";
 import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
-const version = "4.0.0-rc.9";
+const version = "4.0.0";
 function install(app) {
   const components = [
     ActionBar,

package/es/list/List.d.ts

@@ -7,6 +7,7 @@ export declare const listProps: {
         default: number;
     };
     loading: BooleanConstructor;
+    disabled: BooleanConstructor;
     finished: BooleanConstructor;
     errorText: StringConstructor;
     direction: {
@@ -28,6 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     loading: BooleanConstructor;
+    disabled: BooleanConstructor;
     finished: BooleanConstructor;
     errorText: StringConstructor;
     direction: {
@@ -47,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     loading: BooleanConstructor;
+    disabled: BooleanConstructor;
     finished: BooleanConstructor;
     errorText: StringConstructor;
     direction: {
@@ -65,6 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:loading"?: ((...args: any[]) => any) | undefined;
 }, {
     offset: string | number;
+    disabled: boolean;
     error: boolean;
     loading: boolean;
     direction: ListDirection;

package/es/list/List.mjs

@@ -10,6 +10,7 @@ const listProps = {
   error: Boolean,
   offset: makeNumericProp(300),
   loading: Boolean,
+  disabled: Boolean,
   finished: Boolean,
   errorText: String,
   direction: makeStringProp("down"),
@@ -32,7 +33,7 @@ var stdin_default = defineComponent({
     const scrollParent = useScrollParent(root);
     const check = () => {
       nextTick(() => {
-        if (loading.value || props.finished || props.error || (tabStatus == null ? void 0 : tabStatus.value) === false) {
+        if (loading.value || props.finished || props.disabled || props.error || (tabStatus == null ? void 0 : tabStatus.value) === false) {
           return;
         }
         const {
@@ -85,7 +86,7 @@ var stdin_default = defineComponent({
       }
     };
     const renderLoading = () => {
-      if (loading.value && !props.finished) {
+      if (loading.value && !props.finished && !props.disabled) {
         return _createVNode("div", {
           "class": bem("loading")
         }, [slots.loading ? slots.loading() : _createVNode(Loading, {

package/es/list/index.d.ts

@@ -6,6 +6,7 @@ export declare const List: import("../utils").WithInstall<import("vue").DefineCo
         default: number;
     };
     loading: BooleanConstructor;
+    disabled: BooleanConstructor;
     finished: BooleanConstructor;
     errorText: StringConstructor;
     direction: {
@@ -25,6 +26,7 @@ export declare const List: import("../utils").WithInstall<import("vue").DefineCo
         default: number;
     };
     loading: BooleanConstructor;
+    disabled: BooleanConstructor;
     finished: BooleanConstructor;
     errorText: StringConstructor;
     direction: {
@@ -43,6 +45,7 @@ export declare const List: import("../utils").WithInstall<import("vue").DefineCo
     "onUpdate:loading"?: ((...args: any[]) => any) | undefined;
 }, {
     offset: string | number;
+    disabled: boolean;
     error: boolean;
     loading: boolean;
     direction: import("./types").ListDirection;

package/lib/back-top/BackTop.d.ts

@@ -1,15 +1,9 @@
 import { type PropType, type ExtractPropTypes } from 'vue';
 export declare const backTopProps: {
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -20,16 +14,10 @@ export declare const backTopProps: {
 };
 export type BackTopProps = ExtractPropTypes<typeof backTopProps>;
 declare const _default: import("vue").DefineComponent<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -38,16 +26,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -58,9 +40,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    bottom: string | number;
-    right: string | number;
+    offset: string | number;
     teleport: string | import("vue").RendererElement | null | undefined;
-    visibilityHeight: string | number;
 }>;
 export default _default;

package/lib/back-top/BackTop.js

@@ -29,10 +29,10 @@ var import_use = require("@vant/use");
 var import_icon = require("../icon");
 const [name, bem] = (0, import_utils.createNamespace)("back-top");
 const backTopProps = {
-  right: (0, import_utils.makeNumericProp)(30),
-  bottom: (0, import_utils.makeNumericProp)(40),
+  right: import_utils.numericProp,
+  bottom: import_utils.numericProp,
   target: [String, Object],
-  visibilityHeight: (0, import_utils.makeNumericProp)(200),
+  offset: (0, import_utils.makeNumericProp)(200),
   teleport: {
     type: [String, Object],
     default: "body"
@@ -49,50 +49,52 @@ var stdin_default = (0, import_vue2.defineComponent)({
     attrs
   }) {
     const show = (0, import_vue2.ref)(false);
+    const root = (0, import_vue2.ref)();
     const scrollParent = (0, import_vue2.ref)();
-    const root = (0, import_vue2.ref)(null);
-    let target;
     const style = (0, import_vue2.computed)(() => ({
       right: (0, import_utils.addUnit)(props.right),
       bottom: (0, import_utils.addUnit)(props.bottom)
     }));
     const onClick = (event) => {
+      var _a;
       emit("click", event);
-      target.scrollTo({
+      (_a = scrollParent.value) == null ? void 0 : _a.scrollTo({
         top: 0,
         behavior: "smooth"
       });
     };
     const scroll = () => {
-      show.value = (0, import_utils.getScrollTop)(target) >= props.visibilityHeight;
+      show.value = scrollParent.value ? (0, import_utils.getScrollTop)(scrollParent.value) >= props.offset : false;
     };
     const getTarget = () => {
       const {
-        target: target2
+        target
       } = props;
-      if (typeof target2 === "string") {
-        const el = document.querySelector(props.target);
-        if (!el) {
-          throw Error("[Vant] BackTop: target element is not found.");
+      if (typeof target === "string") {
+        const el = document.querySelector(target);
+        if (el) {
+          return el;
         }
-        return el;
+        if (process.env.NODE_ENV !== "production") {
+          console.error(`[Vant] BackTop: target element "${target}" was not found, the BackTop component will not be rendered.`);
+        }
+      } else {
+        return target;
       }
-      if ((0, import_utils.isObject)(target2)) {
-        return target2;
+    };
+    const updateTarget = () => {
+      if (import_utils.inBrowser) {
+        (0, import_vue2.nextTick)(() => {
+          scrollParent.value = props.target ? getTarget() : (0, import_use.getScrollParent)(root.value);
+          scroll();
+        });
       }
-      throw Error('[Vant] BackTop: type of prop "target" should be a selector or an element object');
     };
-    (0, import_use.useEventListener)("scroll", (0, import_util.throttle)(scroll, 300), {
+    (0, import_use.useEventListener)("scroll", (0, import_util.throttle)(scroll, 100), {
       target: scrollParent
     });
-    (0, import_vue2.onMounted)(() => {
-      (0, import_vue2.nextTick)(() => {
-        if (import_utils.inBrowser) {
-          target = props.target ? getTarget() : (0, import_use.getScrollParent)(root.value);
-          scrollParent.value = target;
-        }
-      });
-    });
+    (0, import_vue2.onMounted)(updateTarget);
+    (0, import_vue2.watch)(() => props.target, updateTarget);
     return () => {
       const Content = (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
         "ref": root,

package/lib/back-top/index.css

@@ -1 +1 @@
-:root{--van-back-top-size: 40px;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:.3s cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}
+:root{--van-back-top-size: 40px;--van-back-top-right: 30px;--van-back-top-bottom: 40px;--van-back-top-icon-size: 20px;--van-back-top-text-color: #fff;--van-back-top-background: var(--van-blue)}.van-back-top{position:fixed;display:flex;align-items:center;justify-content:center;width:var(--van-back-top-size);height:var(--van-back-top-size);right:var(--van-back-top-right);bottom:var(--van-back-top-bottom);cursor:pointer;color:var(--van-back-top-text-color);border-radius:var(--van-radius-max);box-shadow:0 2px 8px rgba(0,0,0,.12);transform:scale(0);transition:var(--van-duration-base) cubic-bezier(.25,.8,.5,1);background-color:var(--van-back-top-background)}.van-back-top:active{opacity:var(--van-active-opacity)}.van-back-top--active{transform:scale(1)}.van-back-top__icon{font-size:var(--van-back-top-icon-size);font-weight:var(--van-font-bold)}

package/lib/back-top/index.d.ts

@@ -1,14 +1,8 @@
 export declare const BackTop: import("../utils").WithInstall<import("vue").DefineComponent<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -17,16 +11,10 @@ export declare const BackTop: import("../utils").WithInstall<import("vue").Defin
         default: string;
     };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    right: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
-    bottom: {
-        type: (NumberConstructor | StringConstructor)[];
-        default: number;
-    };
+    right: (NumberConstructor | StringConstructor)[];
+    bottom: (NumberConstructor | StringConstructor)[];
     target: import("vue").PropType<string | import("vue").RendererElement | null | undefined>;
-    visibilityHeight: {
+    offset: {
         type: (NumberConstructor | StringConstructor)[];
         default: number;
     };
@@ -37,10 +25,8 @@ export declare const BackTop: import("../utils").WithInstall<import("vue").Defin
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
-    bottom: string | number;
-    right: string | number;
+    offset: string | number;
     teleport: string | import("vue").RendererElement | null | undefined;
-    visibilityHeight: string | number;
 }>>;
 export default BackTop;
 export { backTopProps } from './BackTop';

package/lib/field/Field.js

@@ -225,7 +225,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
         value = props.formatter(value);
       }
       if (inputRef.value && inputRef.value.value !== value) {
+        const {
+          selectionStart,
+          selectionEnd
+        } = inputRef.value;
         inputRef.value.value = value;
+        inputRef.value.setSelectionRange(selectionStart, selectionEnd);
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);