vant 4.3.1 → 4.4.0

package/es/dialog/index.css

@@ -1 +1 @@
-:root{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-duration-base);--van-dialog-radius: 16px;--van-dialog-background: var(--van-background-2);--van-dialog-header-font-weight: var(--van-font-bold);--van-dialog-header-line-height: 24px;--van-dialog-header-padding-top: 26px;--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;--van-dialog-message-padding: var(--van-padding-lg);--van-dialog-message-font-size: var(--van-font-size-md);--van-dialog-message-line-height: var(--van-line-height-md);--van-dialog-message-max-height: 60vh;--van-dialog-has-title-message-text-color: var(--van-gray-7);--van-dialog-has-title-message-padding-top: var(--van-padding-xs);--van-dialog-button-height: 48px;--van-dialog-round-button-height: 36px;--van-dialog-confirm-button-text-color: var(--van-primary-color)}.van-dialog{top:45%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background);border-radius:var(--van-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{color:var(--van-text-color);padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{color:var(--van-text-color);flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__message--justify{text-align:justify}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog-bounce-enter-from{transform:translate3d(0,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(0,-50%,0) scale(.9);opacity:0}
+:root{--van-dialog-width: 320px;--van-dialog-small-screen-width: 90%;--van-dialog-font-size: var(--van-font-size-lg);--van-dialog-transition: var(--van-duration-base);--van-dialog-radius: 16px;--van-dialog-background: var(--van-background-2);--van-dialog-header-font-weight: var(--van-font-bold);--van-dialog-header-line-height: 24px;--van-dialog-header-padding-top: 26px;--van-dialog-header-isolated-padding: var(--van-padding-lg) 0;--van-dialog-message-padding: var(--van-padding-lg);--van-dialog-message-font-size: var(--van-font-size-md);--van-dialog-message-line-height: var(--van-line-height-md);--van-dialog-message-max-height: 60vh;--van-dialog-has-title-message-text-color: var(--van-gray-7);--van-dialog-has-title-message-padding-top: var(--van-padding-xs);--van-dialog-button-height: 48px;--van-dialog-round-button-height: 36px;--van-dialog-confirm-button-text-color: var(--van-primary-color)}.van-dialog{top:45%;width:var(--van-dialog-width);overflow:hidden;font-size:var(--van-dialog-font-size);background:var(--van-dialog-background);border-radius:var(--van-dialog-radius);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:var(--van-dialog-transition);transition-property:transform,opacity}@media (max-width: 321px){.van-dialog{width:var(--van-dialog-small-screen-width)}}.van-dialog__header{color:var(--van-text-color);padding-top:var(--van-dialog-header-padding-top);font-weight:var(--van-dialog-header-font-weight);line-height:var(--van-dialog-header-line-height);text-align:center}.van-dialog__header--isolated{padding:var(--van-dialog-header-isolated-padding)}.van-dialog__content--isolated{display:flex;align-items:center;min-height:104px}.van-dialog__message{color:var(--van-text-color);flex:1;max-height:var(--van-dialog-message-max-height);padding:26px var(--van-dialog-message-padding);overflow-y:auto;font-size:var(--van-dialog-message-font-size);line-height:var(--van-dialog-message-line-height);white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:var(--van-dialog-has-title-message-padding-top);color:var(--van-dialog-has-title-message-text-color)}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__message--justify{text-align:justify}.van-dialog__footer{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__confirm,.van-dialog__cancel{flex:1;height:var(--van-dialog-button-height);margin:0;border:0;border-radius:0}.van-dialog__confirm,.van-dialog__confirm:active{color:var(--van-dialog-confirm-button-text-color)}.van-dialog--round-button .van-dialog__footer{position:relative;height:auto;padding:var(--van-padding-xs) var(--van-padding-lg) var(--van-padding-md)}.van-dialog--round-button .van-dialog__message{padding-bottom:var(--van-padding-md);color:var(--van-text-color)}.van-dialog--round-button .van-dialog__confirm,.van-dialog--round-button .van-dialog__cancel{height:var(--van-dialog-round-button-height)}.van-dialog--round-button .van-dialog__confirm{color:var(--van-white)}.van-dialog--round-button .van-action-bar-button--first{border-top-left-radius:var(--van-radius-max);border-bottom-left-radius:var(--van-radius-max)}.van-dialog--round-button .van-action-bar-button--last{border-top-right-radius:var(--van-radius-max);border-bottom-right-radius:var(--van-radius-max)}.van-dialog-bounce-enter-from{transform:translate3d(0,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{transform:translate3d(0,-50%,0) scale(.9);opacity:0}

package/es/divider/Divider.d.ts

@@ -6,6 +6,7 @@ export declare const dividerProps: {
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<DividerContentPosition>;
         default: DividerContentPosition;
@@ -18,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<DividerContentPosition>;
         default: DividerContentPosition;
@@ -28,11 +30,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<DividerContentPosition>;
         default: DividerContentPosition;
     };
 }>>, {
+    vertical: boolean;
     hairline: boolean;
     dashed: boolean;
     contentPosition: DividerContentPosition;

package/es/divider/Divider.mjs

@@ -5,6 +5,7 @@ const [name, bem] = createNamespace("divider");
 const dividerProps = {
   dashed: Boolean,
   hairline: truthProp,
+  vertical: Boolean,
   contentPosition: makeStringProp("center")
 };
 var stdin_default = defineComponent({
@@ -20,9 +21,10 @@ var stdin_default = defineComponent({
         "class": bem({
           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))]);
     };
   }
 });

package/es/divider/index.css

@@ -1 +1 @@
-:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}
+:root{--van-divider-margin: var(--van-padding-md) 0;--van-divider-vertical-margin: 0 var(--van-padding-xs);--van-divider-text-color: var(--van-text-color-2);--van-divider-font-size: var(--van-font-size-md);--van-divider-line-height: 24px;--van-divider-border-color: var(--van-border-color);--van-divider-content-padding: var(--van-padding-md);--van-divider-content-left-width: 10%;--van-divider-content-right-width: 10%}.van-divider{display:flex;align-items:center;margin:var(--van-divider-margin);color:var(--van-divider-text-color);font-size:var(--van-divider-font-size);line-height:var(--van-divider-line-height);border-color:var(--van-divider-border-color);border-style:solid;border-width:0}.van-divider:before,.van-divider:after{display:block;flex:1;box-sizing:border-box;height:1px;border-color:inherit;border-style:inherit;border-width:var(--van-border-width) 0 0}.van-divider:before{content:""}.van-divider--hairline:before,.van-divider--hairline:after{transform:scaleY(.5)}.van-divider--dashed{border-style:dashed}.van-divider--content-center:before,.van-divider--content-left:before,.van-divider--content-right:before{margin-right:var(--van-divider-content-padding)}.van-divider--content-center:after,.van-divider--content-left:after,.van-divider--content-right:after{margin-left:var(--van-divider-content-padding);content:""}.van-divider--content-left:before{max-width:var(--van-divider-content-left-width)}.van-divider--content-right:after{max-width:var(--van-divider-content-right-width)}.van-divider--vertical{display:inline-block;width:var(--van-border-width);height:1em;margin:var(--van-divider-vertical-margin);vertical-align:middle}.van-divider--vertical:before{height:100%;border-width:0 0 0 var(--van-border-width)}.van-divider--vertical:after{display:none}.van-divider--vertical.van-divider--hairline:before{transform:scaleX(.5)}

package/es/divider/index.d.ts

@@ -4,6 +4,7 @@ export declare const Divider: import("../utils").WithInstall<import("vue").Defin
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<import("./Divider").DividerContentPosition>;
         default: import("./Divider").DividerContentPosition;
@@ -14,11 +15,13 @@ export declare const Divider: import("../utils").WithInstall<import("vue").Defin
         type: BooleanConstructor;
         default: true;
     };
+    vertical: BooleanConstructor;
     contentPosition: {
         type: import("vue").PropType<import("./Divider").DividerContentPosition>;
         default: import("./Divider").DividerContentPosition;
     };
 }>>, {
+    vertical: boolean;
     hairline: boolean;
     dashed: boolean;
     contentPosition: import("./Divider").DividerContentPosition;

package/es/field/Field.mjs

@@ -428,6 +428,10 @@ var stdin_default = defineComponent({
         return _createVNode("label", {
           "id": `${id}-label`,
           "for": getInputId(),
+          "onClick": (event) => {
+            preventDefault(event);
+            focus();
+          },
           "style": labelAlign === "top" && labelWidth ? {
             width: addUnit(labelWidth)
           } : void 0

package/es/image-preview/ImagePreviewItem.mjs

@@ -2,12 +2,17 @@ import { createVNode as _createVNode } from "vue";
 import { ref, watch, computed, reactive, defineComponent } from "vue";
 import { clamp, numericProp, preventDefault, createNamespace, makeRequiredProp, LONG_PRESS_START_TIME } from "../utils/index.mjs";
 import { useTouch } from "../composables/use-touch.mjs";
-import { useEventListener } from "@vant/use";
+import { useEventListener, useRect } from "@vant/use";
 import { Image } from "../image/index.mjs";
 import { Loading } from "../loading/index.mjs";
 import { SwipeItem } from "../swipe-item/index.mjs";
 const getDistance = (touches) => Math.sqrt((touches[0].clientX - touches[1].clientX) ** 2 + (touches[0].clientY - touches[1].clientY) ** 2);
+const getCenter = (touches) => ({
+  x: (touches[0].clientX + touches[1].clientX) / 2,
+  y: (touches[0].clientY + touches[1].clientY) / 2
+});
 const bem = createNamespace("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default = defineComponent({
   props: {
     src: String,
@@ -30,20 +35,14 @@ var stdin_default = defineComponent({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      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,
@@ -55,10 +54,8 @@ var stdin_default = defineComponent({
       const style = {
         transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-      if (scale !== 1) {
-        const offsetX = moveX / scale;
-        const offsetY = moveY / scale;
-        style.transform = `scale(${scale}, ${scale}) translate(${offsetX}px, ${offsetY}px)`;
+      if (scale !== 1 || isLongImage.value) {
+        style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
     });
@@ -84,10 +81,26 @@ var stdin_default = defineComponent({
       }
       return 0;
     });
-    const setScale = (scale) => {
+    const setScale = (scale, center) => {
+      var _a;
       scale = clamp(scale, +props.minZoom, +props.maxZoom + 1);
       if (scale !== state.scale) {
+        const ratio = scale / state.scale;
         state.scale = scale;
+        if (center) {
+          const imageRect = useRect((_a = imageRef.value) == null ? void 0 : _a.$el);
+          const origin = {
+            x: imageRect.width * 0.5,
+            y: imageRect.height * 0.5
+          };
+          const moveX = state.moveX - (center.x - imageRect.left - origin.x) * (ratio - 1);
+          const moveY = state.moveY - (center.y - imageRect.top - origin.y) * (ratio - 1);
+          state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value);
+          state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value);
+        } else {
+          state.moveX = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
+        }
         emit("scale", {
           scale,
           index: props.active
@@ -96,20 +109,20 @@ var stdin_default = defineComponent({
     };
     const resetScale = () => {
       setScale(1);
-      state.moveX = 0;
-      state.moveY = 0;
     };
     const toggleScale = () => {
       const scale = state.scale > 1 ? 1 : 2;
-      setScale(scale);
-      state.moveX = 0;
-      state.moveY = 0;
+      setScale(scale, scale === 2 || isLongImage.value ? {
+        x: touch.startX.value,
+        y: touch.startY.value
+      } : void 0);
     };
     let fingerNum;
     let startMoveX;
     let startMoveY;
     let startScale;
     let startDistance;
+    let lastCenter;
     let doubleTapTimer;
     let touchStartTime;
     let isImageMoved = false;
@@ -129,11 +142,11 @@ var stdin_default = 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;
-        startDistance = getDistance(event.touches);
+        startDistance = getDistance(touches);
       }
     };
     const onTouchMove = (event) => {
@@ -162,7 +175,8 @@ var stdin_default = defineComponent({
         if (touches.length === 2) {
           const distance = getDistance(touches);
           const scale = startScale * distance / startDistance;
-          setScale(scale);
+          lastCenter = getCenter(touches);
+          setScale(scale, lastCenter);
         }
       }
     };
@@ -216,7 +230,7 @@ var stdin_default = defineComponent({
           }
           const maxZoom = +props.maxZoom;
           if (state.scale > maxZoom) {
-            state.scale = maxZoom;
+            setScale(maxZoom, lastCenter);
           }
         }
       }
@@ -224,12 +238,30 @@ var stdin_default = 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;
+      }
+      resetScale();
+    };
     const onLoad = (event) => {
       const {
         naturalWidth,
         naturalHeight
       } = event.target;
       state.imageRatio = naturalHeight / naturalWidth;
+      resize();
     };
     watch(() => props.active, resetScale);
     watch(() => props.show, (value) => {
@@ -237,6 +269,7 @@ var stdin_default = defineComponent({
         resetScale();
       }
     });
+    watch(() => [props.rootWidth, props.rootHeight], resize);
     useEventListener("touchmove", onTouchMove, {
       target: computed(() => {
         var _a;
@@ -261,6 +294,7 @@ var stdin_default = defineComponent({
         }, [slots.image({
           src: props.src
         })]) : _createVNode(Image, {
+          "ref": imageRef,
           "src": props.src,
           "fit": "contain",
           "class": bem("image", {

package/es/index.d.ts

@@ -7,6 +7,7 @@ export * from "./address-list";
 export * from "./area";
 export * from "./back-top";
 export * from "./badge";
+export * from "./barrage";
 export * from "./button";
 export * from "./calendar";
 export * from "./card";
@@ -101,4 +102,4 @@ declare namespace _default {
 }
 export default _default;
 export function install(app: any): void;
-export const version: "4.3.1";
+export const version: "4.4.0";

package/es/index.mjs

@@ -7,6 +7,7 @@ import { AddressList } from "./address-list/index.mjs";
 import { Area } from "./area/index.mjs";
 import { BackTop } from "./back-top/index.mjs";
 import { Badge } from "./badge/index.mjs";
+import { Barrage } from "./barrage/index.mjs";
 import { Button } from "./button/index.mjs";
 import { Calendar } from "./calendar/index.mjs";
 import { Card } from "./card/index.mjs";
@@ -94,7 +95,7 @@ import { Toast } from "./toast/index.mjs";
 import { TreeSelect } from "./tree-select/index.mjs";
 import { Uploader } from "./uploader/index.mjs";
 import { Watermark } from "./watermark/index.mjs";
-const version = "4.3.1";
+const version = "4.4.0";
 function install(app) {
   const components = [
     ActionBar,
@@ -106,6 +107,7 @@ function install(app) {
     Area,
     BackTop,
     Badge,
+    Barrage,
     Button,
     Calendar,
     Card,
@@ -211,6 +213,7 @@ export * from "./address-list/index.mjs";
 export * from "./area/index.mjs";
 export * from "./back-top/index.mjs";
 export * from "./badge/index.mjs";
+export * from "./barrage/index.mjs";
 export * from "./button/index.mjs";
 export * from "./calendar/index.mjs";
 export * from "./card/index.mjs";

package/es/notice-bar/NoticeBar.d.ts

@@ -64,8 +64,8 @@ declare const _default: import("vue").DefineComponent<{
     onReplay?: ((...args: any[]) => any) | undefined;
 }, {
     scrollable: boolean | null;
-    speed: string | number;
     delay: string | number;
+    speed: string | number;
     wrapable: boolean;
 }>;
 export default _default;

package/es/notice-bar/index.d.ts

@@ -42,8 +42,8 @@ export declare const NoticeBar: import("../utils").WithInstall<import("vue").Def
     onReplay?: ((...args: any[]) => any) | undefined;
 }, {
     scrollable: boolean | null;
-    speed: string | number;
     delay: string | number;
+    speed: string | number;
     wrapable: boolean;
 }>>;
 export default NoticeBar;

package/es/picker-group/PickerGroup.d.ts

@@ -6,6 +6,10 @@ export declare const pickerGroupProps: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    activeTab: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     nextStepText: StringConstructor;
 } & {
     title: StringConstructor;
@@ -18,16 +22,24 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    activeTab: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     nextStepText: StringConstructor;
 } & {
     title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm" | "update:activeTab")[], "cancel" | "confirm" | "update:activeTab", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tabs: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    activeTab: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     nextStepText: StringConstructor;
 } & {
     title: StringConstructor;
@@ -36,7 +48,9 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:activeTab"?: ((...args: any[]) => any) | undefined;
 }, {
     tabs: string[];
+    activeTab: string | number;
 }>;
 export default _default;

package/es/picker-group/PickerGroup.mjs

@@ -1,7 +1,8 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, defineComponent } from "vue";
-import { extend, pick, makeArrayProp, createNamespace } from "../utils/index.mjs";
+import { defineComponent } from "vue";
+import { pick, extend, makeArrayProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
 import { useChildren } from "@vant/use";
+import { useSyncPropRef } from "../composables/use-sync-prop-ref.mjs";
 import { Tab } from "../tab/index.mjs";
 import { Tabs } from "../tabs/index.mjs";
 import Toolbar, { pickerToolbarProps, pickerToolbarSlots } from "../picker/PickerToolbar.mjs";
@@ -9,26 +10,27 @@ const [name, bem] = createNamespace("picker-group");
 const PICKER_GROUP_KEY = Symbol(name);
 const pickerGroupProps = extend({
   tabs: makeArrayProp(),
+  activeTab: makeNumericProp(0),
   nextStepText: String
 }, pickerToolbarProps);
 var stdin_default = defineComponent({
   name,
   props: pickerGroupProps,
-  emits: ["confirm", "cancel"],
+  emits: ["confirm", "cancel", "update:activeTab"],
   setup(props, {
     emit,
     slots
   }) {
-    const activeTab = ref(0);
+    const activeTab = useSyncPropRef(() => props.activeTab, (value) => emit("update:activeTab", value));
     const {
       children,
       linkChildren
     } = useChildren(PICKER_GROUP_KEY);
     linkChildren();
-    const showNextButton = () => activeTab.value < props.tabs.length - 1 && props.nextStepText;
+    const showNextButton = () => +activeTab.value < props.tabs.length - 1 && props.nextStepText;
     const onConfirm = () => {
       if (showNextButton()) {
-        activeTab.value++;
+        activeTab.value = +activeTab.value + 1;
       } else {
         emit("confirm", children.map((item) => item.confirm()));
       }

package/es/picker-group/index.d.ts

@@ -4,16 +4,24 @@ export declare const PickerGroup: import("../utils").WithInstall<import("vue").D
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    activeTab: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     nextStepText: StringConstructor;
 } & {
     title: StringConstructor;
     cancelButtonText: StringConstructor;
     confirmButtonText: StringConstructor;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm")[], "cancel" | "confirm", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("cancel" | "confirm" | "update:activeTab")[], "cancel" | "confirm" | "update:activeTab", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     tabs: {
         type: import("vue").PropType<string[]>;
         default: () => never[];
     };
+    activeTab: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
     nextStepText: StringConstructor;
 } & {
     title: StringConstructor;
@@ -22,8 +30,10 @@ export declare const PickerGroup: import("../utils").WithInstall<import("vue").D
 }>> & {
     onCancel?: ((...args: any[]) => any) | undefined;
     onConfirm?: ((...args: any[]) => any) | undefined;
+    "onUpdate:activeTab"?: ((...args: any[]) => any) | undefined;
 }, {
     tabs: string[];
+    activeTab: string | number;
 }>>;
 export default PickerGroup;
 export { pickerGroupProps } from './PickerGroup';

package/es/signature/Signature.d.ts

@@ -14,6 +14,10 @@ export declare const signatureProps: {
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 };
 export type SignatureProps = ExtractPropTypes<typeof signatureProps>;
@@ -32,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "start" | "clear" | "end" | "signing")[], "submit" | "start" | "clear" | "end" | "signing", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     tips: StringConstructor;
@@ -48,6 +56,10 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
@@ -57,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{
     onSigning?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    backgroundColor: string;
     lineWidth: number;
     penColor: string;
 }>;

package/es/signature/Signature.mjs

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode } from "vue";
-import { ref, reactive, onMounted, defineComponent } from "vue";
+import { ref, reactive, onMounted, nextTick, defineComponent } from "vue";
 import { inBrowser, makeNumberProp, makeStringProp, createNamespace, preventDefault } from "../utils/index.mjs";
 import { useRect } from "@vant/use";
 import { Button } from "../button/index.mjs";
@@ -10,6 +10,7 @@ const signatureProps = {
   penColor: makeStringProp("#000"),
   lineWidth: makeNumberProp(3),
   clearButtonText: String,
+  backgroundColor: makeStringProp(""),
   confirmButtonText: String
 };
 const hasCanvasSupport = () => {
@@ -29,7 +30,8 @@ var stdin_default = defineComponent({
     const state = reactive({
       width: 0,
       height: 0,
-      ctx: null
+      ctx: null,
+      ratio: inBrowser ? window.devicePixelRatio : 1
     });
     let canvasRect;
     const isRenderCanvas = inBrowser ? hasCanvasSupport() : true;
@@ -38,7 +40,7 @@ var stdin_default = 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");
@@ -50,8 +52,8 @@ var stdin_default = 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);
@@ -68,13 +70,23 @@ var stdin_default = 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
@@ -84,6 +96,7 @@ var stdin_default = defineComponent({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
+        setCanvasBgColor();
       }
       emit("clear");
     };
@@ -91,8 +104,11 @@ var stdin_default = 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", {

package/es/signature/index.css

@@ -1 +1 @@
-:root{--van-signature-padding: var(--van-padding-xs);--van-signature-content-height: 200px;--van-signature-content-background: var(--van-background-2);--van-signature-content-border: 1px dotted #dadada}.van-signature{padding:var(--van-signature-padding)}.van-signature__content{display:flex;justify-content:center;align-items:center;height:var(--van-signature-content-height);background-color:var(--van-signature-content-background);border:var(--van-signature-content-border);border-radius:var(--van-radius-lg);overflow:hidden}.van-signature__footer{display:flex;justify-content:flex-end}.van-signature__footer .van-button{padding:0 var(--van-padding-md);margin-top:var(--van-padding-xs);margin-left:var(--van-padding-xs)}
+:root{--van-signature-padding: var(--van-padding-xs);--van-signature-content-height: 200px;--van-signature-content-background: var(--van-background-2);--van-signature-content-border: 1px dotted #dadada}.van-signature{padding:var(--van-signature-padding)}.van-signature__content{display:flex;justify-content:center;align-items:center;height:var(--van-signature-content-height);background-color:var(--van-signature-content-background);border:var(--van-signature-content-border);border-radius:var(--van-radius-lg);overflow:hidden}.van-signature__content canvas{width:100%;height:100%}.van-signature__footer{display:flex;justify-content:flex-end}.van-signature__footer .van-button{padding:0 var(--van-padding-md);margin-top:var(--van-padding-xs);margin-left:var(--van-padding-xs)}