vant 3.4.9 → 3.5.0

package/lib/vant.js

@@ -2007,6 +2007,7 @@
         }
       };
       const getValue = () => state.options[state.index];
+      const hasOptions = () => state.options.length;
       setIndex(state.index);
       useParent(PICKER_KEY);
       useExpose({
@@ -2015,6 +2016,7 @@
         getValue,
         setValue,
         setOptions,
+        hasOptions,
         stopMomentum
       });
       vue.watch(() => props.initialOptions, setOptions);
@@ -2067,15 +2069,16 @@
     }) {
       const hasOptions = vue.ref(false);
       const formattedColumns = vue.ref([]);
-      const {
-        text: textKey,
-        values: valuesKey,
-        children: childrenKey
-      } = extend({
-        text: props.valueKey || "text",
-        values: "values",
-        children: "children"
-      }, props.columnsFieldNames);
+      const columnsFieldNames = vue.computed(() => {
+        const {
+          columnsFieldNames: columnsFieldNames2
+        } = props;
+        return {
+          text: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.text) || props.valueKey || "text",
+          values: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.values) || "values",
+          children: (columnsFieldNames2 == null ? void 0 : columnsFieldNames2.children) || "children"
+        };
+      });
       const {
         children,
         linkChildren
@@ -2085,10 +2088,10 @@
       const dataType = vue.computed(() => {
         const firstColumn = props.columns[0];
         if (typeof firstColumn === "object") {
-          if (childrenKey in firstColumn) {
+          if (columnsFieldNames.value.children in firstColumn) {
             return "cascade";
           }
-          if (valuesKey in firstColumn) {
+          if (columnsFieldNames.value.values in firstColumn) {
             return "object";
           }
         }
@@ -2098,10 +2101,10 @@
         var _a;
         const formatted = [];
         let cursor = {
-          [childrenKey]: props.columns
+          [columnsFieldNames.value.children]: props.columns
         };
-        while (cursor && cursor[childrenKey]) {
-          const children2 = cursor[childrenKey];
+        while (cursor && cursor[columnsFieldNames.value.children]) {
+          const children2 = cursor[columnsFieldNames.value.children];
           let defaultIndex = (_a = cursor.defaultIndex) != null ? _a : +props.defaultIndex;
           while (children2[defaultIndex] && children2[defaultIndex].disabled) {
             if (defaultIndex < children2.length - 1) {
@@ -2112,7 +2115,7 @@
             }
           }
           formatted.push({
-            [valuesKey]: cursor[childrenKey],
+            [columnsFieldNames.value.values]: cursor[columnsFieldNames.value.children],
             className: cursor.className,
             defaultIndex
           });
@@ -2126,14 +2129,14 @@
         } = props;
         if (dataType.value === "plain") {
           formattedColumns.value = [{
-            [valuesKey]: columns
+            [columnsFieldNames.value.values]: columns
           }];
         } else if (dataType.value === "cascade") {
           formatCascade();
         } else {
           formattedColumns.value = columns;
         }
-        hasOptions.value = formattedColumns.value.some((item) => item[valuesKey] && item[valuesKey].length !== 0);
+        hasOptions.value = formattedColumns.value.some((item) => item[columnsFieldNames.value.values] && item[columnsFieldNames.value.values].length !== 0) || children.some((item) => item.hasOptions);
       };
       const getIndexes = () => children.map((child) => child.state.index);
       const setColumnValues = (index, options) => {
@@ -2145,16 +2148,16 @@
       };
       const onCascadeChange = (columnIndex) => {
         let cursor = {
-          [childrenKey]: props.columns
+          [columnsFieldNames.value.children]: props.columns
         };
         const indexes = getIndexes();
         for (let i = 0; i <= columnIndex; i++) {
-          cursor = cursor[childrenKey][indexes[i]];
+          cursor = cursor[columnsFieldNames.value.children][indexes[i]];
         }
-        while (cursor && cursor[childrenKey]) {
+        while (cursor && cursor[columnsFieldNames.value.children]) {
           columnIndex++;
-          setColumnValues(columnIndex, cursor[childrenKey]);
-          cursor = cursor[childrenKey][cursor.defaultIndex || 0];
+          setColumnValues(columnIndex, cursor[columnsFieldNames.value.children]);
+          cursor = cursor[columnsFieldNames.value.children][cursor.defaultIndex || 0];
         }
       };
       const getChild = (index) => children[index];
@@ -2264,14 +2267,14 @@
       const renderColumnItems = () => formattedColumns.value.map((item, columnIndex) => {
         var _a;
         return vue.createVNode(stdin_default$1q, {
-          "textKey": textKey,
+          "textKey": columnsFieldNames.value.text,
           "readonly": props.readonly,
           "allowHtml": props.allowHtml,
           "className": item.className,
           "itemHeight": itemHeight.value,
           "defaultIndex": (_a = item.defaultIndex) != null ? _a : +props.defaultIndex,
           "swipeDuration": props.swipeDuration,
-          "initialOptions": item[valuesKey],
+          "initialOptions": item[columnsFieldNames.value.values],
           "visibleItemCount": props.visibleItemCount,
           "onChange": () => onChange(columnIndex)
         }, {
@@ -2773,6 +2776,10 @@
           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) {
@@ -2810,7 +2817,8 @@
         validate,
         getValues,
         scrollToField,
-        resetValidation
+        resetValidation,
+        getValidationStatus
       });
       return () => {
         var _a;
@@ -2968,8 +2976,8 @@
     }) {
       const id = useId$1();
       const state = vue.reactive({
+        status: "unvalidated",
         focused: false,
-        validateFailed: false,
         validateMessage: ""
       });
       const inputRef = vue.ref();
@@ -3005,7 +3013,7 @@
         return props.modelValue;
       });
       const runRules = (rules) => rules.reduce((promise, rule) => promise.then(() => {
-        if (state.validateFailed) {
+        if (state.status === "failed") {
           return;
         }
         let {
@@ -3015,38 +3023,37 @@
           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();
             }
           });
@@ -3150,7 +3157,7 @@
         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;
         }
       });
@@ -3176,6 +3183,7 @@
         emit("keypress", event);
       };
       const getInputId = () => props.id || `${id}-input`;
+      const getValidationStatus = () => state.status;
       const renderInput = () => {
         const controlClass = bem$1a("control", [getProp("inputAlign"), {
           error: showError.value,
@@ -3194,7 +3202,6 @@
           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,
@@ -3291,7 +3298,8 @@
         focus,
         validate,
         formValue,
-        resetValidation
+        resetValidation,
+        getValidationStatus
       });
       vue.provide(CUSTOM_FIELD_INJECTION_KEY, {
         customValue,
@@ -3650,7 +3658,8 @@
     props: switchProps,
     emits: ["change", "update:modelValue"],
     setup(props, {
-      emit
+      emit,
+      slots
     }) {
       const isChecked = () => props.modelValue === props.activeValue;
       const onClick = () => {
@@ -3668,9 +3677,13 @@
             "color": color
           }, null);
         }
+        if (slots.node) {
+          return slots.node();
+        }
       };
       useCustomFieldValue(() => props.modelValue);
       return () => {
+        var _a;
         const {
           size,
           loading,
@@ -3696,7 +3709,7 @@
           "onClick": onClick
         }, [vue.createVNode("div", {
           "class": bem$18("node")
-        }, [renderLoading()])]);
+        }, [renderLoading()]), (_a = slots.background) == null ? void 0 : _a.call(slots)]);
       };
     }
   });
@@ -8945,8 +8958,10 @@
     showCancelButton: Boolean,
     cancelButtonText: String,
     cancelButtonColor: String,
+    cancelButtonDisabled: Boolean,
     confirmButtonText: String,
     confirmButtonColor: String,
+    confirmButtonDisabled: Boolean,
     showConfirmButton: truthProp,
     closeOnClickOverlay: Boolean
   });
@@ -9067,6 +9082,7 @@
           color: props.cancelButtonColor
         },
         "loading": loading.cancel,
+        "disabled": props.cancelButtonDisabled,
         "onClick": onCancel
       }, null), props.showConfirmButton && vue.createVNode(Button, {
         "size": "large",
@@ -9078,6 +9094,7 @@
           color: props.confirmButtonColor
         },
         "loading": loading.confirm,
+        "disabled": props.confirmButtonDisabled,
         "onClick": onConfirm
       }, null)]);
       const renderRoundButtons = () => vue.createVNode(ActionBar, {
@@ -9089,6 +9106,7 @@
           "class": bem$A("cancel"),
           "color": props.cancelButtonColor,
           "loading": loading.cancel,
+          "disabled": props.cancelButtonDisabled,
           "onClick": onCancel
         }, null), props.showConfirmButton && vue.createVNode(ActionBarButton, {
           "type": "danger",
@@ -9096,6 +9114,7 @@
           "class": bem$A("confirm"),
           "color": props.confirmButtonColor,
           "loading": loading.confirm,
+          "disabled": props.confirmButtonDisabled,
           "onClick": onConfirm
         }, null)]
       });
@@ -9180,8 +9199,10 @@
     messageAlign: "",
     cancelButtonText: "",
     cancelButtonColor: null,
+    cancelButtonDisabled: false,
     confirmButtonText: "",
     confirmButtonColor: null,
+    confirmButtonDisabled: false,
     showConfirmButton: true,
     showCancelButton: false,
     closeOnPopstate: true,
@@ -11431,21 +11452,6 @@
     }
   });
   const PasswordInput = withInstall(stdin_default$o);
-  function getBoundingClientRect(element, includeScale) {
-    var rect = element.getBoundingClientRect();
-    var scaleX = 1;
-    var scaleY = 1;
-    return {
-      width: rect.width / scaleX,
-      height: rect.height / scaleY,
-      top: rect.top / scaleY,
-      right: rect.right / scaleX,
-      bottom: rect.bottom / scaleY,
-      left: rect.left / scaleX,
-      x: rect.left / scaleX,
-      y: rect.top / scaleY
-    };
-  }
   function getWindow(node) {
     if (node == null) {
       return window;
@@ -11456,15 +11462,6 @@
     }
     return node;
   }
-  function getWindowScroll(node) {
-    var win = getWindow(node);
-    var scrollLeft = win.pageXOffset;
-    var scrollTop = win.pageYOffset;
-    return {
-      scrollLeft,
-      scrollTop
-    };
-  }
   function isElement(node) {
     var OwnElement = getWindow(node).Element;
     return node instanceof OwnElement || node instanceof Element;
@@ -11480,6 +11477,44 @@
     var OwnElement = getWindow(node).ShadowRoot;
     return node instanceof OwnElement || node instanceof ShadowRoot;
   }
+  var round = Math.round;
+  function getBoundingClientRect(element, includeScale) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+    var rect = element.getBoundingClientRect();
+    var scaleX = 1;
+    var scaleY = 1;
+    if (isHTMLElement(element) && includeScale) {
+      var offsetHeight = element.offsetHeight;
+      var offsetWidth = element.offsetWidth;
+      if (offsetWidth > 0) {
+        scaleX = round(rect.width) / offsetWidth || 1;
+      }
+      if (offsetHeight > 0) {
+        scaleY = round(rect.height) / offsetHeight || 1;
+      }
+    }
+    return {
+      width: rect.width / scaleX,
+      height: rect.height / scaleY,
+      top: rect.top / scaleY,
+      right: rect.right / scaleX,
+      bottom: rect.bottom / scaleY,
+      left: rect.left / scaleX,
+      x: rect.left / scaleX,
+      y: rect.top / scaleY
+    };
+  }
+  function getWindowScroll(node) {
+    var win = getWindow(node);
+    var scrollLeft = win.pageXOffset;
+    var scrollTop = win.pageYOffset;
+    return {
+      scrollLeft,
+      scrollTop
+    };
+  }
   function getHTMLElementScroll(element) {
     return {
       scrollLeft: element.scrollLeft,
@@ -11511,8 +11546,8 @@
   }
   function isElementScaled(element) {
     var rect = element.getBoundingClientRect();
-    var scaleX = rect.width / element.offsetWidth || 1;
-    var scaleY = rect.height / element.offsetHeight || 1;
+    var scaleX = round(rect.width) / element.offsetWidth || 1;
+    var scaleY = round(rect.height) / element.offsetHeight || 1;
     return scaleX !== 1 || scaleY !== 1;
   }
   function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
@@ -11520,9 +11555,9 @@
       isFixed = false;
     }
     var isOffsetParentAnElement = isHTMLElement(offsetParent);
-    isHTMLElement(offsetParent) && isElementScaled(offsetParent);
+    var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
     var documentElement = getDocumentElement(offsetParent);
-    var rect = getBoundingClientRect(elementOrVirtualElement);
+    var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
     var scroll = {
       scrollLeft: 0,
       scrollTop: 0
@@ -11536,7 +11571,7 @@
         scroll = getNodeScroll(offsetParent);
       }
       if (isHTMLElement(offsetParent)) {
-        offsets = getBoundingClientRect(offsetParent);
+        offsets = getBoundingClientRect(offsetParent, true);
         offsets.x += offsetParent.clientLeft;
         offsets.y += offsetParent.clientTop;
       } else if (documentElement) {
@@ -11613,6 +11648,9 @@
       }
     }
     var currentNode = getParentNode(element);
+    if (isShadowRoot(currentNode)) {
+      currentNode = currentNode.host;
+    }
     while (isHTMLElement(currentNode) && ["html", "body"].indexOf(getNodeName(currentNode)) < 0) {
       var css = getComputedStyle(currentNode);
       if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || ["transform", "perspective"].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
@@ -11800,7 +11838,6 @@
       return merged[key];
     });
   }
-  var round = Math.round;
   function getVariation(placement) {
     return placement.split("-")[1];
   }
@@ -12091,14 +12128,23 @@
     var win = window;
     var dpr = win.devicePixelRatio || 1;
     return {
-      x: round(round(x * dpr) / dpr) || 0,
-      y: round(round(y * dpr) / dpr) || 0
+      x: round(x * dpr) / dpr || 0,
+      y: round(y * dpr) / dpr || 0
     };
   }
   function mapToStyles(_ref2) {
     var _Object$assign2;
-    var popper = _ref2.popper, popperRect = _ref2.popperRect, placement = _ref2.placement, variation = _ref2.variation, offsets = _ref2.offsets, position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, roundOffsets = _ref2.roundOffsets;
-    var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === "function" ? roundOffsets(offsets) : offsets, _ref3$x = _ref3.x, x = _ref3$x === void 0 ? 0 : _ref3$x, _ref3$y = _ref3.y, y = _ref3$y === void 0 ? 0 : _ref3$y;
+    var popper = _ref2.popper, popperRect = _ref2.popperRect, placement = _ref2.placement, variation = _ref2.variation, offsets = _ref2.offsets, position = _ref2.position, gpuAcceleration = _ref2.gpuAcceleration, adaptive = _ref2.adaptive, roundOffsets = _ref2.roundOffsets, isFixed = _ref2.isFixed;
+    var _offsets$x = offsets.x, x = _offsets$x === void 0 ? 0 : _offsets$x, _offsets$y = offsets.y, y = _offsets$y === void 0 ? 0 : _offsets$y;
+    var _ref3 = typeof roundOffsets === "function" ? roundOffsets({
+      x,
+      y
+    }) : {
+      x,
+      y
+    };
+    x = _ref3.x;
+    y = _ref3.y;
     var hasX = offsets.hasOwnProperty("x");
     var hasY = offsets.hasOwnProperty("y");
     var sideX = left;
@@ -12118,26 +12164,37 @@
       offsetParent = offsetParent;
       if (placement === top || (placement === left || placement === right) && variation === end) {
         sideY = bottom;
-        y -= offsetParent[heightProp] - popperRect.height;
+        var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : offsetParent[heightProp];
+        y -= offsetY - popperRect.height;
         y *= gpuAcceleration ? 1 : -1;
       }
       if (placement === left || (placement === top || placement === bottom) && variation === end) {
         sideX = right;
-        x -= offsetParent[widthProp] - popperRect.width;
+        var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : offsetParent[widthProp];
+        x -= offsetX - popperRect.width;
         x *= gpuAcceleration ? 1 : -1;
       }
     }
     var commonStyles = Object.assign({
       position
     }, adaptive && unsetSides);
+    var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
+      x,
+      y
+    }) : {
+      x,
+      y
+    };
+    x = _ref4.x;
+    y = _ref4.y;
     if (gpuAcceleration) {
       var _Object$assign;
       return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? "0" : "", _Object$assign[sideX] = hasX ? "0" : "", _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
     }
     return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : "", _Object$assign2[sideX] = hasX ? x + "px" : "", _Object$assign2.transform = "", _Object$assign2));
   }
-  function computeStyles(_ref4) {
-    var state = _ref4.state, options = _ref4.options;
+  function computeStyles(_ref5) {
+    var state = _ref5.state, options = _ref5.options;
     var _options$gpuAccelerat = options.gpuAcceleration, gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, _options$adaptive = options.adaptive, adaptive = _options$adaptive === void 0 ? true : _options$adaptive, _options$roundOffsets = options.roundOffsets, roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
     {
       var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || "";
@@ -12152,7 +12209,8 @@
       variation: getVariation(state.placement),
       popper: state.elements.popper,
       popperRect: state.rects.popper,
-      gpuAcceleration
+      gpuAcceleration,
+      isFixed: state.options.strategy === "fixed"
     };
     if (state.modifiersData.popperOffsets != null) {
       state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
@@ -14599,13 +14657,16 @@
       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)]);
@@ -14832,9 +14893,7 @@
           "onClick": () => emit("click-preview", 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) {
@@ -15745,7 +15804,7 @@
       });
     }
   };
-  const version = "3.4.9";
+  const version = "3.5.0";
   function install(app) {
     const components = [
       ActionBar,
@@ -15935,6 +15994,5 @@
   exports2["default"] = stdin_default;
   exports2.install = install;
   exports2.version = version;
-  Object.defineProperty(exports2, "__esModule", { value: true });
-  exports2[Symbol.toStringTag] = "Module";
+  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });