vant 4.0.2 → 4.0.4

package/README.md

@@ -8,7 +8,6 @@
 
 <p align="center">
     <img src="https://img.shields.io/npm/v/vant?style=flat-square" alt="npm version" />
-    <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/lib/vant.min.js?compression=gzip&style=flat-square&label=gzip%20size&color=#4fc08d" alt="Gzip Size" />
@@ -81,6 +80,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/field/Field.mjs

@@ -179,6 +179,7 @@ var stdin_default = defineComponent({
       }
     };
     const limitValueLength = (value) => {
+      var _a;
       const {
         maxlength
       } = props;
@@ -187,6 +188,13 @@ var stdin_default = defineComponent({
         if (modelValue && getStringLength(modelValue) === +maxlength) {
           return modelValue;
         }
+        const selectionEnd = (_a = inputRef.value) == null ? void 0 : _a.selectionEnd;
+        if (state.focused && selectionEnd) {
+          const valueArr = [...value];
+          const exceededLength = valueArr.length - +maxlength;
+          valueArr.splice(selectionEnd - exceededLength, exceededLength);
+          return valueArr.join("");
+        }
         return cutString(value, +maxlength);
       }
       return value;
@@ -194,22 +202,47 @@ var stdin_default = defineComponent({
     const updateValue = (value, trigger = "onChange") => {
       const originalValue = value;
       value = limitValueLength(value);
-      const isExceedLimit = value !== originalValue;
+      const limitDiffLen = getStringLength(originalValue) - getStringLength(value);
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = formatNumber(value, isNumber, isNumber);
       }
+      let formatterDiffLen = 0;
       if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value);
+        const {
+          formatter,
+          maxlength
+        } = props;
+        value = formatter(value);
+        if (isDef(maxlength) && getStringLength(value) > maxlength) {
+          value = cutString(value, +maxlength);
+        }
+        if (inputRef.value && state.focused) {
+          const {
+            selectionEnd
+          } = inputRef.value;
+          const bcoVal = cutString(originalValue, selectionEnd);
+          formatterDiffLen = getStringLength(formatter(bcoVal)) - getStringLength(bcoVal);
+        }
       }
       if (inputRef.value && inputRef.value.value !== value) {
-        if (state.focused && isExceedLimit) {
-          const {
+        if (state.focused) {
+          let {
             selectionStart,
             selectionEnd
           } = inputRef.value;
           inputRef.value.value = value;
-          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+          if (isDef(selectionStart) && isDef(selectionEnd)) {
+            const valueLen = getStringLength(value);
+            if (limitDiffLen) {
+              selectionStart -= limitDiffLen;
+              selectionEnd -= limitDiffLen;
+            } else if (formatterDiffLen) {
+              selectionStart += formatterDiffLen;
+              selectionEnd += formatterDiffLen;
+            }
+            inputRef.value.setSelectionRange(Math.min(selectionStart, valueLen), Math.min(selectionEnd, valueLen));
+          }
         } else {
           inputRef.value.value = value;
         }
@@ -436,9 +469,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({
@@ -458,7 +496,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

@@ -56,6 +56,14 @@ var stdin_default = defineComponent({
         emit("load", event);
       }
     };
+    const triggerLoad = () => {
+      const loadEvent = new Event("load");
+      Object.defineProperty(loadEvent, "target", {
+        value: imageRef.value,
+        enumerable: true
+      });
+      onLoad(loadEvent);
+    };
     const onError = (event) => {
       error.value = true;
       loading.value = false;
@@ -113,7 +121,7 @@ var stdin_default = defineComponent({
     }) => {
       const check = () => {
         if (el === imageRef.value && loading.value) {
-          onLoad();
+          triggerLoad();
         }
       };
       if (imageRef.value) {
@@ -138,10 +146,12 @@ var stdin_default = defineComponent({
       });
     }
     onMounted(() => {
-      var _a;
-      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
-        onLoad();
-      }
+      nextTick(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          triggerLoad();
+        }
+      });
     });
     return () => {
       var _a;

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.2";
+export const version: "4.0.4";

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

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/field/Field.js

@@ -203,6 +203,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
     };
     const limitValueLength = (value) => {
+      var _a;
       const {
         maxlength
       } = props;
@@ -211,6 +212,13 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if (modelValue && (0, import_utils2.getStringLength)(modelValue) === +maxlength) {
           return modelValue;
         }
+        const selectionEnd = (_a = inputRef.value) == null ? void 0 : _a.selectionEnd;
+        if (state.focused && selectionEnd) {
+          const valueArr = [...value];
+          const exceededLength = valueArr.length - +maxlength;
+          valueArr.splice(selectionEnd - exceededLength, exceededLength);
+          return valueArr.join("");
+        }
         return (0, import_utils2.cutString)(value, +maxlength);
       }
       return value;
@@ -218,22 +226,47 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const updateValue = (value, trigger = "onChange") => {
       const originalValue = value;
       value = limitValueLength(value);
-      const isExceedLimit = value !== originalValue;
+      const limitDiffLen = (0, import_utils2.getStringLength)(originalValue) - (0, import_utils2.getStringLength)(value);
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = (0, import_utils.formatNumber)(value, isNumber, isNumber);
       }
+      let formatterDiffLen = 0;
       if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value);
+        const {
+          formatter,
+          maxlength
+        } = props;
+        value = formatter(value);
+        if ((0, import_utils.isDef)(maxlength) && (0, import_utils2.getStringLength)(value) > maxlength) {
+          value = (0, import_utils2.cutString)(value, +maxlength);
+        }
+        if (inputRef.value && state.focused) {
+          const {
+            selectionEnd
+          } = inputRef.value;
+          const bcoVal = (0, import_utils2.cutString)(originalValue, selectionEnd);
+          formatterDiffLen = (0, import_utils2.getStringLength)(formatter(bcoVal)) - (0, import_utils2.getStringLength)(bcoVal);
+        }
       }
       if (inputRef.value && inputRef.value.value !== value) {
-        if (state.focused && isExceedLimit) {
-          const {
+        if (state.focused) {
+          let {
             selectionStart,
             selectionEnd
           } = inputRef.value;
           inputRef.value.value = value;
-          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+          if ((0, import_utils.isDef)(selectionStart) && (0, import_utils.isDef)(selectionEnd)) {
+            const valueLen = (0, import_utils2.getStringLength)(value);
+            if (limitDiffLen) {
+              selectionStart -= limitDiffLen;
+              selectionEnd -= limitDiffLen;
+            } else if (formatterDiffLen) {
+              selectionStart += formatterDiffLen;
+              selectionEnd += formatterDiffLen;
+            }
+            inputRef.value.setSelectionRange(Math.min(selectionStart, valueLen), Math.min(selectionEnd, valueLen));
+          }
         } else {
           inputRef.value.value = value;
         }
@@ -460,9 +493,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({
@@ -482,7 +520,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

@@ -79,6 +79,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         emit("load", event);
       }
     };
+    const triggerLoad = () => {
+      const loadEvent = new Event("load");
+      Object.defineProperty(loadEvent, "target", {
+        value: imageRef.value,
+        enumerable: true
+      });
+      onLoad(loadEvent);
+    };
     const onError = (event) => {
       error.value = true;
       loading.value = false;
@@ -136,7 +144,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     }) => {
       const check = () => {
         if (el === imageRef.value && loading.value) {
-          onLoad();
+          triggerLoad();
         }
       };
       if (imageRef.value) {
@@ -161,10 +169,12 @@ var stdin_default = (0, import_vue2.defineComponent)({
       });
     }
     (0, import_vue2.onMounted)(() => {
-      var _a;
-      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
-        onLoad();
-      }
+      (0, import_vue2.nextTick)(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          triggerLoad();
+        }
+      });
     });
     return () => {
       var _a;

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.2";
+export const version: "4.0.4";

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

package/lib/vant.cjs.js

@@ -3479,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 = () => {
@@ -3964,6 +3969,7 @@ var stdin_default$1j = vue.defineComponent({
       }
     };
     const limitValueLength = (value) => {
+      var _a;
       const {
         maxlength
       } = props;
@@ -3972,6 +3978,13 @@ var stdin_default$1j = vue.defineComponent({
         if (modelValue && getStringLength(modelValue) === +maxlength) {
           return modelValue;
         }
+        const selectionEnd = (_a = inputRef.value) == null ? void 0 : _a.selectionEnd;
+        if (state.focused && selectionEnd) {
+          const valueArr = [...value];
+          const exceededLength = valueArr.length - +maxlength;
+          valueArr.splice(selectionEnd - exceededLength, exceededLength);
+          return valueArr.join("");
+        }
         return cutString(value, +maxlength);
       }
       return value;
@@ -3979,22 +3992,47 @@ var stdin_default$1j = vue.defineComponent({
     const updateValue = (value, trigger = "onChange") => {
       const originalValue = value;
       value = limitValueLength(value);
-      const isExceedLimit = value !== originalValue;
+      const limitDiffLen = getStringLength(originalValue) - getStringLength(value);
       if (props.type === "number" || props.type === "digit") {
         const isNumber = props.type === "number";
         value = formatNumber(value, isNumber, isNumber);
       }
+      let formatterDiffLen = 0;
       if (props.formatter && trigger === props.formatTrigger) {
-        value = props.formatter(value);
+        const {
+          formatter,
+          maxlength
+        } = props;
+        value = formatter(value);
+        if (isDef(maxlength) && getStringLength(value) > maxlength) {
+          value = cutString(value, +maxlength);
+        }
+        if (inputRef.value && state.focused) {
+          const {
+            selectionEnd
+          } = inputRef.value;
+          const bcoVal = cutString(originalValue, selectionEnd);
+          formatterDiffLen = getStringLength(formatter(bcoVal)) - getStringLength(bcoVal);
+        }
       }
       if (inputRef.value && inputRef.value.value !== value) {
-        if (state.focused && isExceedLimit) {
-          const {
+        if (state.focused) {
+          let {
             selectionStart,
             selectionEnd
           } = inputRef.value;
           inputRef.value.value = value;
-          inputRef.value.setSelectionRange(selectionStart - 1, selectionEnd - 1);
+          if (isDef(selectionStart) && isDef(selectionEnd)) {
+            const valueLen = getStringLength(value);
+            if (limitDiffLen) {
+              selectionStart -= limitDiffLen;
+              selectionEnd -= limitDiffLen;
+            } else if (formatterDiffLen) {
+              selectionStart += formatterDiffLen;
+              selectionEnd += formatterDiffLen;
+            }
+            inputRef.value.setSelectionRange(Math.min(selectionStart, valueLen), Math.min(selectionEnd, valueLen));
+          }
         } else {
           inputRef.value.value = value;
         }
@@ -4221,9 +4259,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({
@@ -4243,7 +4286,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
       });
@@ -6512,6 +6555,14 @@ var stdin_default$13 = vue.defineComponent({
         emit("load", event);
       }
     };
+    const triggerLoad = () => {
+      const loadEvent = new Event("load");
+      Object.defineProperty(loadEvent, "target", {
+        value: imageRef.value,
+        enumerable: true
+      });
+      onLoad(loadEvent);
+    };
     const onError = (event) => {
       error.value = true;
       loading.value = false;
@@ -6569,7 +6620,7 @@ var stdin_default$13 = vue.defineComponent({
     }) => {
       const check = () => {
         if (el === imageRef.value && loading.value) {
-          onLoad();
+          triggerLoad();
         }
       };
       if (imageRef.value) {
@@ -6594,10 +6645,12 @@ var stdin_default$13 = vue.defineComponent({
       });
     }
     vue.onMounted(() => {
-      var _a;
-      if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
-        onLoad();
-      }
+      vue.nextTick(() => {
+        var _a;
+        if ((_a = imageRef.value) == null ? void 0 : _a.complete) {
+          triggerLoad();
+        }
+      });
     });
     return () => {
       var _a;
@@ -14835,7 +14888,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.2";
+const version = "4.0.4";
 function install(app) {
   const components = [
     ActionBar,