vant 4.0.0-alpha.3 → 4.0.0-alpha.4

package/lib/uploader/UploaderPreviewItem.js

@@ -82,13 +82,16 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const onPreview = () => emit("preview");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
+        const slot = slots["preview-delete"];
         return (0, import_vue.createVNode)("div", {
           "role": "button",
-          "class": (0, import_utils.bem)("preview-delete"),
+          "class": (0, import_utils.bem)("preview-delete", {
+            shadow: !slot
+          }),
           "tabindex": 0,
           "aria-label": (0, import_utils.t)("delete"),
           "onClick": onDelete
-        }, [(0, import_vue.createVNode)(import_icon.Icon, {
+        }, [slot ? slot() : (0, import_vue.createVNode)(import_icon.Icon, {
           "name": "cross",
           "class": (0, import_utils.bem)("preview-delete-icon")
         }, null)]);

package/lib/uploader/index.css

@@ -1 +1 @@
-body{--van-uploader-size: 80px;--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background: rgba(0, 0, 0, .7);--van-uploader-file-background: var(--van-background);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0;width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}
+body{--van-uploader-size: 80px;--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background: rgba(0, 0, 0, .7);--van-uploader-file-background: var(--van-background);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;background:var(--van-uploader-upload-background)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;margin:0 var(--van-padding-xs) var(--van-padding-xs) 0;cursor:pointer}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);overflow:hidden}.van-uploader__preview-delete{position:absolute;top:0;right:0}.van-uploader__preview-delete--shadow{width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}

package/lib/uploader/index.less

@@ -106,10 +106,13 @@ body {
       position: absolute;
       top: 0;
       right: 0;
-      width: var(--van-uploader-delete-icon-size);
-      height: var(--van-uploader-delete-icon-size);
-      background: var(--van-uploader-delete-background);
-      border-radius: 0 0 0 12px;
+
+      &--shadow {
+        width: var(--van-uploader-delete-icon-size);
+        height: var(--van-uploader-delete-icon-size);
+        background: var(--van-uploader-delete-background);
+        border-radius: 0 0 0 12px;
+      }
 
       &-icon {
         position: absolute;

package/lib/vant.cjs.js

@@ -1,6 +1,5 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports[Symbol.toStringTag] = "Module";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 var use = require("@vant/use");
 var vue = require("vue");
 var popperjs = require("@vant/popperjs");
@@ -2239,6 +2238,10 @@ var stdin_default$1l = vue.defineComponent({
         item.resetValidation();
       });
     };
+    const getValidationStatus = () => children.reduce((form, field) => {
+      form[field.name] = field.getValidationStatus();
+      return form;
+    }, {});
     const scrollToField = (name2, options) => {
       children.some((item) => {
         if (item.name === name2) {
@@ -2276,7 +2279,8 @@ var stdin_default$1l = vue.defineComponent({
       validate,
       getValues,
       scrollToField,
-      resetValidation
+      resetValidation,
+      getValidationStatus
     });
     return () => {
       var _a;
@@ -2434,8 +2438,8 @@ var stdin_default$1k = vue.defineComponent({
   }) {
     const id = useId$1();
     const state = vue.reactive({
+      status: "unvalidated",
       focused: false,
-      validateFailed: false,
       validateMessage: ""
     });
     const inputRef = vue.ref();
@@ -2471,7 +2475,7 @@ var stdin_default$1k = vue.defineComponent({
       return props.modelValue;
     });
     const runRules = (rules) => rules.reduce((promise, rule) => promise.then(() => {
-      if (state.validateFailed) {
+      if (state.status === "failed") {
         return;
       }
       let {
@@ -2481,38 +2485,37 @@ var stdin_default$1k = vue.defineComponent({
         value = rule.formatter(value, rule);
       }
       if (!runSyncRule(value, rule)) {
-        state.validateFailed = true;
+        state.status = "failed";
         state.validateMessage = getRuleMessage(value, rule);
         return;
       }
       if (rule.validator) {
         return runRuleValidator(value, rule).then((result) => {
           if (result && typeof result === "string") {
-            state.validateFailed = true;
+            state.status = "failed";
             state.validateMessage = result;
           } else if (result === false) {
-            state.validateFailed = true;
+            state.status = "failed";
             state.validateMessage = getRuleMessage(value, rule);
           }
         });
       }
     }), Promise.resolve());
     const resetValidation = () => {
-      if (state.validateFailed) {
-        state.validateFailed = false;
-        state.validateMessage = "";
-      }
+      state.status = "unvalidated";
+      state.validateMessage = "";
     };
     const validate = (rules = props.rules) => new Promise((resolve) => {
       resetValidation();
       if (rules) {
         runRules(rules).then(() => {
-          if (state.validateFailed) {
+          if (state.status === "failed") {
             resolve({
               name: props.name,
               message: state.validateMessage
             });
           } else {
+            state.status = "passed";
             resolve();
           }
         });
@@ -2616,7 +2619,7 @@ var stdin_default$1k = vue.defineComponent({
       if (typeof props.error === "boolean") {
         return props.error;
       }
-      if (form && form.props.showError && state.validateFailed) {
+      if (form && form.props.showError && state.status === "failed") {
         return true;
       }
     });
@@ -2642,6 +2645,7 @@ var stdin_default$1k = vue.defineComponent({
       emit("keypress", event);
     };
     const getInputId = () => props.id || `${id}-input`;
+    const getValidationStatus = () => state.status;
     const renderInput = () => {
       const controlClass = bem$19("control", [getProp("inputAlign"), {
         error: showError.value,
@@ -2660,7 +2664,6 @@ var stdin_default$1k = vue.defineComponent({
         name: props.name,
         rows: props.rows !== void 0 ? +props.rows : void 0,
         class: controlClass,
-        value: props.modelValue,
         disabled: getProp("disabled"),
         readonly: getProp("readonly"),
         autofocus: props.autofocus,
@@ -2757,7 +2760,8 @@ var stdin_default$1k = vue.defineComponent({
       focus,
       validate,
       formValue,
-      resetValidation
+      resetValidation,
+      getValidationStatus
     });
     vue.provide(use.CUSTOM_FIELD_INJECTION_KEY, {
       customValue,
@@ -3116,7 +3120,8 @@ var stdin_default$1i = vue.defineComponent({
   props: switchProps,
   emits: ["change", "update:modelValue"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const isChecked = () => props.modelValue === props.activeValue;
     const onClick = () => {
@@ -3134,6 +3139,9 @@ var stdin_default$1i = vue.defineComponent({
           "color": color
         }, null);
       }
+      if (slots.node) {
+        return slots.node();
+      }
     };
     use.useCustomFieldValue(() => props.modelValue);
     return () => {
@@ -12933,13 +12941,16 @@ var stdin_default$5 = vue.defineComponent({
     const onPreview = () => emit("preview");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
+        const slot = slots["preview-delete"];
         return vue.createVNode("div", {
           "role": "button",
-          "class": bem("preview-delete"),
+          "class": bem("preview-delete", {
+            shadow: !slot
+          }),
           "tabindex": 0,
           "aria-label": t("delete"),
           "onClick": onDelete
-        }, [vue.createVNode(Icon, {
+        }, [slot ? slot() : vue.createVNode(Icon, {
           "name": "cross",
           "class": bem("preview-delete-icon")
         }, null)]);
@@ -13166,9 +13177,7 @@ var stdin_default$4 = vue.defineComponent({
         "onClick": () => emit("clickPreview", item, getDetail(index)),
         "onDelete": () => deleteFile(item, index),
         "onPreview": () => previewImage(item)
-      }, pick(props, ["name", "lazyLoad"]), previewData), {
-        "preview-cover": slots["preview-cover"]
-      });
+      }, pick(props, ["name", "lazyLoad"]), previewData), pick(slots, ["preview-cover", "preview-delete"]));
     };
     const renderPreviewList = () => {
       if (props.previewImage) {
@@ -14079,7 +14088,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-alpha.3";
+const version = "4.0.0-alpha.4";
 function install(app) {
   const components = [
     ActionBar,