vant 4.4.0 → 4.4.1

package/lib/vant.cjs.js

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const use = require("@vant/use");
+const shared = require("@vue/shared");
 const popperjs = require("@vant/popperjs");
 const isDef = (val) => val !== void 0 && val !== null;
 const isFunction = (val) => typeof val === "function";
@@ -364,6 +365,7 @@ function createNamespace(name2) {
 const BORDER = "van-hairline";
 const BORDER_TOP = `${BORDER}--top`;
 const BORDER_LEFT = `${BORDER}--left`;
+const BORDER_RIGHT = `${BORDER}--right`;
 const BORDER_BOTTOM = `${BORDER}--bottom`;
 const BORDER_SURROUND = `${BORDER}--surround`;
 const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
@@ -1339,7 +1341,14 @@ var stdin_default$1F = vue.defineComponent({
         }, null);
       }
     };
-    const onOpened = () => emit("opened");
+    let timer2;
+    const onOpened = () => {
+      if (timer2)
+        clearTimeout(timer2);
+      timer2 = setTimeout(() => {
+        emit("opened");
+      });
+    };
     const onClosed = () => emit("closed");
     const onKeydown = (event) => emit("keydown", event);
     const renderPopup = lazyRender(() => {
@@ -3073,12 +3082,22 @@ var stdin_default$1w = vue.defineComponent({
       }
       return isActive;
     });
+    const parsedClass = vue.ref("");
+    const parsedStyle = vue.ref("");
+    vue.watchEffect(() => {
+      const {
+        titleClass,
+        titleStyle
+      } = props;
+      parsedClass.value = titleClass ? vue.normalizeClass(titleClass) : "";
+      parsedStyle.value = titleStyle && typeof titleStyle !== "string" ? shared.stringifyStyle(vue.normalizeStyle(titleStyle)) : titleStyle;
+    });
     const renderTitle = (onClickTab) => vue.createVNode(TabTitle, vue.mergeProps({
       "key": id,
       "id": `${parent.id}-${index.value}`,
       "ref": parent.setTitleRefs(index.value),
-      "style": props.titleStyle,
-      "class": props.titleClass,
+      "style": parsedStyle.value,
+      "class": parsedClass.value,
       "isActive": active.value,
       "controls": id,
       "scrollable": parent.scrollable.value,
@@ -9830,6 +9849,7 @@ var stdin_default$L = vue.defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
+      initializing: false,
       imageRatio: 0
     });
     const touch = useTouch();
@@ -9844,10 +9864,11 @@ var stdin_default$L = vue.defineComponent({
         moveX,
         moveY,
         moving,
-        zooming
+        zooming,
+        initializing
       } = state;
       const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
+        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
       };
       if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
@@ -10047,6 +10068,10 @@ var stdin_default$L = vue.defineComponent({
       if (isLongImage.value) {
         initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
         state.moveY = initialMoveY;
+        state.initializing = true;
+        use.raf(() => {
+          state.initializing = false;
+        });
       }
       resetScale();
     };
@@ -11627,6 +11652,7 @@ const popoverProps = {
   theme: makeStringProp("light"),
   overlay: Boolean,
   actions: makeArrayProp(),
+  actionsDirection: makeStringProp("vertical"),
   trigger: makeStringProp("click"),
   duration: numericProp,
   showArrow: truthProp,
@@ -11730,7 +11756,9 @@ var stdin_default$z = vue.defineComponent({
         "classPrefix": props.iconPrefix,
         "class": bem$q("action-icon")
       }, null), vue.createVNode("div", {
-        "class": [bem$q("action-text"), BORDER_BOTTOM]
+        "class": [bem$q("action-text"), {
+          [BORDER_BOTTOM]: props.actionsDirection === "vertical"
+        }]
       }, [action.text])];
     };
     const renderAction = (action, index) => {
@@ -11745,7 +11773,9 @@ var stdin_default$z = vue.defineComponent({
         "class": [bem$q("action", {
           disabled,
           "with-icon": icon
-        }), className],
+        }), {
+          [BORDER_RIGHT]: props.actionsDirection === "horizontal"
+        }, className],
         "style": {
           color
         },
@@ -11794,7 +11824,7 @@ var stdin_default$z = vue.defineComponent({
           "class": bem$q("arrow")
         }, null), vue.createVNode("div", {
           "role": "menu",
-          "class": bem$q("content")
+          "class": bem$q("content", props.actionsDirection)
         }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
       })]);
     };
@@ -12981,6 +13011,14 @@ var stdin_default$i = vue.defineComponent({
       const diff = Math.round((value - min) / step) * step;
       return addNumber(min, diff);
     };
+    const updateStartValue = () => {
+      const current22 = props.modelValue;
+      if (isRange(current22)) {
+        startValue = current22.map(format2);
+      } else {
+        startValue = format2(current22);
+      }
+    };
     const handleRangeValue = (value) => {
       var _a, _b;
       const left = (_a = value[0]) != null ? _a : Number(props.min);
@@ -13005,6 +13043,7 @@ var stdin_default$i = vue.defineComponent({
       if (props.disabled || props.readonly) {
         return;
       }
+      updateStartValue();
       const {
         min,
         reverse,
@@ -13044,11 +13083,7 @@ var stdin_default$i = vue.defineComponent({
       }
       touch.start(event);
       current2 = props.modelValue;
-      if (isRange(current2)) {
-        startValue = current2.map(format2);
-      } else {
-        startValue = format2(current2);
-      }
+      updateStartValue();
       dragStatus.value = "start";
     };
     const onTouchMove = (event) => {
@@ -15775,7 +15810,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.4.0";
+const version = "4.4.1";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.es.js

@@ -1,5 +1,6 @@
-import { unref, ref, reactive, inject, watch, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, mergeProps, Transition, withDirectives, vShow, Teleport, Fragment, onBeforeUpdate, createTextVNode, onUnmounted, createApp, resolveDirective, withKeys, onUpdated, Comment, Text, h } from "vue";
+import { unref, ref, reactive, inject, watch, onMounted, nextTick, createVNode, defineComponent, getCurrentInstance, computed, onActivated, onDeactivated, onBeforeUnmount, provide, watchEffect, mergeProps, Transition, withDirectives, vShow, Teleport, Fragment, onBeforeUpdate, normalizeClass, normalizeStyle, createTextVNode, onUnmounted, createApp, resolveDirective, withKeys, onUpdated, Comment, Text, h } from "vue";
 import { useWindowSize, useRect, useChildren, useParent, onMountedOrActivated, getScrollParent, useEventListener, cancelRaf, raf, useScrollParent, usePageVisibility, doubleRaf, CUSTOM_FIELD_INJECTION_KEY, useCustomFieldValue, inBrowser as inBrowser$1, useToggle, useCountDown, useClickAway } from "@vant/use";
+import { stringifyStyle } from "@vue/shared";
 import { offsetModifier, createPopper } from "@vant/popperjs";
 const isDef = (val) => val !== void 0 && val !== null;
 const isFunction = (val) => typeof val === "function";
@@ -362,6 +363,7 @@ function createNamespace(name2) {
 const BORDER = "van-hairline";
 const BORDER_TOP = `${BORDER}--top`;
 const BORDER_LEFT = `${BORDER}--left`;
+const BORDER_RIGHT = `${BORDER}--right`;
 const BORDER_BOTTOM = `${BORDER}--bottom`;
 const BORDER_SURROUND = `${BORDER}--surround`;
 const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
@@ -1337,7 +1339,14 @@ var stdin_default$1F = defineComponent({
         }, null);
       }
     };
-    const onOpened = () => emit("opened");
+    let timer2;
+    const onOpened = () => {
+      if (timer2)
+        clearTimeout(timer2);
+      timer2 = setTimeout(() => {
+        emit("opened");
+      });
+    };
     const onClosed = () => emit("closed");
     const onKeydown = (event) => emit("keydown", event);
     const renderPopup = lazyRender(() => {
@@ -3071,12 +3080,22 @@ var stdin_default$1w = defineComponent({
       }
       return isActive;
     });
+    const parsedClass = ref("");
+    const parsedStyle = ref("");
+    watchEffect(() => {
+      const {
+        titleClass,
+        titleStyle
+      } = props;
+      parsedClass.value = titleClass ? normalizeClass(titleClass) : "";
+      parsedStyle.value = titleStyle && typeof titleStyle !== "string" ? stringifyStyle(normalizeStyle(titleStyle)) : titleStyle;
+    });
     const renderTitle = (onClickTab) => createVNode(TabTitle, mergeProps({
       "key": id,
       "id": `${parent.id}-${index.value}`,
       "ref": parent.setTitleRefs(index.value),
-      "style": props.titleStyle,
-      "class": props.titleClass,
+      "style": parsedStyle.value,
+      "class": parsedClass.value,
       "isActive": active.value,
       "controls": id,
       "scrollable": parent.scrollable.value,
@@ -9828,6 +9847,7 @@ var stdin_default$L = defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
+      initializing: false,
       imageRatio: 0
     });
     const touch = useTouch();
@@ -9842,10 +9862,11 @@ var stdin_default$L = defineComponent({
         moveX,
         moveY,
         moving,
-        zooming
+        zooming,
+        initializing
       } = state;
       const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
+        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
       };
       if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
@@ -10045,6 +10066,10 @@ var stdin_default$L = defineComponent({
       if (isLongImage.value) {
         initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
         state.moveY = initialMoveY;
+        state.initializing = true;
+        raf(() => {
+          state.initializing = false;
+        });
       }
       resetScale();
     };
@@ -11625,6 +11650,7 @@ const popoverProps = {
   theme: makeStringProp("light"),
   overlay: Boolean,
   actions: makeArrayProp(),
+  actionsDirection: makeStringProp("vertical"),
   trigger: makeStringProp("click"),
   duration: numericProp,
   showArrow: truthProp,
@@ -11728,7 +11754,9 @@ var stdin_default$z = defineComponent({
         "classPrefix": props.iconPrefix,
         "class": bem$q("action-icon")
       }, null), createVNode("div", {
-        "class": [bem$q("action-text"), BORDER_BOTTOM]
+        "class": [bem$q("action-text"), {
+          [BORDER_BOTTOM]: props.actionsDirection === "vertical"
+        }]
       }, [action.text])];
     };
     const renderAction = (action, index) => {
@@ -11743,7 +11771,9 @@ var stdin_default$z = defineComponent({
         "class": [bem$q("action", {
           disabled,
           "with-icon": icon
-        }), className],
+        }), {
+          [BORDER_RIGHT]: props.actionsDirection === "horizontal"
+        }, className],
         "style": {
           color
         },
@@ -11792,7 +11822,7 @@ var stdin_default$z = defineComponent({
           "class": bem$q("arrow")
         }, null), createVNode("div", {
           "role": "menu",
-          "class": bem$q("content")
+          "class": bem$q("content", props.actionsDirection)
         }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
       })]);
     };
@@ -12979,6 +13009,14 @@ var stdin_default$i = defineComponent({
       const diff = Math.round((value - min) / step) * step;
       return addNumber(min, diff);
     };
+    const updateStartValue = () => {
+      const current22 = props.modelValue;
+      if (isRange(current22)) {
+        startValue = current22.map(format2);
+      } else {
+        startValue = format2(current22);
+      }
+    };
     const handleRangeValue = (value) => {
       var _a, _b;
       const left = (_a = value[0]) != null ? _a : Number(props.min);
@@ -13003,6 +13041,7 @@ var stdin_default$i = defineComponent({
       if (props.disabled || props.readonly) {
         return;
       }
+      updateStartValue();
       const {
         min,
         reverse,
@@ -13042,11 +13081,7 @@ var stdin_default$i = defineComponent({
       }
       touch.start(event);
       current2 = props.modelValue;
-      if (isRange(current2)) {
-        startValue = current2.map(format2);
-      } else {
-        startValue = format2(current2);
-      }
+      updateStartValue();
       dragStatus.value = "start";
     };
     const onTouchMove = (event) => {
@@ -15773,7 +15808,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.4.0";
+const version = "4.4.1";
 function install(app) {
   const components = [
     ActionBar,

package/lib/vant.js

@@ -753,6 +753,7 @@
   const BORDER = "van-hairline";
   const BORDER_TOP = `${BORDER}--top`;
   const BORDER_LEFT = `${BORDER}--left`;
+  const BORDER_RIGHT = `${BORDER}--right`;
   const BORDER_BOTTOM = `${BORDER}--bottom`;
   const BORDER_SURROUND = `${BORDER}--surround`;
   const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
@@ -1728,7 +1729,14 @@
           }, null);
         }
       };
-      const onOpened = () => emit("opened");
+      let timer2;
+      const onOpened = () => {
+        if (timer2)
+          clearTimeout(timer2);
+        timer2 = setTimeout(() => {
+          emit("opened");
+        });
+      };
       const onClosed = () => emit("closed");
       const onKeydown = (event) => emit("keydown", event);
       const renderPopup = lazyRender(() => {
@@ -2266,6 +2274,32 @@
     });
     return propRef;
   };
+  const isString = (val) => typeof val === "string";
+  const cacheStringFunction = (fn) => {
+    const cache = /* @__PURE__ */ Object.create(null);
+    return (str) => {
+      const hit = cache[str];
+      return hit || (cache[str] = fn(str));
+    };
+  };
+  const hyphenateRE = /\B([A-Z])/g;
+  const hyphenate = cacheStringFunction(
+    (str) => str.replace(hyphenateRE, "-$1").toLowerCase()
+  );
+  function stringifyStyle(styles) {
+    let ret = "";
+    if (!styles || isString(styles)) {
+      return ret;
+    }
+    for (const key in styles) {
+      const value = styles[key];
+      const normalizedKey = key.startsWith(`--`) ? key : hyphenate(key);
+      if (isString(value) || typeof value === "number") {
+        ret += `${normalizedKey}:${value};`;
+      }
+    }
+    return ret;
+  }
   function scrollLeftTo(scroller, to, duration) {
     let rafId;
     let count = 0;
@@ -3453,12 +3487,22 @@
         }
         return isActive;
       });
+      const parsedClass = vue.ref("");
+      const parsedStyle = vue.ref("");
+      vue.watchEffect(() => {
+        const {
+          titleClass,
+          titleStyle
+        } = props;
+        parsedClass.value = titleClass ? vue.normalizeClass(titleClass) : "";
+        parsedStyle.value = titleStyle && typeof titleStyle !== "string" ? stringifyStyle(vue.normalizeStyle(titleStyle)) : titleStyle;
+      });
       const renderTitle = (onClickTab) => vue.createVNode(TabTitle, vue.mergeProps({
         "key": id,
         "id": `${parent.id}-${index.value}`,
         "ref": parent.setTitleRefs(index.value),
-        "style": props.titleStyle,
-        "class": props.titleClass,
+        "style": parsedStyle.value,
+        "class": parsedClass.value,
         "isActive": active.value,
         "controls": id,
         "scrollable": parent.scrollable.value,
@@ -10181,6 +10225,7 @@
         moveY: 0,
         moving: false,
         zooming: false,
+        initializing: false,
         imageRatio: 0
       });
       const touch = useTouch();
@@ -10195,10 +10240,11 @@
           moveX,
           moveY,
           moving,
-          zooming
+          zooming,
+          initializing
         } = state;
         const style = {
-          transitionDuration: zooming || moving ? "0s" : ".3s"
+          transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
         };
         if (scale !== 1 || isLongImage.value) {
           style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
@@ -10398,6 +10444,10 @@
         if (isLongImage.value) {
           initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
           state.moveY = initialMoveY;
+          state.initializing = true;
+          raf(() => {
+            state.initializing = false;
+          });
         }
         resetScale();
       };
@@ -12914,6 +12964,7 @@
     theme: makeStringProp("light"),
     overlay: Boolean,
     actions: makeArrayProp(),
+    actionsDirection: makeStringProp("vertical"),
     trigger: makeStringProp("click"),
     duration: numericProp,
     showArrow: truthProp,
@@ -13017,7 +13068,9 @@
           "classPrefix": props.iconPrefix,
           "class": bem$q("action-icon")
         }, null), vue.createVNode("div", {
-          "class": [bem$q("action-text"), BORDER_BOTTOM]
+          "class": [bem$q("action-text"), {
+            [BORDER_BOTTOM]: props.actionsDirection === "vertical"
+          }]
         }, [action.text])];
       };
       const renderAction = (action, index) => {
@@ -13032,7 +13085,9 @@
           "class": [bem$q("action", {
             disabled,
             "with-icon": icon
-          }), className],
+          }), {
+            [BORDER_RIGHT]: props.actionsDirection === "horizontal"
+          }, className],
           "style": {
             color
           },
@@ -13081,7 +13136,7 @@
             "class": bem$q("arrow")
           }, null), vue.createVNode("div", {
             "role": "menu",
-            "class": bem$q("content")
+            "class": bem$q("content", props.actionsDirection)
           }, [slots.default ? slots.default() : props.actions.map(renderAction)])]
         })]);
       };
@@ -14265,6 +14320,14 @@
         const diff = Math.round((value - min) / step) * step;
         return addNumber(min, diff);
       };
+      const updateStartValue = () => {
+        const current22 = props.modelValue;
+        if (isRange(current22)) {
+          startValue = current22.map(format2);
+        } else {
+          startValue = format2(current22);
+        }
+      };
       const handleRangeValue = (value) => {
         var _a, _b;
         const left2 = (_a = value[0]) != null ? _a : Number(props.min);
@@ -14289,6 +14352,7 @@
         if (props.disabled || props.readonly) {
           return;
         }
+        updateStartValue();
         const {
           min,
           reverse,
@@ -14328,11 +14392,7 @@
         }
         touch.start(event);
         current2 = props.modelValue;
-        if (isRange(current2)) {
-          startValue = current2.map(format2);
-        } else {
-          startValue = format2(current2);
-        }
+        updateStartValue();
         dragStatus.value = "start";
       };
       const onTouchMove = (event) => {
@@ -17033,7 +17093,7 @@
       });
     }
   };
-  const version = "4.4.0";
+  const version = "4.4.1";
   function install(app) {
     const components = [
       ActionBar,