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

package/lib/vant.js

@@ -1106,6 +1106,13 @@
       const spinnerStyle = vue.computed(() => extend({
         color: props.color
       }, getSizeStyle(props.size)));
+      const renderIcon = () => {
+        const DefaultIcon = props.type === "spinner" ? SpinIcon : CircularIcon;
+        return vue.createVNode("span", {
+          "class": bem$1n("spinner", props.type),
+          "style": spinnerStyle.value
+        }, [slots.icon ? slots.icon() : DefaultIcon]);
+      };
       const renderText = () => {
         var _a;
         if (slots.default) {
@@ -1129,10 +1136,7 @@
           }]),
           "aria-live": "polite",
           "aria-busy": true
-        }, [vue.createVNode("span", {
-          "class": bem$1n("spinner", type),
-          "style": spinnerStyle.value
-        }, [type === "spinner" ? SpinIcon : CircularIcon]), renderText()]);
+        }, [renderIcon(), renderText()]);
       };
     }
   });
@@ -2516,7 +2520,7 @@
         }
         return 0;
       });
-      const maxCount = vue.computed(() => Math.ceil(Math.abs(minOffset.value) / size.value));
+      const maxCount = vue.computed(() => size.value ? Math.ceil(Math.abs(minOffset.value) / size.value) : count.value);
       const trackSize = vue.computed(() => count.value * size.value);
       const activeIndicator = vue.computed(() => (state.active + count.value) % count.value);
       const isCorrectDirection = vue.computed(() => {
@@ -3007,17 +3011,19 @@
         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));
         }
@@ -3116,13 +3122,14 @@
         }
       };
       const renderHeader = () => {
-        var _a, _b;
+        var _a, _b, _c;
         const {
           type,
-          border
+          border,
+          sticky
         } = props;
-        return vue.createVNode("div", {
-          "ref": wrapRef,
+        const Header = [vue.createVNode("div", {
+          "ref": sticky ? void 0 : wrapRef,
           "class": [bem$1a("wrap"), {
             [BORDER_TOP_BOTTOM]: type === "line" && border
           }]
@@ -3135,7 +3142,13 @@
           }]),
           "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 vue.createVNode("div", {
+            "ref": wrapRef
+          }, [Header]);
+        }
+        return Header;
       };
       vue.watch([() => props.color, windowWidth], setLine);
       vue.watch(() => props.active, (value) => {
@@ -3189,37 +3202,31 @@
         currentName,
         scrollIntoView
       });
-      return () => {
-        var _a;
-        return vue.createVNode("div", {
-          "ref": root,
-          "class": bem$1a([props.type])
-        }, [props.sticky ? vue.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)], vue.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 () => vue.createVNode("div", {
+        "ref": root,
+        "class": bem$1a([props.type])
+      }, [props.sticky ? vue.createVNode(Sticky, {
+        "container": root.value,
+        "offsetTop": offsetTopPx.value,
+        "onScroll": onStickyScroll
+      }, {
+        default: () => [renderHeader()]
+      }) : renderHeader(), vue.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();
@@ -3785,6 +3792,7 @@
   const Area = withInstall(stdin_default$1h);
   const [name$19, bem$15] = createNamespace("cell");
   const cellSharedProps = {
+    tag: makeStringProp("div"),
     icon: String,
     size: String,
     title: numericProp,
@@ -3863,8 +3871,9 @@
         }
       };
       return () => {
-        var _a, _b;
+        var _a;
         const {
+          tag,
           size,
           center,
           border,
@@ -3881,12 +3890,17 @@
         if (size) {
           classes[size] = !!size;
         }
-        return vue.createVNode("div", {
+        return vue.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)];
+          }
+        });
       };
     }
   });
@@ -4549,9 +4563,9 @@
         const labelAlign = getProp("labelAlign");
         const Label = renderLabel();
         const LeftIcon = renderLeftIcon();
+        const renderTitle = () => labelAlign === "top" ? [LeftIcon, Label] : Label;
         return vue.createVNode(Cell, {
           "size": props.size,
-          "icon": props.leftIcon,
           "class": bem$13({
             error: showError.value,
             disabled,
@@ -4568,8 +4582,8 @@
           }]), 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
         });
@@ -4603,6 +4617,7 @@
     duration: makeNumberProp(2e3),
     position: makeStringProp("middle"),
     teleport: [String, Object],
+    wordBreak: String,
     className: unknownProp,
     iconPrefix: String,
     transition: makeStringProp("van-fade"),
@@ -4694,7 +4709,7 @@
       vue.onMounted(toggleClickable);
       vue.onUnmounted(toggleClickable);
       return () => vue.createVNode(Popup, vue.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,
@@ -5757,6 +5772,16 @@
     });
     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 = vue.defineComponent({
     name: name$Y,
@@ -6079,6 +6104,7 @@
   var stdin_default$11 = vue.defineComponent({
     name: name$W,
     props: {
+      date: Date,
       title: String,
       subtitle: String,
       showTitle: Boolean,
@@ -6102,7 +6128,10 @@
       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 vue.createVNode("div", {
             "class": bem$V("header-subtitle"),
             "onClick": onClickSubtitle
@@ -6222,7 +6251,10 @@
       };
       let bodyHeight;
       const bodyRef = vue.ref();
-      const subtitle = vue.ref("");
+      const subtitle = vue.ref({
+        text: "",
+        date: void 0
+      });
       const currentDate = vue.ref(getInitialDate());
       const [monthRefs, setMonthRefs] = useRefs();
       const dayOffset = vue.computed(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0);
@@ -6283,7 +6315,10 @@
           monthRefs.value[index].setVisible(visible);
         });
         if (currentMonth) {
-          subtitle.value = currentMonth.getTitle();
+          subtitle.value = {
+            text: currentMonth.getTitle(),
+            date: currentMonth.date
+          };
         }
       };
       const scrollToDate = (targetDate) => {
@@ -6473,8 +6508,9 @@
       const renderCalendar = () => vue.createVNode("div", {
         "class": bem$V()
       }, [vue.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,
@@ -8675,9 +8711,12 @@
         }
       });
       vue.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);
@@ -9479,7 +9518,8 @@
     },
     emits: ["scale", "close"],
     setup(props, {
-      emit
+      emit,
+      slots
     }) {
       const state = vue.reactive({
         scale: 1,
@@ -9697,7 +9737,11 @@
           "onTouchend": onTouchEnd,
           "onTouchcancel": onTouchEnd
         }, {
-          default: () => [vue.createVNode(Image$1, {
+          default: () => [slots.image ? vue.createVNode("div", {
+            "class": bem$v("image-wrap")
+          }, [slots.image({
+            src: props.src
+          })]) : vue.createVNode(Image$1, {
             "src": props.src,
             "fit": "contain",
             "class": bem$v("image", {
@@ -9806,7 +9850,9 @@
           "rootHeight": state.rootHeight,
           "onScale": emitScale,
           "onClose": emitClose
-        }, null))]
+        }, {
+          image: slots.image
+        }))]
       });
       const renderClose = () => {
         if (props.closeable) {
@@ -10349,7 +10395,8 @@
     rightText: String,
     leftArrow: Boolean,
     placeholder: Boolean,
-    safeAreaInsetTop: Boolean
+    safeAreaInsetTop: Boolean,
+    clickable: truthProp
   };
   var stdin_default$w = vue.defineComponent({
     name: name$r,
@@ -10404,12 +10451,12 @@
         }, [vue.createVNode("div", {
           "class": bem$q("content")
         }, [hasLeft && vue.createVNode("div", {
-          "class": [bem$q("left"), HAPTICS_FEEDBACK],
+          "class": [bem$q("left"), props.clickable ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickLeft
         }, [renderLeft()]), vue.createVNode("div", {
           "class": [bem$q("title"), "van-ellipsis"]
         }, [slots.title ? slots.title() : title]), hasRight && vue.createVNode("div", {
-          "class": [bem$q("right"), HAPTICS_FEEDBACK],
+          "class": [bem$q("right"), props.clickable ? HAPTICS_FEEDBACK : ""],
           "onClick": onClickRight
         }, [renderRight()])])]);
       };
@@ -13645,6 +13692,7 @@
     showMinus: truthProp,
     showInput: truthProp,
     longPress: truthProp,
+    autoFixed: truthProp,
     allowEmpty: Boolean,
     modelValue: numericProp,
     inputWidth: numericProp,
@@ -13664,7 +13712,7 @@
     setup(props, {
       emit
     }) {
-      const format2 = (value) => {
+      const format2 = (value, autoFixed = true) => {
         const {
           min,
           max,
@@ -13677,7 +13725,7 @@
         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);
         }
@@ -13761,7 +13809,7 @@
       };
       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;
         vue.nextTick(() => {
@@ -14357,13 +14405,14 @@
         if (!isSameValue(newValues, props.modelValue)) {
           emit("update:modelValue", newValues);
         }
-      }, {
-        immediate: true
       });
       vue.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);
@@ -15767,7 +15816,7 @@
       });
     }
   };
-  const version = "4.0.0-rc.4";
+  const version = "4.0.0-rc.6";
   function install(app) {
     const components = [
       ActionBar,