vant 4.0.0-rc.4 → 4.0.0-rc.6

package/lib/vant.es.js

@@ -737,6 +737,13 @@ var stdin_default$1z = defineComponent({
     const spinnerStyle = computed(() => extend({
       color: props.color
     }, getSizeStyle(props.size)));
+    const renderIcon = () => {
+      const DefaultIcon = props.type === "spinner" ? SpinIcon : CircularIcon;
+      return createVNode("span", {
+        "class": bem$1n("spinner", props.type),
+        "style": spinnerStyle.value
+      }, [slots.icon ? slots.icon() : DefaultIcon]);
+    };
     const renderText = () => {
       var _a;
       if (slots.default) {
@@ -760,10 +767,7 @@ var stdin_default$1z = defineComponent({
         }]),
         "aria-live": "polite",
         "aria-busy": true
-      }, [createVNode("span", {
-        "class": bem$1n("spinner", type),
-        "style": spinnerStyle.value
-      }, [type === "spinner" ? SpinIcon : CircularIcon]), renderText()]);
+      }, [renderIcon(), renderText()]);
     };
   }
 });
@@ -2150,7 +2154,7 @@ var stdin_default$1o = defineComponent({
       }
       return 0;
     });
-    const maxCount = computed(() => Math.ceil(Math.abs(minOffset.value) / size.value));
+    const maxCount = computed(() => size.value ? Math.ceil(Math.abs(minOffset.value) / size.value) : count.value);
     const trackSize = computed(() => count.value * size.value);
     const activeIndicator = computed(() => (state.active + count.value) % count.value);
     const isCorrectDirection = computed(() => {
@@ -2641,17 +2645,19 @@ var stdin_default$1m = defineComponent({
       const newTab = children[newIndex];
       const newName = getTabName(newTab, newIndex);
       const shouldEmitChange = state.currentIndex !== null;
-      state.currentIndex = newIndex;
+      if (state.currentIndex !== newIndex) {
+        state.currentIndex = newIndex;
+        if (!skipScrollIntoView) {
+          scrollIntoView();
+        }
+        setLine();
+      }
       if (newName !== props.active) {
         emit("update:active", newName);
         if (shouldEmitChange) {
           emit("change", newName, newTab.title);
         }
       }
-      if (!skipScrollIntoView) {
-        scrollIntoView();
-      }
-      setLine();
       if (stickyFixed && !props.scrollspy) {
         setRootScrollTop(Math.ceil(getElementTop(root.value) - offsetTopPx.value));
       }
@@ -2750,13 +2756,14 @@ var stdin_default$1m = defineComponent({
       }
     };
     const renderHeader = () => {
-      var _a, _b;
+      var _a, _b, _c;
       const {
         type,
-        border
+        border,
+        sticky
       } = props;
-      return createVNode("div", {
-        "ref": wrapRef,
+      const Header = [createVNode("div", {
+        "ref": sticky ? void 0 : wrapRef,
         "class": [bem$1a("wrap"), {
           [BORDER_TOP_BOTTOM]: type === "line" && border
         }]
@@ -2769,7 +2776,13 @@ var stdin_default$1m = defineComponent({
         }]),
         "style": navStyle.value,
         "aria-orientation": "horizontal"
-      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]);
+      }, [(_a = slots["nav-left"]) == null ? void 0 : _a.call(slots), renderNav(), renderLine(), (_b = slots["nav-right"]) == null ? void 0 : _b.call(slots)])]), (_c = slots["nav-bottom"]) == null ? void 0 : _c.call(slots)];
+      if (sticky) {
+        return createVNode("div", {
+          "ref": wrapRef
+        }, [Header]);
+      }
+      return Header;
     };
     watch([() => props.color, windowWidth], setLine);
     watch(() => props.active, (value) => {
@@ -2823,37 +2836,31 @@ var stdin_default$1m = defineComponent({
       currentName,
       scrollIntoView
     });
-    return () => {
-      var _a;
-      return createVNode("div", {
-        "ref": root,
-        "class": bem$1a([props.type])
-      }, [props.sticky ? createVNode(Sticky, {
-        "container": root.value,
-        "offsetTop": offsetTopPx.value,
-        "onScroll": onStickyScroll
-      }, {
-        default: () => {
-          var _a2;
-          return [renderHeader(), (_a2 = slots["nav-bottom"]) == null ? void 0 : _a2.call(slots)];
-        }
-      }) : [renderHeader(), (_a = slots["nav-bottom"]) == null ? void 0 : _a.call(slots)], createVNode(stdin_default$1n, {
-        "ref": contentRef,
-        "count": children.length,
-        "inited": state.inited,
-        "animated": props.animated,
-        "duration": props.duration,
-        "swipeable": props.swipeable,
-        "lazyRender": props.lazyRender,
-        "currentIndex": state.currentIndex,
-        "onChange": setCurrentIndex
-      }, {
-        default: () => {
-          var _a2;
-          return [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)];
-        }
-      })]);
-    };
+    return () => createVNode("div", {
+      "ref": root,
+      "class": bem$1a([props.type])
+    }, [props.sticky ? createVNode(Sticky, {
+      "container": root.value,
+      "offsetTop": offsetTopPx.value,
+      "onScroll": onStickyScroll
+    }, {
+      default: () => [renderHeader()]
+    }) : renderHeader(), createVNode(stdin_default$1n, {
+      "ref": contentRef,
+      "count": children.length,
+      "inited": state.inited,
+      "animated": props.animated,
+      "duration": props.duration,
+      "swipeable": props.swipeable,
+      "lazyRender": props.lazyRender,
+      "currentIndex": state.currentIndex,
+      "onChange": setCurrentIndex
+    }, {
+      default: () => {
+        var _a;
+        return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
+      }
+    })]);
   }
 });
 const TAB_STATUS_KEY = Symbol();
@@ -3425,6 +3432,7 @@ var stdin_default$1h = defineComponent({
 const Area = withInstall(stdin_default$1h);
 const [name$19, bem$15] = createNamespace("cell");
 const cellSharedProps = {
+  tag: makeStringProp("div"),
   icon: String,
   size: String,
   title: numericProp,
@@ -3503,8 +3511,9 @@ var stdin_default$1g = defineComponent({
       }
     };
     return () => {
-      var _a, _b;
+      var _a;
       const {
+        tag,
         size,
         center,
         border,
@@ -3521,12 +3530,17 @@ var stdin_default$1g = defineComponent({
       if (size) {
         classes[size] = !!size;
       }
-      return createVNode("div", {
+      return createVNode(tag, {
         "class": bem$15(classes),
         "role": clickable ? "button" : void 0,
         "tabindex": clickable ? 0 : void 0,
         "onClick": route2
-      }, [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_b = slots.extra) == null ? void 0 : _b.call(slots)]);
+      }, {
+        default: () => {
+          var _a2;
+          return [renderLeftIcon(), renderTitle(), renderValue(), renderRightIcon(), (_a2 = slots.extra) == null ? void 0 : _a2.call(slots)];
+        }
+      });
     };
   }
 });
@@ -4189,9 +4203,9 @@ var stdin_default$1e = defineComponent({
       const labelAlign = getProp("labelAlign");
       const Label = renderLabel();
       const LeftIcon = renderLeftIcon();
+      const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
       return createVNode(Cell, {
         "size": props.size,
-        "icon": props.leftIcon,
         "class": bem$13({
           error: showError.value,
           disabled,
@@ -4208,8 +4222,8 @@ var stdin_default$1e = defineComponent({
         }]), props.labelClass],
         "arrowDirection": props.arrowDirection
       }, {
-        icon: LeftIcon ? () => LeftIcon : null,
-        title: Label ? () => Label : null,
+        icon: LeftIcon && labelAlign !== "top" ? () => LeftIcon : null,
+        title: Label || labelAlign === "top" ? renderTitle : null,
         value: renderFieldBody,
         extra: slots.extra
       });
@@ -4243,6 +4257,7 @@ const toastProps = {
   duration: makeNumberProp(2e3),
   position: makeStringProp("middle"),
   teleport: [String, Object],
+  wordBreak: String,
   className: unknownProp,
   iconPrefix: String,
   transition: makeStringProp("van-fade"),
@@ -4334,7 +4349,7 @@ var stdin_default$1d = defineComponent({
     onMounted(toggleClickable);
     onUnmounted(toggleClickable);
     return () => createVNode(Popup, mergeProps({
-      "class": [bem$12([props.position, {
+      "class": [bem$12([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, {
         [props.type]: !props.icon
       }]), props.className],
       "lockScroll": false,
@@ -5397,6 +5412,16 @@ const genOptions = (min, max, type, formatter, filter) => {
   });
   return filter ? filter(type, options) : options;
 };
+const formatValueRange = (values, columns) => values.map((value, index) => {
+  const column = columns[index];
+  if (column.length) {
+    const maxValue = +column[column.length - 1].value;
+    if (+value > maxValue) {
+      return String(maxValue);
+    }
+  }
+  return value;
+});
 const [name$Y] = createNamespace("calendar-day");
 var stdin_default$13 = defineComponent({
   name: name$Y,
@@ -5719,6 +5744,7 @@ const [name$W] = createNamespace("calendar-header");
 var stdin_default$11 = defineComponent({
   name: name$W,
   props: {
+    date: Date,
     title: String,
     subtitle: String,
     showTitle: Boolean,
@@ -5742,7 +5768,10 @@ var stdin_default$11 = defineComponent({
     const onClickSubtitle = (event) => emit("clickSubtitle", event);
     const renderSubtitle = () => {
       if (props.showSubtitle) {
-        const title = slots.subtitle ? slots.subtitle() : props.subtitle;
+        const title = slots.subtitle ? slots.subtitle({
+          date: props.date,
+          text: props.subtitle
+        }) : props.subtitle;
         return createVNode("div", {
           "class": bem$V("header-subtitle"),
           "onClick": onClickSubtitle
@@ -5862,7 +5891,10 @@ var stdin_default$10 = defineComponent({
     };
     let bodyHeight;
     const bodyRef = ref();
-    const subtitle = ref("");
+    const subtitle = ref({
+      text: "",
+      date: void 0
+    });
     const currentDate = ref(getInitialDate());
     const [monthRefs, setMonthRefs] = useRefs();
     const dayOffset = computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
@@ -5923,7 +5955,10 @@ var stdin_default$10 = defineComponent({
         monthRefs.value[index].setVisible(visible);
       });
       if (currentMonth) {
-        subtitle.value = currentMonth.getTitle();
+        subtitle.value = {
+          text: currentMonth.getTitle(),
+          date: currentMonth.date
+        };
       }
     };
     const scrollToDate = (targetDate) => {
@@ -6113,8 +6148,9 @@ var stdin_default$10 = defineComponent({
     const renderCalendar = () => createVNode("div", {
       "class": bem$V()
     }, [createVNode(stdin_default$11, {
+      "date": subtitle.value.date,
       "title": props.title,
-      "subtitle": subtitle.value,
+      "subtitle": subtitle.value.text,
       "showTitle": props.showTitle,
       "showSubtitle": props.showSubtitle,
       "firstDayOfWeek": dayOffset.value,
@@ -8332,9 +8368,12 @@ var stdin_default$I = defineComponent({
       }
     });
     watch(() => props.modelValue, (newValues) => {
+      newValues = formatValueRange(newValues, columns.value);
       if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
+    }, {
+      immediate: true
     });
     const onChange = (...args) => emit("change", ...args);
     const onCancel = (...args) => emit("cancel", ...args);
@@ -9142,7 +9181,8 @@ var stdin_default$B = defineComponent({
   },
   emits: ["scale", "close"],
   setup(props, {
-    emit
+    emit,
+    slots
   }) {
     const state = reactive({
       scale: 1,
@@ -9360,7 +9400,11 @@ var stdin_default$B = defineComponent({
         "onTouchend": onTouchEnd,
         "onTouchcancel": onTouchEnd
       }, {
-        default: () => [createVNode(Image$1, {
+        default: () => [slots.image ? createVNode("div", {
+          "class": bem$v("image-wrap")
+        }, [slots.image({
+          src: props.src
+        })]) : createVNode(Image$1, {
           "src": props.src,
           "fit": "contain",
           "class": bem$v("image", {
@@ -9469,7 +9513,9 @@ var stdin_default$A = defineComponent({
         "rootHeight": state.rootHeight,
         "onScale": emitScale,
         "onClose": emitClose
-      }, null))]
+      }, {
+        image: slots.image
+      }))]
     });
     const renderClose = () => {
       if (props.closeable) {
@@ -10015,7 +10061,8 @@ const navBarProps = {
   rightText: String,
   leftArrow: Boolean,
   placeholder: Boolean,
-  safeAreaInsetTop: Boolean
+  safeAreaInsetTop: Boolean,
+  clickable: truthProp
 };
 var stdin_default$w = defineComponent({
   name: name$r,
@@ -10070,12 +10117,12 @@ var stdin_default$w = defineComponent({
       }, [createVNode("div", {
         "class": bem$q("content")
       }, [hasLeft && createVNode("div", {
-        "class": [bem$q("left"), HAPTICS_FEEDBACK],
+        "class": [bem$q("left"), props.clickable ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickLeft
       }, [renderLeft()]), createVNode("div", {
         "class": [bem$q("title"), "van-ellipsis"]
       }, [slots.title ? slots.title() : title]), hasRight && createVNode("div", {
-        "class": [bem$q("right"), HAPTICS_FEEDBACK],
+        "class": [bem$q("right"), props.clickable ? HAPTICS_FEEDBACK : ""],
         "onClick": onClickRight
       }, [renderRight()])])]);
     };
@@ -12408,6 +12455,7 @@ const stepperProps = {
   showMinus: truthProp,
   showInput: truthProp,
   longPress: truthProp,
+  autoFixed: truthProp,
   allowEmpty: Boolean,
   modelValue: numericProp,
   inputWidth: numericProp,
@@ -12427,7 +12475,7 @@ var stdin_default$c = defineComponent({
   setup(props, {
     emit
   }) {
-    const format2 = (value) => {
+    const format2 = (value, autoFixed = true) => {
       const {
         min,
         max,
@@ -12440,7 +12488,7 @@ var stdin_default$c = defineComponent({
       value = formatNumber(String(value), !props.integer);
       value = value === "" ? 0 : +value;
       value = Number.isNaN(value) ? +min : value;
-      value = Math.max(Math.min(+max, value), +min);
+      value = autoFixed ? Math.max(Math.min(+max, value), +min) : value;
       if (isDef(decimalLength)) {
         value = value.toFixed(+decimalLength);
       }
@@ -12524,7 +12572,7 @@ var stdin_default$c = defineComponent({
     };
     const onBlur = (event) => {
       const input = event.target;
-      const value = format2(input.value);
+      const value = format2(input.value, props.autoFixed);
       input.value = String(value);
       current2.value = value;
       nextTick(() => {
@@ -13123,13 +13171,14 @@ var stdin_default$7 = defineComponent({
       if (!isSameValue(newValues, props.modelValue)) {
         emit("update:modelValue", newValues);
       }
-    }, {
-      immediate: true
     });
     watch(() => props.modelValue, (newValues) => {
+      newValues = formatValueRange(newValues, columns.value);
       if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
+    }, {
+      immediate: true
     });
     const onChange = (...args) => emit("change", ...args);
     const onCancel = (...args) => emit("cancel", ...args);
@@ -14550,7 +14599,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.0.0-rc.4";
+const version = "4.0.0-rc.6";
 function install(app) {
   const components = [
     ActionBar,