vant 4.0.1 → 4.0.3

package/README.md

@@ -81,6 +81,10 @@ app.use(Button);
 
 See more in [Quickstart](https://vant-ui.github.io/vant#/en-US/quickstart).
 
+## Start On Visual Studio Code Web
+
+[https://github.dev/youzan/vant](https://github.dev/youzan/vant)
+
 ## Browser Support
 
 Vant 2 supports modern browsers and Android >= 4.0、iOS >= 8.0.

package/es/cell/Cell.mjs

@@ -43,11 +43,16 @@ var stdin_default = defineComponent({
       }
     };
     const renderTitle = () => {
+      var _a;
       if (slots.title || isDef(props.title)) {
+        const titleSlot = (_a = slots.title) == null ? void 0 : _a.call(slots);
+        if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+          return;
+        }
         return _createVNode("div", {
           "class": [bem("title"), props.titleClass],
           "style": props.titleStyle
-        }, [slots.title ? slots.title() : _createVNode("span", null, [props.title]), renderLabel()]);
+        }, [titleSlot || _createVNode("span", null, [props.title]), renderLabel()]);
       }
     };
     const renderValue = () => {

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,13 +203,15 @@ var stdin_default = defineComponent({
         value = props.formatter(value);
       }
       if (inputRef.value && inputRef.value.value !== value) {
-        const {
-          selectionStart,
-          selectionEnd
-        } = inputRef.value;
-        inputRef.value.value = value;
-        if (state.focused) {
-          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) {
@@ -432,9 +436,14 @@ var stdin_default = defineComponent({
     return () => {
       const disabled = getProp("disabled");
       const labelAlign = getProp("labelAlign");
-      const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
-      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
+      const renderTitle = () => {
+        const Label = renderLabel();
+        if (labelAlign === "top") {
+          return [LeftIcon, Label].filter(Boolean);
+        }
+        return Label || [];
+      };
       return _createVNode(Cell, {
         "size": props.size,
         "class": bem({
@@ -454,7 +463,7 @@ var stdin_default = defineComponent({
         "arrowDirection": props.arrowDirection
       }, {
         icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
-        title: Label || labelAlign === "top" ? renderTitle : null,
+        title: renderTitle,
         value: renderFieldBody,
         extra: slots.extra
       });

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,14 @@ var stdin_default = defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    onMounted(() => {
+      nextTick(() => {
+        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.1";
+export const version: "4.0.3";

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

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/cell/Cell.js

@@ -67,11 +67,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const renderTitle = () => {
+      var _a;
       if (slots.title || (0, import_utils.isDef)(props.title)) {
+        const titleSlot = (_a = slots.title) == null ? void 0 : _a.call(slots);
+        if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+          return;
+        }
         return (0, import_vue.createVNode)("div", {
           "class": [bem("title"), props.titleClass],
           "style": props.titleStyle
-        }, [slots.title ? slots.title() : (0, import_vue.createVNode)("span", null, [props.title]), renderLabel()]);
+        }, [titleSlot || (0, import_vue.createVNode)("span", null, [props.title]), renderLabel()]);
       }
     };
     const renderValue = () => {

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,13 +227,15 @@ 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;
-        if (state.focused) {
-          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) {
@@ -456,9 +460,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
     return () => {
       const disabled = getProp("disabled");
       const labelAlign = getProp("labelAlign");
-      const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
-      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
+      const renderTitle = () => {
+        const Label = renderLabel();
+        if (labelAlign === "top") {
+          return [LeftIcon, Label].filter(Boolean);
+        }
+        return Label || [];
+      };
       return (0, import_vue.createVNode)(import_cell.Cell, {
         "size": props.size,
         "class": bem({
@@ -478,7 +487,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "arrowDirection": props.arrowDirection
       }, {
         icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
-        title: Label || labelAlign === "top" ? renderTitle : null,
+        title: renderTitle,
         value: renderFieldBody,
         extra: slots.extra
       });

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,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    (0, import_vue2.onMounted)(() => {
+      (0, import_vue2.nextTick)(() => {
+        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.1";
+export const version: "4.0.3";

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

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) {
@@ -3478,11 +3479,16 @@ var stdin_default$1l = vue.defineComponent({
       }
     };
     const renderTitle = () => {
+      var _a;
       if (slots.title || isDef(props.title)) {
+        const titleSlot = (_a = slots.title) == null ? void 0 : _a.call(slots);
+        if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+          return;
+        }
         return vue.createVNode("div", {
           "class": [bem$1a("title"), props.titleClass],
           "style": props.titleStyle
-        }, [slots.title ? slots.title() : vue.createVNode("span", null, [props.title]), renderLabel()]);
+        }, [titleSlot || vue.createVNode("span", null, [props.title]), renderLabel()]);
       }
     };
     const renderValue = () => {
@@ -3976,7 +3982,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);
@@ -3985,13 +3993,15 @@ 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;
-        if (state.focused) {
-          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) {
@@ -4216,9 +4226,14 @@ var stdin_default$1j = vue.defineComponent({
     return () => {
       const disabled = getProp("disabled");
       const labelAlign = getProp("labelAlign");
-      const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
-      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
+      const renderTitle = () => {
+        const Label = renderLabel();
+        if (labelAlign === "top") {
+          return [LeftIcon, Label].filter(Boolean);
+        }
+        return Label || [];
+      };
       return vue.createVNode(Cell, {
         "size": props.size,
         "class": bem$18({
@@ -4238,7 +4253,7 @@ var stdin_default$1j = vue.defineComponent({
         "arrowDirection": props.arrowDirection
       }, {
         icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
-        title: Label || labelAlign === "top" ? renderTitle : null,
+        title: renderTitle,
         value: renderFieldBody,
         extra: slots.extra
       });
@@ -6502,8 +6517,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;
@@ -6551,6 +6568,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
@@ -6585,6 +6603,14 @@ var stdin_default$13 = vue.defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    vue.onMounted(() => {
+      vue.nextTick(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          onLoad();
+        }
+      });
+    });
     return () => {
       var _a;
       return vue.createVNode("div", {
@@ -14821,7 +14847,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.1";
+const version = "4.0.3";
 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) {
@@ -3476,11 +3477,16 @@ var stdin_default$1l = defineComponent({
       }
     };
     const renderTitle = () => {
+      var _a;
       if (slots.title || isDef(props.title)) {
+        const titleSlot = (_a = slots.title) == null ? void 0 : _a.call(slots);
+        if (Array.isArray(titleSlot) && titleSlot.length === 0) {
+          return;
+        }
         return createVNode("div", {
           "class": [bem$1a("title"), props.titleClass],
           "style": props.titleStyle
-        }, [slots.title ? slots.title() : createVNode("span", null, [props.title]), renderLabel()]);
+        }, [titleSlot || createVNode("span", null, [props.title]), renderLabel()]);
       }
     };
     const renderValue = () => {
@@ -3974,7 +3980,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);
@@ -3983,13 +3991,15 @@ 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;
-        if (state.focused) {
-          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) {
@@ -4214,9 +4224,14 @@ var stdin_default$1j = defineComponent({
     return () => {
       const disabled = getProp("disabled");
       const labelAlign = getProp("labelAlign");
-      const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
-      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
+      const renderTitle = () => {
+        const Label = renderLabel();
+        if (labelAlign === "top") {
+          return [LeftIcon, Label].filter(Boolean);
+        }
+        return Label || [];
+      };
       return createVNode(Cell, {
         "size": props.size,
         "class": bem$18({
@@ -4236,7 +4251,7 @@ var stdin_default$1j = defineComponent({
         "arrowDirection": props.arrowDirection
       }, {
         icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
-        title: Label || labelAlign === "top" ? renderTitle : null,
+        title: renderTitle,
         value: renderFieldBody,
         extra: slots.extra
       });
@@ -6500,8 +6515,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;
@@ -6549,6 +6566,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
@@ -6583,6 +6601,14 @@ var stdin_default$13 = defineComponent({
         $Lazyload.$off("error", onLazyLoadError);
       });
     }
+    onMounted(() => {
+      nextTick(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          onLoad();
+        }
+      });
+    });
     return () => {
       var _a;
       return createVNode("div", {
@@ -14819,7 +14845,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.1";
+const version = "4.0.3";
 function install(app) {
   const components = [
     ActionBar,