vant 4.0.0 → 4.0.2

package/README.md

@@ -11,7 +11,7 @@
     <img src="https://img.shields.io/github/workflow/status/vant-ui/vant/CI/dev?style=flat-square" alt="CI Status" />
     <img src="https://img.shields.io/codecov/c/github/vant-ui/vant/dev.svg?style=flat-square&color=#4fc08d" alt="Coverage Status" />
     <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square&color=#4fc08d" alt="downloads" />
-    <img src="https://img.badgesize.io/https://unpkg.com/vant@3/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
 </p>
 
 <p align="center">
@@ -38,6 +38,7 @@
 - 🍭 Support Custom Theme
 - 🍭 Support Accessibility (still improving)
 - 🍭 Support Dark Mode
+- 🍭 Support Nuxt 3
 - 🍭 Support SSR
 - 🌍 Support i18n, built-in 20+ languages
 

package/es/composables/use-height.mjs

@@ -1,5 +1,6 @@
 import { useRect } from "@vant/use";
-import { ref, onMounted, nextTick } from "vue";
+import { ref, onMounted, nextTick, watch } from "vue";
+import { windowHeight, windowWidth } from "../utils/index.mjs";
 import { onPopupReopen } from "./on-popup-reopen.mjs";
 const useHeight = (element, withSafeArea) => {
   const height = ref();
@@ -15,6 +16,7 @@ const useHeight = (element, withSafeArea) => {
     }
   });
   onPopupReopen(() => nextTick(setHeight));
+  watch([windowWidth, windowHeight], setHeight);
   return height;
 };
 export {

package/es/field/Field.mjs

@@ -192,7 +192,9 @@ var stdin_default = defineComponent({
       return value;
     };
     const updateValue = (value, trigger = "onChange") => {
+      const originalValue = value;
       value = limitValueLength(value);
+      const isExceedLimit = value !== originalValue;
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = formatNumber(value, isNumber, isNumber);
@@ -201,12 +203,16 @@ 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 (state.focused && isExceedLimit) {
+          const {
+            selectionStart,
+            selectionEnd
+          } = inputRef.value;
+          inputRef.value.value = value;
+          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+        } else {
+          inputRef.value.value = value;
+        }
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);

package/es/image/Image.mjs

@@ -1,5 +1,5 @@
 import { withDirectives as _withDirectives, mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
-import { ref, watch, computed, nextTick, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
+import { ref, watch, computed, nextTick, onMounted, onBeforeUnmount, defineComponent, getCurrentInstance } from "vue";
 import { isDef, addUnit, inBrowser, truthProp, numericProp, makeStringProp, createNamespace } from "../utils/index.mjs";
 import { Icon } from "../icon/index.mjs";
 const [name, bem] = createNamespace("image");
@@ -51,8 +51,10 @@ var stdin_default = defineComponent({
       loading.value = true;
     });
     const onLoad = (event) => {
-      loading.value = false;
-      emit("load", event);
+      if (loading.value) {
+        loading.value = false;
+        emit("load", event);
+      }
     };
     const onError = (event) => {
       error.value = true;
@@ -100,6 +102,7 @@ var stdin_default = defineComponent({
         }, attrs), null), [[_resolveDirective("lazy"), props.src]]);
       }
       return _createVNode("img", _mergeProps({
+        "ref": imageRef,
         "src": props.src,
         "onLoad": onLoad,
         "onError": onError
@@ -134,6 +137,12 @@ var stdin_default = defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    onMounted(() => {
+      var _a;
+      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+        onLoad();
+      }
+    });
     return () => {
       var _a;
       return _createVNode("div", {

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";
+export const version: "4.0.2";

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";
+const version = "4.0.2";
 function install(app) {
   const components = [
     ActionBar,

package/es/picker/Picker.mjs

@@ -59,6 +59,7 @@ var stdin_default = defineComponent({
     });
     const hasOptions = computed(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const selectedIndexes = computed(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
     const setValue = (index, value) => {
       if (selectedValues.value[index] !== value) {
         const newValues = selectedValues.value.slice(0);
@@ -68,7 +69,8 @@ var stdin_default = defineComponent({
     };
     const getEventParams = () => ({
       selectedValues: selectedValues.value.slice(0),
-      selectedOptions: selectedOptions.value
+      selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value
     });
     const onChange = (value, columnIndex) => {
       setValue(columnIndex, value);

package/es/picker/types.d.ts

@@ -37,6 +37,7 @@ export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
 export type PickerConfirmEventParams = {
     selectedValues: Numeric[];
     selectedOptions: Array<PickerOption | undefined>;
+    selectedIndexes: number[];
 };
 export type PickerCancelEventParams = PickerConfirmEventParams;
 export type PickerChangeEventParams = PickerConfirmEventParams & {

package/es/utils/mount-component.mjs

@@ -1,5 +1,5 @@
 import { createApp, reactive } from "vue";
-import { extend } from "../utils/index.mjs";
+import { extend } from "./basic.mjs";
 import { useExpose } from "../composables/use-expose.mjs";
 function usePopupState() {
   const state = reactive({

package/lib/composables/use-height.js

@@ -22,6 +22,7 @@ __export(stdin_exports, {
 module.exports = __toCommonJS(stdin_exports);
 var import_use = require("@vant/use");
 var import_vue = require("vue");
+var import_utils = require("../utils");
 var import_on_popup_reopen = require("./on-popup-reopen");
 const useHeight = (element, withSafeArea) => {
   const height = (0, import_vue.ref)();
@@ -37,5 +38,6 @@ const useHeight = (element, withSafeArea) => {
     }
   });
   (0, import_on_popup_reopen.onPopupReopen)(() => (0, import_vue.nextTick)(setHeight));
+  (0, import_vue.watch)([import_utils.windowWidth, import_utils.windowHeight], setHeight);
   return height;
 };

package/lib/field/Field.js

@@ -216,7 +216,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       return value;
     };
     const updateValue = (value, trigger = "onChange") => {
+      const originalValue = value;
       value = limitValueLength(value);
+      const isExceedLimit = value !== originalValue;
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = (0, import_utils.formatNumber)(value, isNumber, isNumber);
@@ -225,12 +227,16 @@ 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 (state.focused && isExceedLimit) {
+          const {
+            selectionStart,
+            selectionEnd
+          } = inputRef.value;
+          inputRef.value.value = value;
+          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+        } else {
+          inputRef.value.value = value;
+        }
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);

package/lib/image/Image.js

@@ -74,8 +74,10 @@ var stdin_default = (0, import_vue2.defineComponent)({
       loading.value = true;
     });
     const onLoad = (event) => {
-      loading.value = false;
-      emit("load", event);
+      if (loading.value) {
+        loading.value = false;
+        emit("load", event);
+      }
     };
     const onError = (event) => {
       error.value = true;
@@ -123,6 +125,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }, attrs), null), [[(0, import_vue.resolveDirective)("lazy"), props.src]]);
       }
       return (0, import_vue.createVNode)("img", (0, import_vue.mergeProps)({
+        "ref": imageRef,
         "src": props.src,
         "onLoad": onLoad,
         "onError": onError
@@ -157,6 +160,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    (0, import_vue2.onMounted)(() => {
+      var _a;
+      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+        onLoad();
+      }
+    });
     return () => {
       var _a;
       return (0, import_vue.createVNode)("div", {

package/lib/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";
+export const version: "4.0.2";

package/lib/index.js

@@ -202,7 +202,7 @@ __reExport(stdin_exports, require("./time-picker"), module.exports);
 __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./tree-select"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
-const version = "4.0.0";
+const version = "4.0.2";
 function install(app) {
   const components = [
     import_action_bar.ActionBar,

package/lib/picker/Picker.js

@@ -89,6 +89,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     });
     const hasOptions = (0, import_vue2.computed)(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = (0, import_vue2.computed)(() => currentColumns.value.map((options, index) => (0, import_utils2.findOptionByValue)(options, selectedValues.value[index], fields.value)));
+    const selectedIndexes = (0, import_vue2.computed)(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
     const setValue = (index, value) => {
       if (selectedValues.value[index] !== value) {
         const newValues = selectedValues.value.slice(0);
@@ -98,7 +99,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     };
     const getEventParams = () => ({
       selectedValues: selectedValues.value.slice(0),
-      selectedOptions: selectedOptions.value
+      selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value
     });
     const onChange = (value, columnIndex) => {
       setValue(columnIndex, value);

package/lib/picker/types.d.ts

@@ -37,6 +37,7 @@ export type PickerInstance = ComponentPublicInstance<PickerProps, PickerExpose>;
 export type PickerConfirmEventParams = {
     selectedValues: Numeric[];
     selectedOptions: Array<PickerOption | undefined>;
+    selectedIndexes: number[];
 };
 export type PickerCancelEventParams = PickerConfirmEventParams;
 export type PickerChangeEventParams = PickerConfirmEventParams & {

package/lib/utils/mount-component.js

@@ -22,7 +22,7 @@ __export(stdin_exports, {
 });
 module.exports = __toCommonJS(stdin_exports);
 var import_vue = require("vue");
-var import_utils = require("../utils");
+var import_basic = require("./basic");
 var import_use_expose = require("../composables/use-expose");
 function usePopupState() {
   const state = (0, import_vue.reactive)({
@@ -32,7 +32,7 @@ function usePopupState() {
     state.show = show;
   };
   const open = (props) => {
-    (0, import_utils.extend)(state, props, { transitionAppear: true });
+    (0, import_basic.extend)(state, props, { transitionAppear: true });
     toggle(true);
   };
   const close = () => toggle(false);

package/lib/vant.cjs.js

@@ -428,6 +428,7 @@ const useHeight = (element, withSafeArea) => {
     }
   });
   onPopupReopen(() => vue.nextTick(setHeight));
+  vue.watch([windowWidth, windowHeight], setHeight);
   return height;
 };
 function usePlaceholder(contentRef, bem2) {
@@ -3151,6 +3152,7 @@ var stdin_default$1n = vue.defineComponent({
     });
     const hasOptions = vue.computed(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = vue.computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const selectedIndexes = vue.computed(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
     const setValue = (index, value) => {
       if (selectedValues.value[index] !== value) {
         const newValues = selectedValues.value.slice(0);
@@ -3160,7 +3162,8 @@ var stdin_default$1n = vue.defineComponent({
     };
     const getEventParams = () => ({
       selectedValues: selectedValues.value.slice(0),
-      selectedOptions: selectedOptions.value
+      selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value
     });
     const onChange = (value, columnIndex) => {
       setValue(columnIndex, value);
@@ -3974,7 +3977,9 @@ var stdin_default$1j = vue.defineComponent({
       return value;
     };
     const updateValue = (value, trigger = "onChange") => {
+      const originalValue = value;
       value = limitValueLength(value);
+      const isExceedLimit = value !== originalValue;
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = formatNumber(value, isNumber, isNumber);
@@ -3983,12 +3988,16 @@ var stdin_default$1j = vue.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 (state.focused && isExceedLimit) {
+          const {
+            selectionStart,
+            selectionEnd
+          } = inputRef.value;
+          inputRef.value.value = value;
+          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+        } else {
+          inputRef.value.value = value;
+        }
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);
@@ -6498,8 +6507,10 @@ var stdin_default$13 = vue.defineComponent({
       loading.value = true;
     });
     const onLoad = (event) => {
-      loading.value = false;
-      emit("load", event);
+      if (loading.value) {
+        loading.value = false;
+        emit("load", event);
+      }
     };
     const onError = (event) => {
       error.value = true;
@@ -6547,6 +6558,7 @@ var stdin_default$13 = vue.defineComponent({
         }, attrs), null), [[vue.resolveDirective("lazy"), props.src]]);
       }
       return vue.createVNode("img", vue.mergeProps({
+        "ref": imageRef,
         "src": props.src,
         "onLoad": onLoad,
         "onError": onError
@@ -6581,6 +6593,12 @@ var stdin_default$13 = vue.defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    vue.onMounted(() => {
+      var _a;
+      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+        onLoad();
+      }
+    });
     return () => {
       var _a;
       return vue.createVNode("div", {
@@ -14817,7 +14835,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0";
+const version = "4.0.2";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.es.js

@@ -426,6 +426,7 @@ const useHeight = (element, withSafeArea) => {
     }
   });
   onPopupReopen(() => nextTick(setHeight));
+  watch([windowWidth, windowHeight], setHeight);
   return height;
 };
 function usePlaceholder(contentRef, bem2) {
@@ -3149,6 +3150,7 @@ var stdin_default$1n = defineComponent({
     });
     const hasOptions = computed(() => currentColumns.value.some((options) => options.length));
     const selectedOptions = computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+    const selectedIndexes = computed(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
     const setValue = (index, value) => {
       if (selectedValues.value[index] !== value) {
         const newValues = selectedValues.value.slice(0);
@@ -3158,7 +3160,8 @@ var stdin_default$1n = defineComponent({
     };
     const getEventParams = () => ({
       selectedValues: selectedValues.value.slice(0),
-      selectedOptions: selectedOptions.value
+      selectedOptions: selectedOptions.value,
+      selectedIndexes: selectedIndexes.value
     });
     const onChange = (value, columnIndex) => {
       setValue(columnIndex, value);
@@ -3972,7 +3975,9 @@ var stdin_default$1j = defineComponent({
       return value;
     };
     const updateValue = (value, trigger = "onChange") => {
+      const originalValue = value;
       value = limitValueLength(value);
+      const isExceedLimit = value !== originalValue;
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = formatNumber(value, isNumber, isNumber);
@@ -3981,12 +3986,16 @@ var stdin_default$1j = 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 (state.focused && isExceedLimit) {
+          const {
+            selectionStart,
+            selectionEnd
+          } = inputRef.value;
+          inputRef.value.value = value;
+          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+        } else {
+          inputRef.value.value = value;
+        }
       }
       if (value !== props.modelValue) {
         emit("update:modelValue", value);
@@ -6496,8 +6505,10 @@ var stdin_default$13 = defineComponent({
       loading.value = true;
     });
     const onLoad = (event) => {
-      loading.value = false;
-      emit("load", event);
+      if (loading.value) {
+        loading.value = false;
+        emit("load", event);
+      }
     };
     const onError = (event) => {
       error.value = true;
@@ -6545,6 +6556,7 @@ var stdin_default$13 = defineComponent({
         }, attrs), null), [[resolveDirective("lazy"), props.src]]);
       }
       return createVNode("img", mergeProps({
+        "ref": imageRef,
         "src": props.src,
         "onLoad": onLoad,
         "onError": onError
@@ -6579,6 +6591,12 @@ var stdin_default$13 = defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    onMounted(() => {
+      var _a;
+      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+        onLoad();
+      }
+    });
     return () => {
       var _a;
       return createVNode("div", {
@@ -14815,7 +14833,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0";
+const version = "4.0.2";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -795,6 +795,7 @@
       }
     });
     onPopupReopen(() => vue.nextTick(setHeight));
+    vue.watch([windowWidth, windowHeight], setHeight);
     return height2;
   };
   function usePlaceholder(contentRef, bem2) {
@@ -3509,6 +3510,7 @@
       });
       const hasOptions = vue.computed(() => currentColumns.value.some((options) => options.length));
       const selectedOptions = vue.computed(() => currentColumns.value.map((options, index) => findOptionByValue(options, selectedValues.value[index], fields.value)));
+      const selectedIndexes = vue.computed(() => currentColumns.value.map((options, index) => options.findIndex((option) => option[fields.value.value] === selectedValues.value[index])));
       const setValue = (index, value) => {
         if (selectedValues.value[index] !== value) {
           const newValues = selectedValues.value.slice(0);
@@ -3518,7 +3520,8 @@
       };
       const getEventParams = () => ({
         selectedValues: selectedValues.value.slice(0),
-        selectedOptions: selectedOptions.value
+        selectedOptions: selectedOptions.value,
+        selectedIndexes: selectedIndexes.value
       });
       const onChange = (value, columnIndex) => {
         setValue(columnIndex, value);
@@ -4332,7 +4335,9 @@
         return value;
       };
       const updateValue = (value, trigger = "onChange") => {
+        const originalValue = value;
         value = limitValueLength(value);
+        const isExceedLimit = value !== originalValue;
         if (props.type === "number" || props.type === "digit") {
           const isNumber = props.type === "number";
           value = formatNumber(value, isNumber, isNumber);
@@ -4341,12 +4346,16 @@
           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 (state.focused && isExceedLimit) {
+            const {
+              selectionStart,
+              selectionEnd
+            } = inputRef.value;
+            inputRef.value.value = value;
+            inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+          } else {
+            inputRef.value.value = value;
+          }
         }
         if (value !== props.modelValue) {
           emit("update:modelValue", value);
@@ -6853,8 +6862,10 @@
         loading.value = true;
       });
       const onLoad = (event) => {
-        loading.value = false;
-        emit("load", event);
+        if (loading.value) {
+          loading.value = false;
+          emit("load", event);
+        }
       };
       const onError = (event) => {
         error.value = true;
@@ -6902,6 +6913,7 @@
           }, attrs), null), [[vue.resolveDirective("lazy"), props.src]]);
         }
         return vue.createVNode("img", vue.mergeProps({
+          "ref": imageRef,
           "src": props.src,
           "onLoad": onLoad,
           "onError": onError
@@ -6936,6 +6948,12 @@
           $Lazyload.$off("error", onLazyLoadError);
         });
       }
+      vue.onMounted(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          onLoad();
+        }
+      });
       return () => {
         var _a;
         return vue.createVNode("div", {
@@ -16023,7 +16041,7 @@
       });
     }
   };
-  const version = "4.0.0";
+  const version = "4.0.2";
   function install(app) {
     const components = [
       ActionBar,