vant 4.3.2 → 4.4.1

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";
@@ -235,7 +236,7 @@ function deepAssign(to, from) {
   });
   return to;
 }
-var stdin_default$1P = {
+var stdin_default$1Q = {
   name: "姓名",
   tel: "电话",
   save: "保存",
@@ -299,7 +300,7 @@ var stdin_default$1P = {
 };
 const lang = ref("zh-CN");
 const messages = reactive({
-  "zh-CN": stdin_default$1P
+  "zh-CN": stdin_default$1Q
 });
 const Locale = {
   messages() {
@@ -314,11 +315,11 @@ const Locale = {
   }
 };
 const useCurrentLang = () => lang;
-var stdin_default$1O = Locale;
+var stdin_default$1P = Locale;
 function createTranslate(name2) {
   const prefix = camelize(name2) + ".";
   return (path, ...args) => {
-    const messages2 = stdin_default$1O.messages();
+    const messages2 = stdin_default$1P.messages();
     const message = get(messages2, prefix + path) || get(messages2, path);
     return isFunction(message) ? message(...args) : message;
   };
@@ -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`;
@@ -440,20 +442,20 @@ function usePlaceholder(contentRef, bem2) {
     }
   }, [renderContent()]);
 }
-const [name$1E, bem$1z] = createNamespace("action-bar");
-const ACTION_BAR_KEY = Symbol(name$1E);
+const [name$1F, bem$1A] = createNamespace("action-bar");
+const ACTION_BAR_KEY = Symbol(name$1F);
 const actionBarProps = {
   placeholder: Boolean,
   safeAreaInsetBottom: truthProp
 };
-var stdin_default$1N = defineComponent({
-  name: name$1E,
+var stdin_default$1O = defineComponent({
+  name: name$1F,
   props: actionBarProps,
   setup(props, {
     slots
   }) {
     const root = ref();
-    const renderPlaceholder = usePlaceholder(root, bem$1z);
+    const renderPlaceholder = usePlaceholder(root, bem$1A);
     const {
       linkChildren
     } = useChildren(ACTION_BAR_KEY);
@@ -462,7 +464,7 @@ var stdin_default$1N = defineComponent({
       var _a;
       return createVNode("div", {
         "ref": root,
-        "class": [bem$1z(), {
+        "class": [bem$1A(), {
           "van-safe-area-bottom": props.safeAreaInsetBottom
         }]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
@@ -475,7 +477,7 @@ var stdin_default$1N = defineComponent({
     };
   }
 });
-const ActionBar = withInstall(stdin_default$1N);
+const ActionBar = withInstall(stdin_default$1O);
 function useExpose(apis) {
   const instance2 = getCurrentInstance();
   if (instance2) {
@@ -503,7 +505,7 @@ function useRoute() {
   const vm = getCurrentInstance().proxy;
   return () => route(vm);
 }
-const [name$1D, bem$1y] = createNamespace("badge");
+const [name$1E, bem$1z] = createNamespace("badge");
 const badgeProps = {
   dot: Boolean,
   max: numericProp,
@@ -514,8 +516,8 @@ const badgeProps = {
   showZero: truthProp,
   position: makeStringProp("top-right")
 };
-var stdin_default$1M = defineComponent({
-  name: name$1D,
+var stdin_default$1N = defineComponent({
+  name: name$1E,
   props: badgeProps,
   setup(props, {
     slots
@@ -578,7 +580,7 @@ var stdin_default$1M = defineComponent({
     const renderBadge = () => {
       if (hasContent() || props.dot) {
         return createVNode("div", {
-          "class": bem$1y([props.position, {
+          "class": bem$1z([props.position, {
             dot: props.dot,
             fixed: !!slots.default
           }]),
@@ -592,7 +594,7 @@ var stdin_default$1M = defineComponent({
           tag
         } = props;
         return createVNode(tag, {
-          "class": bem$1y("wrapper")
+          "class": bem$1z("wrapper")
         }, {
           default: () => [slots.default(), renderBadge()]
         });
@@ -601,14 +603,14 @@ var stdin_default$1M = defineComponent({
     };
   }
 });
-const Badge = withInstall(stdin_default$1M);
+const Badge = withInstall(stdin_default$1N);
 let globalZIndex = 2e3;
 const useGlobalZIndex = () => ++globalZIndex;
 const setGlobalZIndex = (val) => {
   globalZIndex = val;
 };
-const [name$1C, bem$1x] = createNamespace("config-provider");
-const CONFIG_PROVIDER_KEY = Symbol(name$1C);
+const [name$1D, bem$1y] = createNamespace("config-provider");
+const CONFIG_PROVIDER_KEY = Symbol(name$1D);
 const configProviderProps = {
   tag: makeStringProp("div"),
   theme: makeStringProp("light"),
@@ -625,8 +627,8 @@ function mapThemeVarsToCSSVars(themeVars) {
   });
   return cssVars;
 }
-var stdin_default$1L = defineComponent({
-  name: name$1C,
+var stdin_default$1M = defineComponent({
+  name: name$1D,
   props: configProviderProps,
   setup(props, {
     slots
@@ -658,7 +660,7 @@ var stdin_default$1L = defineComponent({
       }
     });
     return () => createVNode(props.tag, {
-      "class": bem$1x(),
+      "class": bem$1y(),
       "style": style.value
     }, {
       default: () => {
@@ -668,7 +670,7 @@ var stdin_default$1L = defineComponent({
     });
   }
 });
-const [name$1B, bem$1w] = createNamespace("icon");
+const [name$1C, bem$1x] = createNamespace("icon");
 const isImage$1 = (name2) => name2 == null ? void 0 : name2.includes("/");
 const iconProps = {
   dot: Boolean,
@@ -680,14 +682,14 @@ const iconProps = {
   badgeProps: Object,
   classPrefix: String
 };
-var stdin_default$1K = defineComponent({
-  name: name$1B,
+var stdin_default$1L = defineComponent({
+  name: name$1C,
   props: iconProps,
   setup(props, {
     slots
   }) {
     const config = inject(CONFIG_PROVIDER_KEY, null);
-    const classPrefix = computed(() => props.classPrefix || (config == null ? void 0 : config.iconPrefix) || bem$1w());
+    const classPrefix = computed(() => props.classPrefix || (config == null ? void 0 : config.iconPrefix) || bem$1x());
     return () => {
       const {
         tag,
@@ -711,7 +713,7 @@ var stdin_default$1K = defineComponent({
         default: () => {
           var _a;
           return [(_a = slots.default) == null ? void 0 : _a.call(slots), isImageIcon && createVNode("img", {
-            "class": bem$1w("image"),
+            "class": bem$1x("image"),
             "src": name2
           }, null)];
         }
@@ -719,13 +721,13 @@ var stdin_default$1K = defineComponent({
     };
   }
 });
-const Icon = withInstall(stdin_default$1K);
-const [name$1A, bem$1v] = createNamespace("loading");
+const Icon = withInstall(stdin_default$1L);
+const [name$1B, bem$1w] = createNamespace("loading");
 const SpinIcon = Array(12).fill(null).map((_, index) => createVNode("i", {
-  "class": bem$1v("line", String(index + 1))
+  "class": bem$1w("line", String(index + 1))
 }, null));
 const CircularIcon = createVNode("svg", {
-  "class": bem$1v("circular"),
+  "class": bem$1w("circular"),
   "viewBox": "25 25 50 50"
 }, [createVNode("circle", {
   "cx": "50",
@@ -741,8 +743,8 @@ const loadingProps = {
   textSize: numericProp,
   textColor: String
 };
-var stdin_default$1J = defineComponent({
-  name: name$1A,
+var stdin_default$1K = defineComponent({
+  name: name$1B,
   props: loadingProps,
   setup(props, {
     slots
@@ -753,7 +755,7 @@ var stdin_default$1J = defineComponent({
     const renderIcon = () => {
       const DefaultIcon = props.type === "spinner" ? SpinIcon : CircularIcon;
       return createVNode("span", {
-        "class": bem$1v("spinner", props.type),
+        "class": bem$1w("spinner", props.type),
         "style": spinnerStyle.value
       }, [slots.icon ? slots.icon() : DefaultIcon]);
     };
@@ -761,7 +763,7 @@ var stdin_default$1J = defineComponent({
       var _a;
       if (slots.default) {
         return createVNode("span", {
-          "class": bem$1v("text"),
+          "class": bem$1w("text"),
           "style": {
             fontSize: addUnit(props.textSize),
             color: (_a = props.textColor) != null ? _a : props.color
@@ -775,7 +777,7 @@ var stdin_default$1J = defineComponent({
         vertical
       } = props;
       return createVNode("div", {
-        "class": bem$1v([type, {
+        "class": bem$1w([type, {
           vertical
         }]),
         "aria-live": "polite",
@@ -784,8 +786,8 @@ var stdin_default$1J = defineComponent({
     };
   }
 });
-const Loading = withInstall(stdin_default$1J);
-const [name$1z, bem$1u] = createNamespace("button");
+const Loading = withInstall(stdin_default$1K);
+const [name$1A, bem$1v] = createNamespace("button");
 const buttonProps = extend({}, routeProps, {
   tag: makeStringProp("button"),
   text: String,
@@ -807,8 +809,8 @@ const buttonProps = extend({}, routeProps, {
   loadingType: String,
   iconPosition: makeStringProp("left")
 });
-var stdin_default$1I = defineComponent({
-  name: name$1z,
+var stdin_default$1J = defineComponent({
+  name: name$1A,
   props: buttonProps,
   emits: ["click"],
   setup(props, {
@@ -823,7 +825,7 @@ var stdin_default$1I = defineComponent({
       return createVNode(Loading, {
         "size": props.loadingSize,
         "type": props.loadingType,
-        "class": bem$1u("loading")
+        "class": bem$1v("loading")
       }, null);
     };
     const renderIcon = () => {
@@ -832,13 +834,13 @@ var stdin_default$1I = defineComponent({
       }
       if (slots.icon) {
         return createVNode("div", {
-          "class": bem$1u("icon")
+          "class": bem$1v("icon")
         }, [slots.icon()]);
       }
       if (props.icon) {
         return createVNode(Icon, {
           "name": props.icon,
-          "class": bem$1u("icon"),
+          "class": bem$1v("icon"),
           "classPrefix": props.iconPrefix
         }, null);
       }
@@ -852,7 +854,7 @@ var stdin_default$1I = defineComponent({
       }
       if (text) {
         return createVNode("span", {
-          "class": bem$1u("text")
+          "class": bem$1v("text")
         }, [text]);
       }
     };
@@ -899,7 +901,7 @@ var stdin_default$1I = defineComponent({
         nativeType,
         iconPosition
       } = props;
-      const classes = [bem$1u([type, size, {
+      const classes = [bem$1v([type, size, {
         plain,
         block,
         round,
@@ -918,14 +920,14 @@ var stdin_default$1I = defineComponent({
         "onClick": onClick
       }, {
         default: () => [createVNode("div", {
-          "class": bem$1u("content")
+          "class": bem$1v("content")
         }, [iconPosition === "left" && renderIcon(), renderText(), iconPosition === "right" && renderIcon()])]
       });
     };
   }
 });
-const Button = withInstall(stdin_default$1I);
-const [name$1y, bem$1t] = createNamespace("action-bar-button");
+const Button = withInstall(stdin_default$1J);
+const [name$1z, bem$1u] = createNamespace("action-bar-button");
 const actionBarButtonProps = extend({}, routeProps, {
   type: String,
   text: String,
@@ -934,8 +936,8 @@ const actionBarButtonProps = extend({}, routeProps, {
   loading: Boolean,
   disabled: Boolean
 });
-var stdin_default$1H = defineComponent({
-  name: name$1y,
+var stdin_default$1I = defineComponent({
+  name: name$1z,
   props: actionBarButtonProps,
   setup(props, {
     slots
@@ -970,7 +972,7 @@ var stdin_default$1H = defineComponent({
         disabled
       } = props;
       return createVNode(Button, {
-        "class": bem$1t([type, {
+        "class": bem$1u([type, {
           last: isLast.value,
           first: isFirst.value
         }]),
@@ -987,8 +989,8 @@ var stdin_default$1H = defineComponent({
     };
   }
 });
-const ActionBarButton = withInstall(stdin_default$1H);
-const [name$1x, bem$1s] = createNamespace("action-bar-icon");
+const ActionBarButton = withInstall(stdin_default$1I);
+const [name$1y, bem$1t] = createNamespace("action-bar-icon");
 const actionBarIconProps = extend({}, routeProps, {
   dot: Boolean,
   text: String,
@@ -999,8 +1001,8 @@ const actionBarIconProps = extend({}, routeProps, {
   badgeProps: Object,
   iconPrefix: String
 });
-var stdin_default$1G = defineComponent({
-  name: name$1x,
+var stdin_default$1H = defineComponent({
+  name: name$1y,
   props: actionBarIconProps,
   setup(props, {
     slots
@@ -1020,7 +1022,7 @@ var stdin_default$1G = defineComponent({
       if (slots.icon) {
         return createVNode(Badge, mergeProps({
           "dot": dot,
-          "class": bem$1s("icon"),
+          "class": bem$1t("icon"),
           "content": badge
         }, badgeProps2), {
           default: slots.icon
@@ -1032,20 +1034,20 @@ var stdin_default$1G = defineComponent({
         "name": icon,
         "badge": badge,
         "color": color,
-        "class": [bem$1s("icon"), iconClass],
+        "class": [bem$1t("icon"), iconClass],
         "badgeProps": badgeProps2,
         "classPrefix": iconPrefix
       }, null);
     };
     return () => createVNode("div", {
       "role": "button",
-      "class": bem$1s(),
+      "class": bem$1t(),
       "tabindex": 0,
       "onClick": route2
     }, [renderIcon(), slots.default ? slots.default() : props.text]);
   }
 });
-const ActionBarIcon = withInstall(stdin_default$1G);
+const ActionBarIcon = withInstall(stdin_default$1H);
 const popupSharedProps = {
   // whether to show popup
   show: Boolean,
@@ -1196,7 +1198,7 @@ function useLazyRender(show) {
   );
   return (render) => () => inited.value ? render() : null;
 }
-const [name$1w, bem$1r] = createNamespace("overlay");
+const [name$1x, bem$1s] = createNamespace("overlay");
 const overlayProps = {
   show: Boolean,
   zIndex: numericProp,
@@ -1206,8 +1208,8 @@ const overlayProps = {
   lazyRender: truthProp,
   customStyle: Object
 };
-var stdin_default$1F = defineComponent({
-  name: name$1w,
+var stdin_default$1G = defineComponent({
+  name: name$1x,
   props: overlayProps,
   setup(props, {
     slots
@@ -1228,7 +1230,7 @@ var stdin_default$1F = defineComponent({
       return withDirectives(createVNode("div", {
         "ref": root,
         "style": style,
-        "class": [bem$1r(), props.className]
+        "class": [bem$1s(), props.className]
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]), [[vShow, props.show]]);
     });
     useEventListener("touchmove", onTouchMove, {
@@ -1242,7 +1244,7 @@ var stdin_default$1F = defineComponent({
     });
   }
 });
-const Overlay = withInstall(stdin_default$1F);
+const Overlay = withInstall(stdin_default$1G);
 const popupProps$2 = extend({}, popupSharedProps, {
   round: Boolean,
   position: makeStringProp("center"),
@@ -1255,9 +1257,9 @@ const popupProps$2 = extend({}, popupSharedProps, {
   safeAreaInsetTop: Boolean,
   safeAreaInsetBottom: Boolean
 });
-const [name$1v, bem$1q] = createNamespace("popup");
-var stdin_default$1E = defineComponent({
-  name: name$1v,
+const [name$1w, bem$1r] = createNamespace("popup");
+var stdin_default$1F = defineComponent({
+  name: name$1w,
   inheritAttrs: false,
   props: popupProps$2,
   emits: ["open", "close", "opened", "closed", "keydown", "update:show", "clickOverlay", "clickCloseIcon"],
@@ -1331,13 +1333,20 @@ var stdin_default$1E = defineComponent({
           "role": "button",
           "tabindex": 0,
           "name": props.closeIcon,
-          "class": [bem$1q("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK],
+          "class": [bem$1r("close-icon", props.closeIconPosition), HAPTICS_FEEDBACK],
           "classPrefix": props.iconPrefix,
           "onClick": onClickCloseIcon
         }, 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(() => {
@@ -1353,7 +1362,7 @@ var stdin_default$1E = defineComponent({
         "style": style.value,
         "role": "dialog",
         "tabindex": 0,
-        "class": [bem$1q({
+        "class": [bem$1r({
           round,
           [position]: position
         }), {
@@ -1434,8 +1443,8 @@ var stdin_default$1E = defineComponent({
     };
   }
 });
-const Popup = withInstall(stdin_default$1E);
-const [name$1u, bem$1p] = createNamespace("action-sheet");
+const Popup = withInstall(stdin_default$1F);
+const [name$1v, bem$1q] = createNamespace("action-sheet");
 const actionSheetProps = extend({}, popupSharedProps, {
   title: String,
   round: truthProp,
@@ -1449,8 +1458,8 @@ const actionSheetProps = extend({}, popupSharedProps, {
   safeAreaInsetBottom: truthProp
 });
 const popupInheritKeys$2 = [...popupSharedPropKeys, "round", "closeOnPopstate", "safeAreaInsetBottom"];
-var stdin_default$1D = defineComponent({
-  name: name$1u,
+var stdin_default$1E = defineComponent({
+  name: name$1v,
   props: actionSheetProps,
   emits: ["select", "cancel", "update:show"],
   setup(props, {
@@ -1465,10 +1474,10 @@ var stdin_default$1D = defineComponent({
     const renderHeader = () => {
       if (props.title) {
         return createVNode("div", {
-          "class": bem$1p("header")
+          "class": bem$1q("header")
         }, [props.title, props.closeable && createVNode(Icon, {
           "name": props.closeIcon,
-          "class": [bem$1p("close"), HAPTICS_FEEDBACK],
+          "class": [bem$1q("close"), HAPTICS_FEEDBACK],
           "onClick": onCancel
         }, null)]);
       }
@@ -1476,10 +1485,10 @@ var stdin_default$1D = defineComponent({
     const renderCancel = () => {
       if (slots.cancel || props.cancelText) {
         return [createVNode("div", {
-          "class": bem$1p("gap")
+          "class": bem$1q("gap")
         }, null), createVNode("button", {
           "type": "button",
-          "class": bem$1p("cancel"),
+          "class": bem$1q("cancel"),
           "onClick": onCancel
         }, [slots.cancel ? slots.cancel() : props.cancelText])];
       }
@@ -1487,7 +1496,7 @@ var stdin_default$1D = defineComponent({
     const renderActionContent = (action, index) => {
       if (action.loading) {
         return createVNode(Loading, {
-          "class": bem$1p("loading-icon")
+          "class": bem$1q("loading-icon")
         }, null);
       }
       if (slots.action) {
@@ -1497,9 +1506,9 @@ var stdin_default$1D = defineComponent({
         });
       }
       return [createVNode("span", {
-        "class": bem$1p("name")
+        "class": bem$1q("name")
       }, [action.name]), action.subname && createVNode("div", {
-        "class": bem$1p("subname")
+        "class": bem$1q("subname")
       }, [action.subname])];
     };
     const renderAction = (action, index) => {
@@ -1527,7 +1536,7 @@ var stdin_default$1D = defineComponent({
         "style": {
           color
         },
-        "class": [bem$1p("item", {
+        "class": [bem$1q("item", {
           loading,
           disabled
         }), className],
@@ -1538,26 +1547,26 @@ var stdin_default$1D = defineComponent({
       if (props.description || slots.description) {
         const content = slots.description ? slots.description() : props.description;
         return createVNode("div", {
-          "class": bem$1p("description")
+          "class": bem$1q("description")
         }, [content]);
       }
     };
     return () => createVNode(Popup, mergeProps({
-      "class": bem$1p(),
+      "class": bem$1q(),
       "position": "bottom",
       "onUpdate:show": updateShow
     }, pick(props, popupInheritKeys$2)), {
       default: () => {
         var _a;
         return [renderHeader(), renderDescription(), createVNode("div", {
-          "class": bem$1p("content")
+          "class": bem$1q("content")
         }, [props.actions.map(renderAction), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderCancel()];
       }
     });
   }
 });
-const ActionSheet = withInstall(stdin_default$1D);
-const [name$1t, bem$1o, t$k] = createNamespace("picker");
+const ActionSheet = withInstall(stdin_default$1E);
+const [name$1u, bem$1p, t$k] = createNamespace("picker");
 const getFirstEnabledOption = (options) => options.find((option) => !option.disabled) || options[0];
 function getColumnsType(columns, fields) {
   const firstColumn = columns[0];
@@ -1626,10 +1635,10 @@ function assignDefaultFields(fields) {
 const DEFAULT_DURATION = 200;
 const MOMENTUM_TIME = 300;
 const MOMENTUM_DISTANCE = 15;
-const [name$1s, bem$1n] = createNamespace("picker-column");
-const PICKER_KEY = Symbol(name$1s);
-var stdin_default$1C = defineComponent({
-  name: name$1s,
+const [name$1t, bem$1o] = createNamespace("picker-column");
+const PICKER_KEY = Symbol(name$1t);
+var stdin_default$1D = defineComponent({
+  name: name$1t,
   props: {
     value: numericProp,
     fields: makeRequiredProp(Object),
@@ -1768,7 +1777,7 @@ var stdin_default$1C = defineComponent({
           role: "button",
           style: optionStyle,
           tabindex: disabled ? -1 : 0,
-          class: [bem$1n("item", {
+          class: [bem$1o("item", {
             disabled,
             selected: value === props.value
           }), option.className],
@@ -1796,7 +1805,7 @@ var stdin_default$1C = defineComponent({
     });
     return () => createVNode("div", {
       "ref": root,
-      "class": bem$1n(),
+      "class": bem$1o(),
       "onTouchstartPassive": onTouchStart,
       "onTouchend": onTouchEnd,
       "onTouchcancel": onTouchEnd
@@ -1807,12 +1816,12 @@ var stdin_default$1C = defineComponent({
         transitionDuration: `${currentDuration.value}ms`,
         transitionProperty: currentDuration.value ? "all" : "none"
       },
-      "class": bem$1n("wrapper"),
+      "class": bem$1o("wrapper"),
       "onTransitionend": stopMomentum
     }, [renderOptions()])]);
   }
 });
-const [name$1r] = createNamespace("picker-toolbar");
+const [name$1s] = createNamespace("picker-toolbar");
 const pickerToolbarProps = {
   title: String,
   cancelButtonText: String,
@@ -1820,8 +1829,8 @@ const pickerToolbarProps = {
 };
 const pickerToolbarSlots = ["cancel", "confirm", "title", "toolbar"];
 const pickerToolbarPropKeys = Object.keys(pickerToolbarProps);
-var stdin_default$1B = defineComponent({
-  name: name$1r,
+var stdin_default$1C = defineComponent({
+  name: name$1s,
   props: pickerToolbarProps,
   emits: ["confirm", "cancel"],
   setup(props, {
@@ -1834,7 +1843,7 @@ var stdin_default$1B = defineComponent({
       }
       if (props.title) {
         return createVNode("div", {
-          "class": [bem$1o("title"), "van-ellipsis"]
+          "class": [bem$1p("title"), "van-ellipsis"]
         }, [props.title]);
       }
     };
@@ -1844,7 +1853,7 @@ var stdin_default$1B = defineComponent({
       const text = props.cancelButtonText || t$k("cancel");
       return createVNode("button", {
         "type": "button",
-        "class": [bem$1o("cancel"), HAPTICS_FEEDBACK],
+        "class": [bem$1p("cancel"), HAPTICS_FEEDBACK],
         "onClick": onCancel
       }, [slots.cancel ? slots.cancel() : text]);
     };
@@ -1852,12 +1861,12 @@ var stdin_default$1B = defineComponent({
       const text = props.confirmButtonText || t$k("confirm");
       return createVNode("button", {
         "type": "button",
-        "class": [bem$1o("confirm"), HAPTICS_FEEDBACK],
+        "class": [bem$1p("confirm"), HAPTICS_FEEDBACK],
         "onClick": onConfirm
       }, [slots.confirm ? slots.confirm() : text]);
     };
     return () => createVNode("div", {
-      "class": bem$1o("toolbar")
+      "class": bem$1p("toolbar")
     }, [slots.toolbar ? slots.toolbar() : [renderCancel(), renderTitle(), renderConfirm()]]);
   }
 });
@@ -1965,7 +1974,7 @@ function useVisibilityChange(target, onChange) {
   onBeforeUnmount(unobserve);
   onMountedOrActivated(observe);
 }
-const [name$1q, bem$1m] = createNamespace("sticky");
+const [name$1r, bem$1n] = createNamespace("sticky");
 const stickyProps = {
   zIndex: numericProp,
   position: makeStringProp("top"),
@@ -1973,8 +1982,8 @@ const stickyProps = {
   offsetTop: makeNumericProp(0),
   offsetBottom: makeNumericProp(0)
 };
-var stdin_default$1A = defineComponent({
-  name: name$1q,
+var stdin_default$1B = defineComponent({
+  name: name$1r,
   props: stickyProps,
   emits: ["scroll", "change"],
   setup(props, {
@@ -2087,7 +2096,7 @@ var stdin_default$1A = defineComponent({
         "ref": root,
         "style": rootStyle.value
       }, [createVNode("div", {
-        "class": bem$1m({
+        "class": bem$1n({
           fixed: state.fixed && !isReset.value
         }),
         "style": stickyStyle.value
@@ -2095,8 +2104,8 @@ var stdin_default$1A = defineComponent({
     };
   }
 });
-const Sticky = withInstall(stdin_default$1A);
-const [name$1p, bem$1l] = createNamespace("swipe");
+const Sticky = withInstall(stdin_default$1B);
+const [name$1q, bem$1m] = createNamespace("swipe");
 const swipeProps = {
   loop: truthProp,
   width: numericProp,
@@ -2111,9 +2120,9 @@ const swipeProps = {
   showIndicators: truthProp,
   stopPropagation: truthProp
 };
-const SWIPE_KEY = Symbol(name$1p);
-var stdin_default$1z = defineComponent({
-  name: name$1p,
+const SWIPE_KEY = Symbol(name$1q);
+var stdin_default$1A = defineComponent({
+  name: name$1q,
   props: swipeProps,
   emits: ["change", "dragStart", "dragEnd"],
   setup(props, {
@@ -2391,7 +2400,7 @@ var stdin_default$1z = defineComponent({
       } : void 0;
       return createVNode("i", {
         "style": style,
-        "class": bem$1l("indicator", {
+        "class": bem$1m("indicator", {
           active
         })
       }, null);
@@ -2405,7 +2414,7 @@ var stdin_default$1z = defineComponent({
       }
       if (props.showIndicators && count.value > 1) {
         return createVNode("div", {
-          "class": bem$1l("indicators", {
+          "class": bem$1m("indicators", {
             vertical: props.vertical
           })
         }, [Array(count.value).fill("").map(renderDot)]);
@@ -2447,11 +2456,11 @@ var stdin_default$1z = defineComponent({
       var _a;
       return createVNode("div", {
         "ref": root,
-        "class": bem$1l()
+        "class": bem$1m()
       }, [createVNode("div", {
         "ref": track,
         "style": trackStyle.value,
-        "class": bem$1l("track", {
+        "class": bem$1m("track", {
           vertical: props.vertical
         }),
         "onTouchstartPassive": onTouchStart,
@@ -2461,10 +2470,10 @@ var stdin_default$1z = defineComponent({
     };
   }
 });
-const Swipe = withInstall(stdin_default$1z);
-const [name$1o, bem$1k] = createNamespace("tabs");
-var stdin_default$1y = defineComponent({
-  name: name$1o,
+const Swipe = withInstall(stdin_default$1A);
+const [name$1p, bem$1l] = createNamespace("tabs");
+var stdin_default$1z = defineComponent({
+  name: name$1p,
   props: {
     count: makeRequiredProp(Number),
     inited: Boolean,
@@ -2488,7 +2497,7 @@ var stdin_default$1y = defineComponent({
         return createVNode(Swipe, {
           "ref": swipeRef,
           "loop": false,
-          "class": bem$1k("track"),
+          "class": bem$1l("track"),
           "duration": +props.duration * 1e3,
           "touchable": props.swipeable,
           "lazyRender": props.lazyRender,
@@ -2516,13 +2525,13 @@ var stdin_default$1y = defineComponent({
       swipeRef
     });
     return () => createVNode("div", {
-      "class": bem$1k("content", {
+      "class": bem$1l("content", {
         animated: props.animated || props.swipeable
       })
     }, [renderChildren()]);
   }
 });
-const [name$1n, bem$1j] = createNamespace("tabs");
+const [name$1o, bem$1k] = createNamespace("tabs");
 const tabsProps = {
   type: makeStringProp("line"),
   color: String,
@@ -2545,9 +2554,9 @@ const tabsProps = {
   titleActiveColor: String,
   titleInactiveColor: String
 };
-const TABS_KEY = Symbol(name$1n);
-var stdin_default$1x = defineComponent({
-  name: name$1n,
+const TABS_KEY = Symbol(name$1o);
+var stdin_default$1y = defineComponent({
+  name: name$1o,
   props: tabsProps,
   emits: ["change", "scroll", "rendered", "clickTab", "update:active"],
   setup(props, {
@@ -2745,7 +2754,7 @@ var stdin_default$1x = defineComponent({
     const renderLine = () => {
       if (props.type === "line" && children.length) {
         return createVNode("div", {
-          "class": bem$1j("line"),
+          "class": bem$1k("line"),
           "style": state.lineStyle
         }, null);
       }
@@ -2759,13 +2768,13 @@ var stdin_default$1x = defineComponent({
       } = props;
       const Header = [createVNode("div", {
         "ref": sticky ? void 0 : wrapRef,
-        "class": [bem$1j("wrap"), {
+        "class": [bem$1k("wrap"), {
           [BORDER_TOP_BOTTOM]: type === "line" && border
         }]
       }, [createVNode("div", {
         "ref": navRef,
         "role": "tablist",
-        "class": bem$1j("nav", [type, {
+        "class": bem$1k("nav", [type, {
           shrink: props.shrink,
           complete: scrollable.value
         }]),
@@ -2838,14 +2847,14 @@ var stdin_default$1x = defineComponent({
     });
     return () => createVNode("div", {
       "ref": root,
-      "class": bem$1j([props.type])
+      "class": bem$1k([props.type])
     }, [props.sticky ? createVNode(Sticky, {
       "container": root.value,
       "offsetTop": offsetTopPx.value,
       "onScroll": onStickyScroll
     }, {
       default: () => [renderHeader()]
-    }) : renderHeader(), createVNode(stdin_default$1y, {
+    }) : renderHeader(), createVNode(stdin_default$1z, {
       "ref": contentRef,
       "count": children.length,
       "inited": state.inited,
@@ -2865,9 +2874,9 @@ var stdin_default$1x = defineComponent({
 });
 const TAB_STATUS_KEY = Symbol();
 const useTabStatus = () => inject(TAB_STATUS_KEY, null);
-const [name$1m, bem$1i] = createNamespace("tab");
+const [name$1n, bem$1j] = createNamespace("tab");
 const TabTitle = defineComponent({
-  name: name$1m,
+  name: name$1n,
   props: {
     id: String,
     dot: Boolean,
@@ -2916,7 +2925,7 @@ const TabTitle = defineComponent({
     });
     const renderText = () => {
       const Text2 = createVNode("span", {
-        "class": bem$1i("text", {
+        "class": bem$1j("text", {
           ellipsis: !props.scrollable
         })
       }, [slots.title ? slots.title() : props.title]);
@@ -2934,7 +2943,7 @@ const TabTitle = defineComponent({
     return () => createVNode("div", {
       "id": props.id,
       "role": "tab",
-      "class": [bem$1i([props.type, {
+      "class": [bem$1j([props.type, {
         grow: props.scrollable && !props.shrink,
         shrink: props.shrink,
         active: props.isActive,
@@ -2948,9 +2957,9 @@ const TabTitle = defineComponent({
     }, [renderText()]);
   }
 });
-const [name$1l, bem$1h] = createNamespace("swipe-item");
-var stdin_default$1w = defineComponent({
-  name: name$1l,
+const [name$1m, bem$1i] = createNamespace("swipe-item");
+var stdin_default$1x = defineComponent({
+  name: name$1m,
   setup(props, {
     slots
   }) {
@@ -3015,14 +3024,14 @@ var stdin_default$1w = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": bem$1h(),
+        "class": bem$1i(),
         "style": style.value
       }, [shouldRender.value ? (_a = slots.default) == null ? void 0 : _a.call(slots) : null]);
     };
   }
 });
-const SwipeItem = withInstall(stdin_default$1w);
-const [name$1k, bem$1g] = createNamespace("tab");
+const SwipeItem = withInstall(stdin_default$1x);
+const [name$1l, bem$1h] = createNamespace("tab");
 const tabProps = extend({}, routeProps, {
   dot: Boolean,
   name: numericProp,
@@ -3033,8 +3042,8 @@ const tabProps = extend({}, routeProps, {
   titleStyle: [String, Object],
   showZeroBadge: truthProp
 });
-var stdin_default$1v = defineComponent({
-  name: name$1k,
+var stdin_default$1w = defineComponent({
+  name: name$1l,
   props: tabProps,
   setup(props, {
     slots
@@ -3071,12 +3080,22 @@ var stdin_default$1v = 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,
@@ -3122,7 +3141,7 @@ var stdin_default$1v = defineComponent({
         return createVNode(SwipeItem, {
           "id": id,
           "role": "tabpanel",
-          "class": bem$1g("panel-wrapper", {
+          "class": bem$1h("panel-wrapper", {
             inactive: hasInactiveClass.value
           }),
           "tabindex": active.value ? 0 : -1,
@@ -3132,7 +3151,7 @@ var stdin_default$1v = defineComponent({
           default: () => {
             var _a2;
             return [createVNode("div", {
-              "class": bem$1g("panel")
+              "class": bem$1h("panel")
             }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)])];
           }
         });
@@ -3142,24 +3161,24 @@ var stdin_default$1v = defineComponent({
       return withDirectives(createVNode("div", {
         "id": id,
         "role": "tabpanel",
-        "class": bem$1g("panel"),
+        "class": bem$1h("panel"),
         "tabindex": show ? 0 : -1,
         "aria-labelledby": label
       }, [Content]), [[vShow, show]]);
     };
   }
 });
-const Tab = withInstall(stdin_default$1v);
-const Tabs = withInstall(stdin_default$1x);
-const [name$1j, bem$1f] = createNamespace("picker-group");
-const PICKER_GROUP_KEY = Symbol(name$1j);
+const Tab = withInstall(stdin_default$1w);
+const Tabs = withInstall(stdin_default$1y);
+const [name$1k, bem$1g] = createNamespace("picker-group");
+const PICKER_GROUP_KEY = Symbol(name$1k);
 const pickerGroupProps = extend({
   tabs: makeArrayProp(),
   activeTab: makeNumericProp(0),
   nextStepText: String
 }, pickerToolbarProps);
-var stdin_default$1u = defineComponent({
-  name: name$1j,
+var stdin_default$1v = defineComponent({
+  name: name$1k,
   props: pickerGroupProps,
   emits: ["confirm", "cancel", "update:activeTab"],
   setup(props, {
@@ -3186,8 +3205,8 @@ var stdin_default$1u = defineComponent({
       const childNodes = (_a = slots.default) == null ? void 0 : _a.call(slots);
       const confirmButtonText = showNextButton() ? props.nextStepText : props.confirmButtonText;
       return createVNode("div", {
-        "class": bem$1f()
-      }, [createVNode(stdin_default$1B, {
+        "class": bem$1g()
+      }, [createVNode(stdin_default$1C, {
         "title": props.title,
         "cancelButtonText": props.cancelButtonText,
         "confirmButtonText": confirmButtonText,
@@ -3196,14 +3215,14 @@ var stdin_default$1u = defineComponent({
       }, pick(slots, pickerToolbarSlots)), createVNode(Tabs, {
         "active": activeTab.value,
         "onUpdate:active": ($event) => activeTab.value = $event,
-        "class": bem$1f("tabs"),
+        "class": bem$1g("tabs"),
         "shrink": true,
         "animated": true,
         "lazyRender": false
       }, {
         default: () => [props.tabs.map((title, index) => createVNode(Tab, {
           "title": title,
-          "titleClass": bem$1f("tab-title")
+          "titleClass": bem$1g("tab-title")
         }, {
           default: () => [childNodes == null ? void 0 : childNodes[index]]
         }))]
@@ -3226,8 +3245,8 @@ const pickerProps = extend({}, pickerSharedProps, {
   toolbarPosition: makeStringProp("top"),
   columnsFieldNames: Object
 });
-var stdin_default$1t = defineComponent({
-  name: name$1t,
+var stdin_default$1u = defineComponent({
+  name: name$1u,
   props: pickerProps,
   emits: ["confirm", "cancel", "change", "scrollInto", "clickOption", "update:modelValue"],
   setup(props, {
@@ -3308,7 +3327,7 @@ var stdin_default$1t = defineComponent({
       return params;
     };
     const cancel = () => emit("cancel", getEventParams());
-    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => createVNode(stdin_default$1C, {
+    const renderColumnItems = () => currentColumns.value.map((options, columnIndex) => createVNode(stdin_default$1D, {
       "value": selectedValues.value[columnIndex],
       "fields": fields.value,
       "options": options,
@@ -3337,10 +3356,10 @@ var stdin_default$1t = defineComponent({
           backgroundSize: `100% ${(wrapHeight - optionHeight.value) / 2}px`
         };
         return [createVNode("div", {
-          "class": bem$1o("mask"),
+          "class": bem$1p("mask"),
           "style": maskStyle
         }, null), createVNode("div", {
-          "class": [BORDER_UNSET_TOP_BOTTOM, bem$1o("frame")],
+          "class": [BORDER_UNSET_TOP_BOTTOM, bem$1p("frame")],
           "style": frameStyle
         }, null)];
       }
@@ -3352,13 +3371,13 @@ var stdin_default$1t = defineComponent({
       };
       return createVNode("div", {
         "ref": columnsRef,
-        "class": bem$1o("columns"),
+        "class": bem$1p("columns"),
         "style": columnsStyle
       }, [renderColumnItems(), renderMask(wrapHeight)]);
     };
     const renderToolbar = () => {
       if (props.showToolbar && !parent) {
-        return createVNode(stdin_default$1B, mergeProps(pick(props, pickerToolbarPropKeys), {
+        return createVNode(stdin_default$1C, mergeProps(pick(props, pickerToolbarPropKeys), {
           "onConfirm": confirm,
           "onCancel": cancel
         }), pick(slots, pickerToolbarSlots));
@@ -3401,9 +3420,9 @@ var stdin_default$1t = defineComponent({
     return () => {
       var _a, _b;
       return createVNode("div", {
-        "class": bem$1o()
+        "class": bem$1p()
       }, [props.toolbarPosition === "top" ? renderToolbar() : null, props.loading ? createVNode(Loading, {
-        "class": bem$1o("loading")
+        "class": bem$1p("loading")
       }, null) : null, (_a = slots["columns-top"]) == null ? void 0 : _a.call(slots), renderColumns(), (_b = slots["columns-bottom"]) == null ? void 0 : _b.call(slots), props.toolbarPosition === "bottom" ? renderToolbar() : null]);
     };
   }
@@ -3494,9 +3513,9 @@ function formatDataForCascade({
   }
   return options;
 }
-const Picker = withInstall(stdin_default$1t);
-const [name$1i, bem$1e] = createNamespace("area");
-const areaProps = extend({}, pickerSharedProps, {
+const Picker = withInstall(stdin_default$1u);
+const [name$1j, bem$1f] = createNamespace("area");
+const areaProps = extend({}, pick(pickerSharedProps, INHERIT_PROPS), {
   modelValue: String,
   columnsNum: makeNumericProp(3),
   columnsPlaceholder: makeArrayProp(),
@@ -3505,8 +3524,8 @@ const areaProps = extend({}, pickerSharedProps, {
     default: () => ({})
   }
 });
-var stdin_default$1s = defineComponent({
-  name: name$1i,
+var stdin_default$1t = defineComponent({
+  name: name$1j,
   props: areaProps,
   emits: ["change", "confirm", "cancel", "update:modelValue"],
   setup(props, {
@@ -3553,7 +3572,7 @@ var stdin_default$1s = defineComponent({
       "ref": picker,
       "modelValue": codes.value,
       "onUpdate:modelValue": ($event) => codes.value = $event,
-      "class": bem$1e(),
+      "class": bem$1f(),
       "columns": columns.value,
       "onChange": onChange,
       "onCancel": onCancel,
@@ -3561,8 +3580,8 @@ var stdin_default$1s = defineComponent({
     }, pick(props, INHERIT_PROPS)), pick(slots, INHERIT_SLOTS));
   }
 });
-const Area = withInstall(stdin_default$1s);
-const [name$1h, bem$1d] = createNamespace("cell");
+const Area = withInstall(stdin_default$1t);
+const [name$1i, bem$1e] = createNamespace("cell");
 const cellSharedProps = {
   tag: makeStringProp("div"),
   icon: String,
@@ -3586,8 +3605,8 @@ const cellSharedProps = {
   }
 };
 const cellProps = extend({}, cellSharedProps, routeProps);
-var stdin_default$1r = defineComponent({
-  name: name$1h,
+var stdin_default$1s = defineComponent({
+  name: name$1i,
   props: cellProps,
   setup(props, {
     slots
@@ -3597,7 +3616,7 @@ var stdin_default$1r = defineComponent({
       const showLabel = slots.label || isDef(props.label);
       if (showLabel) {
         return createVNode("div", {
-          "class": [bem$1d("label"), props.labelClass]
+          "class": [bem$1e("label"), props.labelClass]
         }, [slots.label ? slots.label() : props.label]);
       }
     };
@@ -3609,7 +3628,7 @@ var stdin_default$1r = defineComponent({
           return;
         }
         return createVNode("div", {
-          "class": [bem$1d("title"), props.titleClass],
+          "class": [bem$1e("title"), props.titleClass],
           "style": props.titleStyle
         }, [titleSlot || createVNode("span", null, [props.title]), renderLabel()]);
       }
@@ -3619,7 +3638,7 @@ var stdin_default$1r = defineComponent({
       const hasValue = slot || isDef(props.value);
       if (hasValue) {
         return createVNode("div", {
-          "class": [bem$1d("value"), props.valueClass]
+          "class": [bem$1e("value"), props.valueClass]
         }, [slot ? slot() : createVNode("span", null, [props.value])]);
       }
     };
@@ -3630,7 +3649,7 @@ var stdin_default$1r = defineComponent({
       if (props.icon) {
         return createVNode(Icon, {
           "name": props.icon,
-          "class": bem$1d("left-icon"),
+          "class": bem$1e("left-icon"),
           "classPrefix": props.iconPrefix
         }, null);
       }
@@ -3643,7 +3662,7 @@ var stdin_default$1r = defineComponent({
         const name2 = props.arrowDirection && props.arrowDirection !== "right" ? `arrow-${props.arrowDirection}` : "arrow";
         return createVNode(Icon, {
           "name": name2,
-          "class": bem$1d("right-icon")
+          "class": bem$1e("right-icon")
         }, null);
       }
     };
@@ -3668,7 +3687,7 @@ var stdin_default$1r = defineComponent({
         classes[size] = !!size;
       }
       return createVNode(tag, {
-        "class": bem$1d(classes),
+        "class": bem$1e(classes),
         "role": clickable ? "button" : void 0,
         "tabindex": clickable ? 0 : void 0,
         "onClick": route2
@@ -3681,8 +3700,8 @@ var stdin_default$1r = defineComponent({
     };
   }
 });
-const Cell = withInstall(stdin_default$1r);
-const [name$1g, bem$1c] = createNamespace("form");
+const Cell = withInstall(stdin_default$1s);
+const [name$1h, bem$1d] = createNamespace("form");
 const formProps = {
   colon: Boolean,
   disabled: Boolean,
@@ -3701,8 +3720,8 @@ const formProps = {
     default: "onBlur"
   }
 };
-var stdin_default$1q = defineComponent({
-  name: name$1g,
+var stdin_default$1r = defineComponent({
+  name: name$1h,
   props: formProps,
   emits: ["submit", "failed"],
   setup(props, {
@@ -3828,13 +3847,13 @@ var stdin_default$1q = defineComponent({
     return () => {
       var _a;
       return createVNode("form", {
-        "class": bem$1c(),
+        "class": bem$1d(),
         "onSubmit": onSubmit
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-const Form = withInstall(stdin_default$1q);
+const Form = withInstall(stdin_default$1r);
 function isEmptyValue(value) {
   if (Array.isArray(value)) {
     return !value.length;
@@ -3923,7 +3942,7 @@ function getStringLength(str) {
 function cutString(str, maxlength) {
   return [...str].slice(0, maxlength).join("");
 }
-const [name$1f, bem$1b] = createNamespace("field");
+const [name$1g, bem$1c] = createNamespace("field");
 const fieldSharedProps = {
   id: String,
   name: String,
@@ -3970,8 +3989,8 @@ const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
     default: null
   }
 });
-var stdin_default$1p = defineComponent({
-  name: name$1f,
+var stdin_default$1q = defineComponent({
+  name: name$1g,
   props: fieldProps,
   emits: ["blur", "focus", "clear", "keypress", "clickInput", "endValidate", "startValidate", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
   setup(props, {
@@ -4245,7 +4264,7 @@ var stdin_default$1p = defineComponent({
     const getInputId = () => props.id || `${id}-input`;
     const getValidationStatus = () => state.status;
     const renderInput = () => {
-      const controlClass = bem$1b("control", [getProp("inputAlign"), {
+      const controlClass = bem$1c("control", [getProp("inputAlign"), {
         error: showError.value,
         custom: !!slots.input,
         "min-height": props.type === "textarea" && !props.autosize
@@ -4287,7 +4306,7 @@ var stdin_default$1p = defineComponent({
       const leftIconSlot = slots["left-icon"];
       if (props.leftIcon || leftIconSlot) {
         return createVNode("div", {
-          "class": bem$1b("left-icon"),
+          "class": bem$1c("left-icon"),
           "onClick": onClickLeftIcon
         }, [leftIconSlot ? leftIconSlot() : createVNode(Icon, {
           "name": props.leftIcon,
@@ -4299,7 +4318,7 @@ var stdin_default$1p = defineComponent({
       const rightIconSlot = slots["right-icon"];
       if (props.rightIcon || rightIconSlot) {
         return createVNode("div", {
-          "class": bem$1b("right-icon"),
+          "class": bem$1c("right-icon"),
           "onClick": onClickRightIcon
         }, [rightIconSlot ? rightIconSlot() : createVNode(Icon, {
           "name": props.rightIcon,
@@ -4311,9 +4330,9 @@ var stdin_default$1p = defineComponent({
       if (props.showWordLimit && props.maxlength) {
         const count = getStringLength(getModelValue());
         return createVNode("div", {
-          "class": bem$1b("word-limit")
+          "class": bem$1c("word-limit")
         }, [createVNode("span", {
-          "class": bem$1b("word-num")
+          "class": bem$1c("word-num")
         }, [count]), createTextVNode("/"), props.maxlength]);
       }
     };
@@ -4326,7 +4345,7 @@ var stdin_default$1p = defineComponent({
         const slot = slots["error-message"];
         const errorMessageAlign = getProp("errorMessageAlign");
         return createVNode("div", {
-          "class": bem$1b("error-message", errorMessageAlign)
+          "class": bem$1c("error-message", errorMessageAlign)
         }, [slot ? slot({
           message
         }) : message]);
@@ -4354,13 +4373,13 @@ var stdin_default$1p = defineComponent({
       }
     };
     const renderFieldBody = () => [createVNode("div", {
-      "class": bem$1b("body")
+      "class": bem$1c("body")
     }, [renderInput(), showClear.value && createVNode(Icon, {
       "ref": clearIconRef,
       "name": props.clearIcon,
-      "class": bem$1b("clear")
+      "class": bem$1c("clear")
     }, null), renderRightIcon(), slots.button && createVNode("div", {
-      "class": bem$1b("button")
+      "class": bem$1c("button")
     }, [slots.button()])]), renderWordLimit(), renderMessage()];
     useExpose({
       blur,
@@ -4404,7 +4423,7 @@ var stdin_default$1p = defineComponent({
       };
       return createVNode(Cell, {
         "size": props.size,
-        "class": bem$1b({
+        "class": bem$1c({
           error: showError.value,
           disabled,
           [`label-${labelAlign}`]: labelAlign
@@ -4414,8 +4433,8 @@ var stdin_default$1p = defineComponent({
         "isLink": props.isLink,
         "clickable": props.clickable,
         "titleStyle": labelStyle.value,
-        "valueClass": bem$1b("value"),
-        "titleClass": [bem$1b("label", [labelAlign, {
+        "valueClass": bem$1c("value"),
+        "titleClass": [bem$1c("label", [labelAlign, {
           required: props.required
         }]), props.labelClass],
         "arrowDirection": props.arrowDirection
@@ -4428,7 +4447,7 @@ var stdin_default$1p = defineComponent({
     };
   }
 });
-const Field = withInstall(stdin_default$1p);
+const Field = withInstall(stdin_default$1q);
 let lockCount = 0;
 function lockClick(lock) {
   if (lock) {
@@ -4443,7 +4462,7 @@ function lockClick(lock) {
     }
   }
 }
-const [name$1e, bem$1a] = createNamespace("toast");
+const [name$1f, bem$1b] = createNamespace("toast");
 const popupInheritProps = ["show", "overlay", "teleport", "transition", "overlayClass", "overlayStyle", "closeOnClickOverlay"];
 const toastProps = {
   icon: String,
@@ -4466,8 +4485,8 @@ const toastProps = {
   closeOnClick: Boolean,
   closeOnClickOverlay: Boolean
 };
-var stdin_default$1o = defineComponent({
-  name: name$1e,
+var stdin_default$1p = defineComponent({
+  name: name$1f,
   props: toastProps,
   emits: ["update:show"],
   setup(props, {
@@ -4503,13 +4522,13 @@ var stdin_default$1o = defineComponent({
         return createVNode(Icon, {
           "name": icon || type,
           "size": iconSize,
-          "class": bem$1a("icon"),
+          "class": bem$1b("icon"),
           "classPrefix": iconPrefix
         }, null);
       }
       if (type === "loading") {
         return createVNode(Loading, {
-          "class": bem$1a("loading"),
+          "class": bem$1b("loading"),
           "size": iconSize,
           "type": loadingType
         }, null);
@@ -4522,16 +4541,16 @@ var stdin_default$1o = defineComponent({
       } = props;
       if (slots.message) {
         return createVNode("div", {
-          "class": bem$1a("text")
+          "class": bem$1b("text")
         }, [slots.message()]);
       }
       if (isDef(message) && message !== "") {
         return type === "html" ? createVNode("div", {
           "key": 0,
-          "class": bem$1a("text"),
+          "class": bem$1b("text"),
           "innerHTML": String(message)
         }, null) : createVNode("div", {
-          "class": bem$1a("text")
+          "class": bem$1b("text")
         }, [message]);
       }
     };
@@ -4547,7 +4566,7 @@ var stdin_default$1o = defineComponent({
     onMounted(toggleClickable);
     onUnmounted(toggleClickable);
     return () => createVNode(Popup, mergeProps({
-      "class": [bem$1a([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, {
+      "class": [bem$1b([props.position, props.wordBreak === "normal" ? "break-normal" : props.wordBreak, {
         [props.type]: !props.icon
       }]), props.className],
       "lockScroll": false,
@@ -4648,7 +4667,7 @@ function createInstance() {
           onClosed,
           "onUpdate:show": toggle
         };
-        return createVNode(stdin_default$1o, mergeProps(state, attrs), null);
+        return createVNode(stdin_default$1p, mergeProps(state, attrs), null);
       };
       watch(message, (val) => {
         state.message = val;
@@ -4718,8 +4737,8 @@ const resetToastDefaultOptions = (type) => {
 const allowMultipleToast = (value = true) => {
   allowMultiple = value;
 };
-const Toast = withInstall(stdin_default$1o);
-const [name$1d, bem$19] = createNamespace("switch");
+const Toast = withInstall(stdin_default$1p);
+const [name$1e, bem$1a] = createNamespace("switch");
 const switchProps = {
   size: numericProp,
   loading: Boolean,
@@ -4736,8 +4755,8 @@ const switchProps = {
     default: false
   }
 };
-var stdin_default$1n = defineComponent({
-  name: name$1d,
+var stdin_default$1o = defineComponent({
+  name: name$1e,
   props: switchProps,
   emits: ["change", "update:modelValue"],
   setup(props, {
@@ -4756,7 +4775,7 @@ var stdin_default$1n = defineComponent({
       if (props.loading) {
         const color = isChecked() ? props.activeColor : props.inactiveColor;
         return createVNode(Loading, {
-          "class": bem$19("loading"),
+          "class": bem$1a("loading"),
           "color": color
         }, null);
       }
@@ -4781,7 +4800,7 @@ var stdin_default$1n = defineComponent({
       };
       return createVNode("div", {
         "role": "switch",
-        "class": bem$19({
+        "class": bem$1a({
           on: checked,
           loading,
           disabled
@@ -4791,16 +4810,16 @@ var stdin_default$1n = defineComponent({
         "aria-checked": checked,
         "onClick": onClick
       }, [createVNode("div", {
-        "class": bem$19("node")
+        "class": bem$1a("node")
       }, [renderLoading()]), (_a = slots.background) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-const Switch = withInstall(stdin_default$1n);
-const [name$1c, bem$18] = createNamespace("address-edit-detail");
+const Switch = withInstall(stdin_default$1o);
+const [name$1d, bem$19] = createNamespace("address-edit-detail");
 const t$j = createNamespace("address-edit")[2];
-var stdin_default$1m = defineComponent({
-  name: name$1c,
+var stdin_default$1n = defineComponent({
+  name: name$1d,
   props: {
     show: Boolean,
     rows: numericProp,
@@ -4834,7 +4853,7 @@ var stdin_default$1m = defineComponent({
         "icon": "location-o",
         "title": express.name,
         "label": express.address,
-        "class": bem$18("search-item"),
+        "class": bem$19("search-item"),
         "border": false,
         "onClick": () => onSelect(express)
       }, null));
@@ -4848,7 +4867,7 @@ var stdin_default$1m = defineComponent({
           "autosize": true,
           "clearable": true,
           "ref": field,
-          "class": bem$18(),
+          "class": bem$19(),
           "rows": props.rows,
           "type": "textarea",
           "rules": props.rules,
@@ -4865,7 +4884,7 @@ var stdin_default$1m = defineComponent({
     };
   }
 });
-const [name$1b, bem$17, t$i] = createNamespace("address-edit");
+const [name$1c, bem$18, t$i] = createNamespace("address-edit");
 const DEFAULT_DATA = {
   name: "",
   tel: "",
@@ -4905,8 +4924,8 @@ const addressEditProps = {
     default: isMobile
   }
 };
-var stdin_default$1l = defineComponent({
-  name: name$1b,
+var stdin_default$1m = defineComponent({
+  name: name$1c,
   props: addressEditProps,
   emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
   setup(props, {
@@ -5016,8 +5035,9 @@ var stdin_default$1l = defineComponent({
         };
         return withDirectives(createVNode(Cell, {
           "center": true,
+          "border": false,
           "title": t$i("defaultAddress"),
-          "class": bem$17("default")
+          "class": bem$18("default")
         }, slots2), [[vShow, !hideBottomFields.value]]);
       }
     };
@@ -5043,13 +5063,13 @@ var stdin_default$1l = defineComponent({
         disableArea
       } = props;
       return createVNode(Form, {
-        "class": bem$17(),
+        "class": bem$18(),
         "onSubmit": onSave
       }, {
         default: () => {
           var _a;
           return [createVNode("div", {
-            "class": bem$17("fields")
+            "class": bem$18("fields")
           }, [createVNode(Field, {
             "modelValue": data.name,
             "onUpdate:modelValue": ($event) => data.name = $event,
@@ -5080,7 +5100,7 @@ var stdin_default$1l = defineComponent({
               emit("clickArea");
               showAreaPopup.value = !disableArea;
             }
-          }, null), [[vShow, props.showArea]]), createVNode(stdin_default$1m, {
+          }, null), [[vShow, props.showArea]]), createVNode(stdin_default$1n, {
             "show": props.showDetail,
             "rows": props.detailRows,
             "rules": rules.value.addressDetail,
@@ -5094,19 +5114,19 @@ var stdin_default$1l = defineComponent({
             "onInput": onChangeDetail,
             "onSelectSearch": (event) => emit("selectSearch", event)
           }, null), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderSetDefaultCell(), withDirectives(createVNode("div", {
-            "class": bem$17("buttons")
+            "class": bem$18("buttons")
           }, [createVNode(Button, {
             "block": true,
             "round": true,
             "type": "primary",
             "text": props.saveButtonText || t$i("save"),
-            "class": bem$17("button"),
+            "class": bem$18("button"),
             "loading": props.isSaving,
             "nativeType": "submit"
           }, null), props.showDelete && createVNode(Button, {
             "block": true,
             "round": true,
-            "class": bem$17("button"),
+            "class": bem$18("button"),
             "loading": props.isDeleting,
             "text": props.deleteButtonText || t$i("delete"),
             "onClick": onDelete
@@ -5136,8 +5156,8 @@ var stdin_default$1l = defineComponent({
     };
   }
 });
-const AddressEdit = withInstall(stdin_default$1l);
-const [name$1a, bem$16] = createNamespace("radio-group");
+const AddressEdit = withInstall(stdin_default$1m);
+const [name$1b, bem$17] = createNamespace("radio-group");
 const radioGroupProps = {
   disabled: Boolean,
   iconSize: numericProp,
@@ -5145,9 +5165,9 @@ const radioGroupProps = {
   modelValue: unknownProp,
   checkedColor: String
 };
-const RADIO_KEY = Symbol(name$1a);
-var stdin_default$1k = defineComponent({
-  name: name$1a,
+const RADIO_KEY = Symbol(name$1b);
+var stdin_default$1l = defineComponent({
+  name: name$1b,
   props: radioGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, {
@@ -5167,14 +5187,14 @@ var stdin_default$1k = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": bem$16([props.direction]),
+        "class": bem$17([props.direction]),
         "role": "radiogroup"
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-const RadioGroup = withInstall(stdin_default$1k);
-const [name$19, bem$15] = createNamespace("tag");
+const RadioGroup = withInstall(stdin_default$1l);
+const [name$1a, bem$16] = createNamespace("tag");
 const tagProps = {
   size: String,
   mark: Boolean,
@@ -5186,8 +5206,8 @@ const tagProps = {
   textColor: String,
   closeable: Boolean
 };
-var stdin_default$1j = defineComponent({
-  name: name$19,
+var stdin_default$1k = defineComponent({
+  name: name$1a,
   props: tagProps,
   emits: ["close"],
   setup(props, {
@@ -5230,12 +5250,12 @@ var stdin_default$1j = defineComponent({
       }
       const CloseIcon = closeable && createVNode(Icon, {
         "name": "cross",
-        "class": [bem$15("close"), HAPTICS_FEEDBACK],
+        "class": [bem$16("close"), HAPTICS_FEEDBACK],
         "onClick": onClose
       }, null);
       return createVNode("span", {
         "style": getStyle(),
-        "class": bem$15([classes, type])
+        "class": bem$16([classes, type])
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots), CloseIcon]);
     };
     return () => createVNode(Transition, {
@@ -5245,7 +5265,7 @@ var stdin_default$1j = defineComponent({
     });
   }
 });
-const Tag = withInstall(stdin_default$1j);
+const Tag = withInstall(stdin_default$1k);
 const checkerProps = {
   name: unknownProp,
   shape: makeStringProp("round"),
@@ -5256,7 +5276,7 @@ const checkerProps = {
   labelPosition: String,
   labelDisabled: Boolean
 };
-var stdin_default$1i = defineComponent({
+var stdin_default$1j = defineComponent({
   props: extend({}, checkerProps, {
     bem: makeRequiredProp(Function),
     role: String,
@@ -5358,9 +5378,9 @@ var stdin_default$1i = defineComponent({
   }
 });
 const radioProps = checkerProps;
-const [name$18, bem$14] = createNamespace("radio");
-var stdin_default$1h = defineComponent({
-  name: name$18,
+const [name$19, bem$15] = createNamespace("radio");
+var stdin_default$1i = defineComponent({
+  name: name$19,
   props: checkerProps,
   emits: ["update:modelValue"],
   setup(props, {
@@ -5381,8 +5401,8 @@ var stdin_default$1h = defineComponent({
         emit("update:modelValue", props.name);
       }
     };
-    return () => createVNode(stdin_default$1i, mergeProps({
-      "bem": bem$14,
+    return () => createVNode(stdin_default$1j, mergeProps({
+      "bem": bem$15,
       "role": "radio",
       "parent": parent,
       "checked": checked(),
@@ -5390,10 +5410,10 @@ var stdin_default$1h = defineComponent({
     }, props), pick(slots, ["default", "icon"]));
   }
 });
-const Radio = withInstall(stdin_default$1h);
-const [name$17, bem$13] = createNamespace("address-item");
-var stdin_default$1g = defineComponent({
-  name: name$17,
+const Radio = withInstall(stdin_default$1i);
+const [name$18, bem$14] = createNamespace("address-item");
+var stdin_default$1h = defineComponent({
+  name: name$18,
   props: {
     address: makeRequiredProp(Object),
     disabled: Boolean,
@@ -5413,7 +5433,7 @@ var stdin_default$1g = defineComponent({
     };
     const renderRightIcon = () => createVNode(Icon, {
       "name": "edit",
-      "class": bem$13("edit"),
+      "class": bem$14("edit"),
       "onClick": (event) => {
         event.stopPropagation();
         emit("edit");
@@ -5428,7 +5448,7 @@ var stdin_default$1g = defineComponent({
         return createVNode(Tag, {
           "type": "primary",
           "round": true,
-          "class": bem$13("tag")
+          "class": bem$14("tag")
         }, {
           default: () => [props.defaultTagText]
         });
@@ -5441,9 +5461,9 @@ var stdin_default$1g = defineComponent({
         switchable
       } = props;
       const Info = [createVNode("div", {
-        "class": bem$13("name")
+        "class": bem$14("name")
       }, [`${address.name} ${address.tel}`, renderTag()]), createVNode("div", {
-        "class": bem$13("address")
+        "class": bem$14("address")
       }, [address.address])];
       if (switchable && !disabled) {
         return createVNode(Radio, {
@@ -5461,13 +5481,13 @@ var stdin_default$1g = defineComponent({
         disabled
       } = props;
       return createVNode("div", {
-        "class": bem$13({
+        "class": bem$14({
           disabled
         }),
         "onClick": onClick
       }, [createVNode(Cell, {
         "border": false,
-        "titleClass": bem$13("title")
+        "titleClass": bem$14("title")
       }, {
         title: renderContent,
         "right-icon": renderRightIcon
@@ -5477,7 +5497,7 @@ var stdin_default$1g = defineComponent({
     };
   }
 });
-const [name$16, bem$12, t$h] = createNamespace("address-list");
+const [name$17, bem$13, t$h] = createNamespace("address-list");
 const addressListProps = {
   list: makeArrayProp(),
   modelValue: numericProp,
@@ -5487,8 +5507,8 @@ const addressListProps = {
   addButtonText: String,
   defaultTagText: String
 };
-var stdin_default$1f = defineComponent({
-  name: name$16,
+var stdin_default$1g = defineComponent({
+  name: name$17,
   props: addressListProps,
   emits: ["add", "edit", "select", "clickItem", "editDisabled", "selectDisabled", "update:modelValue"],
   setup(props, {
@@ -5504,7 +5524,7 @@ var stdin_default$1f = defineComponent({
           emit("update:modelValue", item.id);
         }
       };
-      return createVNode(stdin_default$1g, {
+      return createVNode(stdin_default$1h, {
         "key": item.id,
         "address": item,
         "disabled": disabled,
@@ -5524,13 +5544,13 @@ var stdin_default$1f = defineComponent({
       }
     };
     const renderBottom = () => createVNode("div", {
-      "class": [bem$12("bottom"), "van-safe-area-bottom"]
+      "class": [bem$13("bottom"), "van-safe-area-bottom"]
     }, [createVNode(Button, {
       "round": true,
       "block": true,
       "type": "primary",
       "text": props.addButtonText || t$h("add"),
-      "class": bem$12("add"),
+      "class": bem$13("add"),
       "onClick": () => emit("add")
     }, null)]);
     return () => {
@@ -5538,10 +5558,10 @@ var stdin_default$1f = defineComponent({
       const List2 = renderList(props.list);
       const DisabledList = renderList(props.disabledList, true);
       const DisabledText = props.disabledText && createVNode("div", {
-        "class": bem$12("disabled-text")
+        "class": bem$13("disabled-text")
       }, [props.disabledText]);
       return createVNode("div", {
-        "class": bem$12()
+        "class": bem$13()
       }, [(_a = slots.top) == null ? void 0 : _a.call(slots), createVNode(RadioGroup, {
         "modelValue": props.modelValue
       }, {
@@ -5550,7 +5570,7 @@ var stdin_default$1f = defineComponent({
     };
   }
 });
-const AddressList = withInstall(stdin_default$1f);
+const AddressList = withInstall(stdin_default$1g);
 const hasIntersectionObserver = inBrowser$1 && "IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype;
 const modeType = {
   event: "event",
@@ -5703,7 +5723,7 @@ class ImageCache {
     this.caches.shift();
   }
 }
-const [name$15, bem$11] = createNamespace("back-top");
+const [name$16, bem$12] = createNamespace("back-top");
 const backTopProps = {
   right: numericProp,
   bottom: numericProp,
@@ -5716,8 +5736,8 @@ const backTopProps = {
     default: "body"
   }
 };
-var stdin_default$1e = defineComponent({
-  name: name$15,
+var stdin_default$1f = defineComponent({
+  name: name$16,
   inheritAttrs: false,
   props: backTopProps,
   emits: ["click"],
@@ -5775,28 +5795,158 @@ var stdin_default$1e = defineComponent({
     watch(() => props.target, updateTarget);
     return () => {
       const Content = createVNode("div", mergeProps({
-        "ref": root,
-        "class": bem$11({
+        "ref": !props.teleport ? root : void 0,
+        "class": bem$12({
           active: show.value
         }),
         "style": style.value,
         "onClick": onClick
       }, attrs), [slots.default ? slots.default() : createVNode(Icon, {
         "name": "back-top",
-        "class": bem$11("icon")
+        "class": bem$12("icon")
       }, null)]);
       if (props.teleport) {
-        return createVNode(Teleport, {
+        return [createVNode("div", {
+          "ref": root,
+          "class": bem$12("placeholder")
+        }, null), createVNode(Teleport, {
           "to": props.teleport
         }, {
           default: () => [Content]
-        });
+        })];
       }
       return Content;
     };
   }
 });
-const BackTop = withInstall(stdin_default$1e);
+const BackTop = withInstall(stdin_default$1f);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const barrageProps = {
+  top: makeNumericProp(10),
+  rows: makeNumericProp(4),
+  duration: makeNumericProp(4e3),
+  autoPlay: truthProp,
+  delay: makeNumberProp(300),
+  modelValue: makeArrayProp()
+};
+const [name$15, bem$11] = createNamespace("barrage");
+var stdin_default$1e = defineComponent({
+  name: name$15,
+  props: barrageProps,
+  emits: ["update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const barrageWrapper = ref();
+    const className = bem$11("item");
+    const total = ref(0);
+    const barrageItems = [];
+    const createBarrageItem = (text, delay = props.delay) => {
+      const item = document.createElement("span");
+      item.className = className;
+      item.innerText = String(text);
+      item.style.animationDuration = `${props.duration}ms`;
+      item.style.animationDelay = `${delay}ms`;
+      item.style.animationName = "van-barrage";
+      item.style.animationTimingFunction = "linear";
+      return item;
+    };
+    const isInitBarrage = ref(true);
+    const isPlay = ref(props.autoPlay);
+    const appendBarrageItem = ({
+      id,
+      text
+    }, i) => {
+      var _a;
+      const item = createBarrageItem(text, isInitBarrage.value ? i * props.delay : void 0);
+      if (!props.autoPlay && isPlay.value === false) {
+        item.style.animationPlayState = "paused";
+      }
+      (_a = barrageWrapper.value) == null ? void 0 : _a.append(item);
+      total.value++;
+      const top = (total.value - 1) % +props.rows * item.offsetHeight + +props.top;
+      item.style.top = `${top}px`;
+      item.dataset.id = String(id);
+      barrageItems.push(item);
+      item.addEventListener("animationend", () => {
+        emit("update:modelValue", [...props.modelValue].filter((v) => String(v.id) !== item.dataset.id));
+      });
+    };
+    const updateBarrages = (newValue, oldValue) => {
+      const map = new Map(oldValue.map((item) => [item.id, item]));
+      newValue.forEach((item, i) => {
+        if (map.has(item.id)) {
+          map.delete(item.id);
+        } else {
+          appendBarrageItem(item, i);
+        }
+      });
+      map.forEach((item) => {
+        const index = barrageItems.findIndex((span) => span.dataset.id === String(item.id));
+        if (index > -1) {
+          barrageItems[index].remove();
+          barrageItems.splice(index, 1);
+        }
+      });
+      isInitBarrage.value = false;
+    };
+    watch(() => props.modelValue.slice(), (newValue, oldValue) => updateBarrages(newValue != null ? newValue : [], oldValue != null ? oldValue : []), {
+      deep: true
+    });
+    const rootStyle = ref({});
+    onMounted(() => __async(this, null, function* () {
+      var _a;
+      rootStyle.value["--move-distance"] = `-${(_a = barrageWrapper.value) == null ? void 0 : _a.offsetWidth}px`;
+      yield nextTick();
+      updateBarrages(props.modelValue, []);
+    }));
+    const play = () => {
+      isPlay.value = true;
+      barrageItems.forEach((item) => {
+        item.style.animationPlayState = "running";
+      });
+    };
+    const pause = () => {
+      isPlay.value = false;
+      barrageItems.forEach((item) => {
+        item.style.animationPlayState = "paused";
+      });
+    };
+    useExpose({
+      play,
+      pause
+    });
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": bem$11(),
+        "ref": barrageWrapper,
+        "style": rootStyle.value
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+const Barrage = withInstall(stdin_default$1e);
 const [name$14, bem$10, t$g] = createNamespace("calendar");
 const formatMonthTitle = (date) => t$g("monthTitle", date.getFullYear(), date.getMonth() + 1);
 function compareMonth(date1, date2) {
@@ -6958,6 +7108,7 @@ var stdin_default$17 = defineComponent({
   }) {
     const tabs = ref([]);
     const activeTab = ref(0);
+    const [selectedElementRefs, setSelectedElementRefs] = useRefs();
     const {
       text: textKey,
       value: valueKey,
@@ -7076,6 +7227,7 @@ var stdin_default$17 = defineComponent({
         selected
       }) : createVNode("span", null, [option[textKey]]);
       return createVNode("li", {
+        "ref": selected ? setSelectedElementRefs(tabIndex) : void 0,
         "role": "menuitemradio",
         "class": [bem$Z("option", {
           selected,
@@ -7132,7 +7284,18 @@ var stdin_default$17 = defineComponent({
     }, {
       default: () => [tabs.value.map(renderTab)]
     });
+    const scrollIntoView = (el) => {
+      const scrollParent = el.parentElement;
+      if (scrollParent) {
+        scrollParent.scrollTop = el.offsetTop - (scrollParent.offsetHeight - el.offsetHeight) / 2;
+      }
+    };
     updateTabs();
+    watch(activeTab, (value) => {
+      const el = selectedElementRefs.value[value];
+      if (el)
+        scrollIntoView(el);
+    });
     watch(() => props.options, updateTabs, {
       deep: true
     });
@@ -7316,7 +7479,7 @@ var stdin_default$14 = defineComponent({
       checked
     });
     useCustomFieldValue(() => props.modelValue);
-    return () => createVNode(stdin_default$1i, mergeProps({
+    return () => createVNode(stdin_default$1j, mergeProps({
       "bem": bem$W,
       "role": "checkbox",
       "parent": parent,
@@ -7837,7 +8000,7 @@ var stdin_default$$ = defineComponent({
   }
 });
 const CollapseItem = withInstall(stdin_default$$);
-const ConfigProvider = withInstall(stdin_default$1L);
+const ConfigProvider = withInstall(stdin_default$1M);
 const [name$R, bem$Q, t$e] = createNamespace("contact-card");
 const contactCardProps = {
   tel: String,
@@ -8002,7 +8165,7 @@ var stdin_default$Y = defineComponent({
       const renderRightIcon = () => createVNode(Radio, {
         "class": bem$O("radio"),
         "name": item.id,
-        "iconSize": 16
+        "iconSize": 18
       }, null);
       const renderEditIcon = () => createVNode(Icon, {
         "name": "edit",
@@ -8786,6 +8949,7 @@ var stdin_default$S = defineComponent({
     slots
   }) {
     const currentValues = ref(props.modelValue);
+    const updatedByExternalSources = ref(false);
     const genYearOptions = () => {
       const minYear = props.minDate.getFullYear();
       const maxYear = props.maxDate.getFullYear();
@@ -8801,7 +8965,7 @@ var stdin_default$S = defineComponent({
         columnsType
       } = props;
       const index = columnsType.indexOf(type);
-      const value = currentValues.value[index];
+      const value = updatedByExternalSources.value ? props.modelValue[index] : currentValues.value[index];
       if (value) {
         return +value;
       }
@@ -8847,11 +9011,13 @@ var stdin_default$S = defineComponent({
         emit("update:modelValue", newValues);
       }
     });
-    watch(() => props.modelValue, (newValues) => {
+    watch(() => props.modelValue, (newValues, oldValues) => {
+      updatedByExternalSources.value = isSameValue(oldValues, currentValues.value);
       newValues = formatValueRange(newValues, columns.value);
       if (!isSameValue(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
+      updatedByExternalSources.value = false;
     }, {
       immediate: true
     });
@@ -9154,6 +9320,7 @@ const [name$H, bem$H] = createNamespace("divider");
 const dividerProps = {
   dashed: Boolean,
   hairline: truthProp,
+  vertical: Boolean,
   contentPosition: makeStringProp("center")
 };
 var stdin_default$Q = defineComponent({
@@ -9169,9 +9336,10 @@ var stdin_default$Q = defineComponent({
         "class": bem$H({
           dashed: props.dashed,
           hairline: props.hairline,
-          [`content-${props.contentPosition}`]: !!slots.default
+          vertical: props.vertical,
+          [`content-${props.contentPosition}`]: !!slots.default && !props.vertical
         })
-      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+      }, [!props.vertical && ((_a = slots.default) == null ? void 0 : _a.call(slots))]);
     };
   }
 });
@@ -9656,6 +9824,7 @@ const getCenter = (touches) => ({
   y: (touches[0].clientY + touches[1].clientY) / 2
 });
 const bem$C = createNamespace("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default$L = defineComponent({
   props: {
     src: String,
@@ -9678,33 +9847,28 @@ var stdin_default$L = defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      initializing: false,
+      imageRatio: 0
     });
     const touch = useTouch();
     const imageRef = ref();
     const swipeItem = ref();
-    const vertical = computed(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
+    const vertical = ref(false);
+    const isLongImage = ref(false);
+    let initialMoveY = 0;
     const imageStyle = computed(() => {
       const {
         scale,
         moveX,
         moveY,
         moving,
-        zooming
+        zooming,
+        initializing
       } = state;
       const style = {
-        transitionDuration: zooming || moving ? "0s" : ".3s"
+        transitionDuration: zooming || moving || initializing ? "0s" : ".3s"
       };
-      if (scale !== 1) {
+      if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
@@ -9749,7 +9913,7 @@ var stdin_default$L = defineComponent({
           state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
         } else {
           state.moveX = 0;
-          state.moveY = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
         }
         emit("scale", {
           scale,
@@ -9762,7 +9926,7 @@ var stdin_default$L = defineComponent({
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale, scale === 2 ? {
+      setScale(scale, scale === 2 || isLongImage.value ? {
         x: touch.startX.value,
         y: touch.startY.value
       } : void 0);
@@ -9792,7 +9956,7 @@ var stdin_default$L = defineComponent({
       startMoveY = state.moveY;
       touchStartTime = Date.now();
       isImageMoved = false;
-      state.moving = fingerNum === 1 && state.scale !== 1;
+      state.moving = fingerNum === 1 && (state.scale !== 1 || isLongImage.value);
       state.zooming = fingerNum === 2 && !offsetX.value;
       if (state.zooming) {
         startScale = state.scale;
@@ -9888,12 +10052,34 @@ var stdin_default$L = defineComponent({
       checkTap();
       touch.reset();
     };
+    const resize = () => {
+      const {
+        rootWidth,
+        rootHeight
+      } = props;
+      const rootRatio = rootHeight / rootWidth;
+      const {
+        imageRatio
+      } = state;
+      vertical.value = state.imageRatio > rootRatio && imageRatio < longImageRatio;
+      isLongImage.value = state.imageRatio > rootRatio && imageRatio >= longImageRatio;
+      if (isLongImage.value) {
+        initialMoveY = (imageRatio * rootWidth - rootHeight) / 2;
+        state.moveY = initialMoveY;
+        state.initializing = true;
+        raf(() => {
+          state.initializing = false;
+        });
+      }
+      resetScale();
+    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
+      resize();
     };
     watch(() => props.active, resetScale);
     watch(() => props.show, (value) => {
@@ -9901,6 +10087,7 @@ var stdin_default$L = defineComponent({
         resetScale();
       }
     });
+    watch(() => [props.rootWidth, props.rootHeight], resize);
     useEventListener("touchmove", onTouchMove, {
       target: computed(() => {
         var _a;
@@ -11455,7 +11642,7 @@ var stdin_default$A = defineComponent({
   }
 });
 const PasswordInput = withInstall(stdin_default$A);
-const PickerGroup = withInstall(stdin_default$1u);
+const PickerGroup = withInstall(stdin_default$1v);
 const [name$r, bem$q] = createNamespace("popover");
 const popupProps = ["overlay", "duration", "teleport", "overlayStyle", "overlayClass", "closeOnClickOverlay"];
 const popoverProps = {
@@ -11463,6 +11650,7 @@ const popoverProps = {
   theme: makeStringProp("light"),
   overlay: Boolean,
   actions: makeArrayProp(),
+  actionsDirection: makeStringProp("vertical"),
   trigger: makeStringProp("click"),
   duration: numericProp,
   showArrow: truthProp,
@@ -11566,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) => {
@@ -11581,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
         },
@@ -11630,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)])]
       })]);
     };
@@ -12435,6 +12627,7 @@ const signatureProps = {
   penColor: makeStringProp("#000"),
   lineWidth: makeNumberProp(3),
   clearButtonText: String,
+  backgroundColor: makeStringProp(""),
   confirmButtonText: String
 };
 const hasCanvasSupport = () => {
@@ -12454,7 +12647,8 @@ var stdin_default$r = defineComponent({
     const state = reactive({
       width: 0,
       height: 0,
-      ctx: null
+      ctx: null,
+      ratio: inBrowser ? window.devicePixelRatio : 1
     });
     let canvasRect;
     const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
@@ -12463,7 +12657,7 @@ var stdin_default$r = defineComponent({
         return false;
       }
       state.ctx.beginPath();
-      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.lineWidth = props.lineWidth * state.ratio;
       state.ctx.strokeStyle = props.penColor;
       canvasRect = useRect(canvasRef);
       emit("start");
@@ -12475,8 +12669,8 @@ var stdin_default$r = defineComponent({
       }
       preventDefault(event);
       const touch = event.touches[0];
-      const mouseX = touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0);
-      const mouseY = touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0);
+      const mouseX = (touch.clientX - ((canvasRect == null ? void 0 : canvasRect.left) || 0)) * state.ratio;
+      const mouseY = (touch.clientY - ((canvasRect == null ? void 0 : canvasRect.top) || 0)) * state.ratio;
       state.ctx.lineCap = "round";
       state.ctx.lineJoin = "round";
       (_a = state.ctx) == null ? void 0 : _a.lineTo(mouseX, mouseY);
@@ -12493,13 +12687,23 @@ var stdin_default$r = defineComponent({
       empty.height = canvas.height;
       return canvas.toDataURL() === empty.toDataURL();
     };
+    const setCanvasBgColor = () => {
+      if (state.ctx && props.backgroundColor) {
+        state.ctx.fillStyle = props.backgroundColor;
+        state.ctx.fillRect(0, 0, state.width, state.height);
+      }
+    };
     const submit = () => {
+      var _a, _b;
       const canvas = canvasRef.value;
       if (!canvas) {
         return;
       }
       const isEmpty = isCanvasEmpty(canvas);
-      const image = isEmpty ? "" : canvas.toDataURL(`image/${props.type}`, props.type === "jpg" ? 0.9 : null);
+      const image = isEmpty ? "" : ((_b = (_a = {
+        jpg: () => canvas.toDataURL("image/jpeg", 0.8),
+        jpeg: () => canvas.toDataURL("image/jpeg", 0.8)
+      })[props.type]) == null ? void 0 : _b.call(_a)) || canvas.toDataURL(`image/${props.type}`);
       emit("submit", {
         image,
         canvas
@@ -12509,6 +12713,7 @@ var stdin_default$r = defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
+        setCanvasBgColor();
       }
       emit("clear");
     };
@@ -12516,8 +12721,11 @@ var stdin_default$r = defineComponent({
       var _a, _b, _c;
       if (isRenderCanvas) {
         state.ctx = (_a = canvasRef.value) == null ? void 0 : _a.getContext("2d");
-        state.width = ((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0;
-        state.height = ((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0;
+        state.width = (((_b = wrapRef.value) == null ? void 0 : _b.offsetWidth) || 0) * state.ratio;
+        state.height = (((_c = wrapRef.value) == null ? void 0 : _c.offsetHeight) || 0) * state.ratio;
+        nextTick(() => {
+          setCanvasBgColor();
+        });
       }
     });
     return () => createVNode("div", {
@@ -12801,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);
@@ -12825,6 +13041,7 @@ var stdin_default$i = defineComponent({
       if (props.disabled || props.readonly) {
         return;
       }
+      updateStartValue();
       const {
         min,
         reverse,
@@ -12864,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) => {
@@ -14228,10 +14441,11 @@ var stdin_default$6 = defineComponent({
     imageFit: String,
     lazyLoad: Boolean,
     deletable: Boolean,
+    reupload: Boolean,
     previewSize: [Number, String, Array],
     beforeDelete: Function
   },
-  emits: ["delete", "preview"],
+  emits: ["delete", "preview", "reupload"],
   setup(props, {
     emit,
     slots
@@ -14273,6 +14487,7 @@ var stdin_default$6 = defineComponent({
       });
     };
     const onPreview = () => emit("preview");
+    const onReupload = () => emit("reupload");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
         const slot = slots["preview-delete"];
@@ -14308,7 +14523,8 @@ var stdin_default$6 = defineComponent({
         item,
         lazyLoad,
         imageFit,
-        previewSize
+        previewSize,
+        reupload
       } = props;
       if (isImageFile(item)) {
         return createVNode(Image$1, {
@@ -14318,7 +14534,7 @@ var stdin_default$6 = defineComponent({
           "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
           "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
           "lazyLoad": lazyLoad,
-          "onClick": onPreview
+          "onClick": reupload ? onReupload : onPreview
         }, {
           default: renderCover
         });
@@ -14352,6 +14568,7 @@ const uploaderProps = {
   uploadIcon: makeStringProp("photograph"),
   uploadText: String,
   deletable: truthProp,
+  reupload: Boolean,
   afterRead: Function,
   showUpload: truthProp,
   modelValue: makeArrayProp(),
@@ -14369,13 +14586,14 @@ const uploaderProps = {
 var stdin_default$5 = defineComponent({
   name: name$1,
   props: uploaderProps,
-  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "update:modelValue"],
+  emits: ["delete", "oversize", "clickUpload", "closePreview", "clickPreview", "clickReupload", "update:modelValue"],
   setup(props, {
     emit,
     slots
   }) {
     const inputRef = ref();
     const urls = [];
+    const reuploadIndex = ref(-1);
     const getDetail = (index = props.modelValue.length) => ({
       name: props.name,
       index
@@ -14401,7 +14619,14 @@ var stdin_default$5 = defineComponent({
         }
       }
       items = reactive(items);
-      emit("update:modelValue", [...props.modelValue, ...toArray(items)]);
+      if (reuploadIndex.value > -1) {
+        const arr = [...props.modelValue];
+        arr.splice(reuploadIndex.value, 1, items);
+        emit("update:modelValue", arr);
+        reuploadIndex.value = -1;
+      } else {
+        emit("update:modelValue", [...props.modelValue, ...toArray(items)]);
+      }
       if (props.afterRead) {
         props.afterRead(items, getDetail());
       }
@@ -14502,15 +14727,20 @@ var stdin_default$5 = defineComponent({
       emit("update:modelValue", fileList);
       emit("delete", item, getDetail(index));
     };
+    const reuploadImage = (index) => {
+      chooseFile();
+      reuploadIndex.value = index;
+    };
     const renderPreviewItem = (item, index) => {
-      const needPickData = ["imageFit", "deletable", "previewSize", "beforeDelete"];
+      const needPickData = ["imageFit", "deletable", "reupload", "previewSize", "beforeDelete"];
       const previewData = extend(pick(props, needPickData), pick(item, needPickData, true));
       return createVNode(stdin_default$6, mergeProps({
         "item": item,
         "index": index,
-        "onClick": () => emit("clickPreview", item, getDetail(index)),
+        "onClick": () => emit(props.reupload ? "clickReupload" : "clickPreview", item, getDetail(index)),
         "onDelete": () => deleteFile(item, index),
-        "onPreview": () => previewImage(item)
+        "onPreview": () => previewImage(item),
+        "onReupload": () => reuploadImage(index)
       }, pick(props, ["name", "lazyLoad"]), previewData), pick(slots, ["preview-cover", "preview-delete"]));
     };
     const renderPreviewList = () => {
@@ -14520,24 +14750,25 @@ var stdin_default$5 = defineComponent({
     };
     const onClickUpload = (event) => emit("clickUpload", event);
     const renderUpload = () => {
-      if (props.modelValue.length >= +props.maxCount) {
+      if (props.modelValue.length >= +props.maxCount && !props.reupload) {
         return;
       }
+      const hideUploader = props.modelValue.length >= +props.maxCount && props.reupload;
       const Input = props.readonly ? null : createVNode("input", {
         "ref": inputRef,
         "type": "file",
         "class": bem$1("input"),
         "accept": props.accept,
         "capture": props.capture,
-        "multiple": props.multiple,
+        "multiple": props.multiple && reuploadIndex.value === -1,
         "disabled": props.disabled,
         "onChange": onChange
       }, null);
       if (slots.default) {
-        return createVNode("div", {
+        return withDirectives(createVNode("div", {
           "class": bem$1("input-wrapper"),
           "onClick": onClickUpload
-        }, [slots.default(), Input]);
+        }, [slots.default(), Input]), [[vShow, !hideUploader]]);
       }
       return withDirectives(createVNode("div", {
         "class": bem$1("upload", {
@@ -14550,7 +14781,7 @@ var stdin_default$5 = defineComponent({
         "class": bem$1("upload-icon")
       }, null), props.uploadText && createVNode("span", {
         "class": bem$1("upload-text")
-      }, [props.uploadText]), Input]), [[vShow, props.showUpload]]);
+      }, [props.uploadText]), Input]), [[vShow, props.showUpload && !hideUploader]]);
     };
     const chooseFile = () => {
       if (inputRef.value && !props.disabled) {
@@ -15577,7 +15808,7 @@ const Lazyload = {
     });
   }
 };
-const version = "4.3.2";
+const version = "4.4.1";
 function install(app) {
   const components = [
     ActionBar,
@@ -15589,6 +15820,7 @@ function install(app) {
     Area,
     BackTop,
     Badge,
+    Barrage,
     Button,
     Calendar,
     Card,
@@ -15699,6 +15931,7 @@ export {
   Area,
   BackTop,
   Badge,
+  Barrage,
   Button,
   Calendar,
   Card,
@@ -15798,6 +16031,7 @@ export {
   areaProps,
   backTopProps,
   badgeProps,
+  barrageProps,
   buttonProps,
   calendarProps,
   cardProps,