vant 4.3.1 → 4.4.0

package/lib/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/lib/index.js

@@ -32,6 +32,7 @@ var import_address_list = require("./address-list");
 var import_area = require("./area");
 var import_back_top = require("./back-top");
 var import_badge = require("./badge");
+var import_barrage = require("./barrage");
 var import_button = require("./button");
 var import_calendar = require("./calendar");
 var import_card = require("./card");
@@ -128,6 +129,7 @@ __reExport(stdin_exports, require("./address-list"), module.exports);
 __reExport(stdin_exports, require("./area"), module.exports);
 __reExport(stdin_exports, require("./back-top"), module.exports);
 __reExport(stdin_exports, require("./badge"), module.exports);
+__reExport(stdin_exports, require("./barrage"), module.exports);
 __reExport(stdin_exports, require("./button"), module.exports);
 __reExport(stdin_exports, require("./calendar"), module.exports);
 __reExport(stdin_exports, require("./card"), module.exports);
@@ -216,7 +218,7 @@ __reExport(stdin_exports, require("./toast"), module.exports);
 __reExport(stdin_exports, require("./tree-select"), module.exports);
 __reExport(stdin_exports, require("./uploader"), module.exports);
 __reExport(stdin_exports, require("./watermark"), module.exports);
-const version = "4.3.1";
+const version = "4.4.0";
 function install(app) {
   const components = [
     import_action_bar.ActionBar,
@@ -228,6 +230,7 @@ function install(app) {
     import_area.Area,
     import_back_top.BackTop,
     import_badge.Badge,
+    import_barrage.Barrage,
     import_button.Button,
     import_calendar.Calendar,
     import_card.Card,

package/lib/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/lib/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/lib/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/lib/picker-group/PickerGroup.js

@@ -36,6 +36,7 @@ var import_vue = require("vue");
 var import_vue2 = require("vue");
 var import_utils = require("../utils");
 var import_use = require("@vant/use");
+var import_use_sync_prop_ref = require("../composables/use-sync-prop-ref");
 var import_tab = require("../tab");
 var import_tabs = require("../tabs");
 var import_PickerToolbar = __toESM(require("../picker/PickerToolbar"));
@@ -43,26 +44,27 @@ const [name, bem] = (0, import_utils.createNamespace)("picker-group");
 const PICKER_GROUP_KEY = Symbol(name);
 const pickerGroupProps = (0, import_utils.extend)({
   tabs: (0, import_utils.makeArrayProp)(),
+  activeTab: (0, import_utils.makeNumericProp)(0),
   nextStepText: String
 }, import_PickerToolbar.pickerToolbarProps);
 var stdin_default = (0, import_vue2.defineComponent)({
   name,
   props: pickerGroupProps,
-  emits: ["confirm", "cancel"],
+  emits: ["confirm", "cancel", "update:activeTab"],
   setup(props, {
     emit,
     slots
   }) {
-    const activeTab = (0, import_vue2.ref)(0);
+    const activeTab = (0, import_use_sync_prop_ref.useSyncPropRef)(() => props.activeTab, (value) => emit("update:activeTab", value));
     const {
       children,
       linkChildren
     } = (0, import_use.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/lib/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/lib/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/lib/signature/Signature.js

@@ -33,6 +33,7 @@ const signatureProps = {
   penColor: (0, import_utils.makeStringProp)("#000"),
   lineWidth: (0, import_utils.makeNumberProp)(3),
   clearButtonText: String,
+  backgroundColor: (0, import_utils.makeStringProp)(""),
   confirmButtonText: String
 };
 const hasCanvasSupport = () => {
@@ -52,7 +53,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     const state = (0, import_vue2.reactive)({
       width: 0,
       height: 0,
-      ctx: null
+      ctx: null,
+      ratio: import_utils.inBrowser ? window.devicePixelRatio : 1
     });
     let canvasRect;
     const isRenderCanvas = import_utils.inBrowser ? hasCanvasSupport() : true;
@@ -61,7 +63,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         return false;
       }
       state.ctx.beginPath();
-      state.ctx.lineWidth = props.lineWidth;
+      state.ctx.lineWidth = props.lineWidth * state.ratio;
       state.ctx.strokeStyle = props.penColor;
       canvasRect = (0, import_use.useRect)(canvasRef);
       emit("start");
@@ -73,8 +75,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       (0, import_utils.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);
@@ -91,13 +93,23 @@ var stdin_default = (0, import_vue2.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
@@ -107,6 +119,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       if (state.ctx) {
         state.ctx.clearRect(0, 0, state.width, state.height);
         state.ctx.closePath();
+        setCanvasBgColor();
       }
       emit("clear");
     };
@@ -114,8 +127,11 @@ var stdin_default = (0, import_vue2.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;
+        (0, import_vue2.nextTick)(() => {
+          setCanvasBgColor();
+        });
       }
     });
     return () => (0, import_vue.createVNode)("div", {

package/lib/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)}

package/lib/signature/index.d.ts

@@ -13,6 +13,10 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
         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<import("vue").ExtractPropTypes<{
     tips: StringConstructor;
@@ -29,6 +33,10 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
         default: number;
     };
     clearButtonText: StringConstructor;
+    backgroundColor: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     confirmButtonText: StringConstructor;
 }>> & {
     onSubmit?: ((...args: any[]) => any) | undefined;
@@ -38,6 +46,7 @@ export declare const Signature: import("../utils").WithInstall<import("vue").Def
     onSigning?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
+    backgroundColor: string;
     lineWidth: number;
     penColor: string;
 }>>;

package/lib/step/index.css

@@ -1 +1 @@
-:root{--van-step-text-color: var(--van-text-color-2);--van-step-active-color: var(--van-primary-color);--van-step-process-text-color: var(--van-text-color);--van-step-font-size: var(--van-font-size-md);--van-step-line-color: var(--van-border-color);--van-step-finish-line-color: var(--van-primary-color);--van-step-finish-text-color: var(--van-text-color);--van-step-icon-size: 12px;--van-step-circle-size: 5px;--van-step-circle-color: var(--van-gray-6);--van-step-horizontal-title-font-size: var(--van-font-size-sm)}.van-step{position:relative;flex:1;color:var(--van-step-text-color);font-size:var(--van-step-font-size)}.van-step__circle{display:block;width:var(--van-step-circle-size);height:var(--van-step-circle-size);background-color:var(--van-step-circle-color);border-radius:50%}.van-step__line{position:absolute;background-color:var(--van-step-line-color);transition:background-color var(--van-duration-base)}.van-step--horizontal{float:left}.van-step--horizontal:first-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child{position:absolute;right:1px;width:auto}.van-step--horizontal:last-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child .van-step__circle-container{right:-9px;left:auto}.van-step--horizontal .van-step__circle-container{position:absolute;top:30px;left:calc(var(--van-padding-xs) * -1);z-index:1;padding:0 var(--van-padding-xs);background-color:var(--van-background-2);transform:translateY(-50%)}.van-step--horizontal .van-step__title{display:inline-block;margin-left:3px;font-size:var(--van-step-horizontal-title-font-size);transform:translate(-50%)}.van-step--horizontal .van-step__line{top:30px;left:0;width:100%;height:1px}.van-step--horizontal .van-step__icon{display:block;font-size:var(--van-step-icon-size)}.van-step--horizontal .van-step--process{color:var(--van-step-process-text-color)}.van-step--vertical{display:block;float:none;padding:10px 10px 10px 0;line-height:var(--van-line-height-sm)}.van-step--vertical:not(:last-child):after{border-bottom-width:1px}.van-step--vertical .van-step__circle-container{position:absolute;top:19px;left:-15px;z-index:1;font-size:var(--van-step-icon-size);line-height:1;transform:translate(-50%,-50%)}.van-step--vertical .van-step__line{top:16px;left:-15px;width:1px;height:100%}.van-step:last-child .van-step__line{width:0}.van-step--finish{color:var(--van-step-finish-text-color)}.van-step--finish .van-step__circle,.van-step--finish .van-step__line{background-color:var(--van-step-finish-line-color)}.van-step__icon,.van-step__title{transition:color var(--van-duration-base)}.van-step__icon--active,.van-step__title--active,.van-step__icon--finish,.van-step__title--finish{color:var(--van-step-active-color)}
+:root{--van-step-text-color: var(--van-text-color-2);--van-step-active-color: var(--van-primary-color);--van-step-process-text-color: var(--van-text-color);--van-step-font-size: var(--van-font-size-md);--van-step-line-color: var(--van-border-color);--van-step-finish-line-color: var(--van-primary-color);--van-step-finish-text-color: var(--van-text-color);--van-step-icon-size: 12px;--van-step-circle-size: 5px;--van-step-circle-color: var(--van-gray-6);--van-step-horizontal-title-font-size: var(--van-font-size-sm)}.van-step{position:relative;flex:1;color:var(--van-step-text-color);font-size:var(--van-step-font-size)}.van-step__circle{display:block;width:var(--van-step-circle-size);height:var(--van-step-circle-size);background-color:var(--van-step-circle-color);border-radius:50%}.van-step__line{position:absolute;background-color:var(--van-step-line-color);transition:background-color var(--van-duration-base)}.van-step--horizontal{float:left}.van-step--horizontal:first-child .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child:not(:first-child){position:absolute;right:1px;width:auto}.van-step--horizontal:last-child:not(:first-child) .van-step__title{margin-left:0;transform:none}.van-step--horizontal:last-child:not(:first-child) .van-step__circle-container{right:-9px;left:auto}.van-step--horizontal .van-step__circle-container{position:absolute;top:30px;left:calc(var(--van-padding-xs) * -1);z-index:1;padding:0 var(--van-padding-xs);background-color:var(--van-background-2);transform:translateY(-50%)}.van-step--horizontal .van-step__title{display:inline-block;margin-left:3px;font-size:var(--van-step-horizontal-title-font-size);transform:translate(-50%)}.van-step--horizontal .van-step__line{top:30px;left:0;width:100%;height:1px}.van-step--horizontal .van-step__icon{display:block;font-size:var(--van-step-icon-size)}.van-step--horizontal .van-step--process{color:var(--van-step-process-text-color)}.van-step--vertical{display:block;float:none;padding:10px 10px 10px 0;line-height:var(--van-line-height-sm)}.van-step--vertical:not(:last-child):after{border-bottom-width:1px}.van-step--vertical .van-step__circle-container{position:absolute;top:19px;left:-15px;z-index:1;font-size:var(--van-step-icon-size);line-height:1;transform:translate(-50%,-50%)}.van-step--vertical .van-step__line{top:16px;left:-15px;width:1px;height:100%}.van-step:last-child .van-step__line{width:0}.van-step--finish{color:var(--van-step-finish-text-color)}.van-step--finish .van-step__circle,.van-step--finish .van-step__line{background-color:var(--van-step-finish-line-color)}.van-step__icon,.van-step__title{transition:color var(--van-duration-base)}.van-step__icon--active,.van-step__title--active,.van-step__icon--finish,.van-step__title--finish{color:var(--van-step-active-color)}

package/lib/submit-bar/index.css

@@ -1 +1 @@
-:root{--van-submit-bar-height: 50px;--van-submit-bar-z-index: 100;--van-submit-bar-background: var(--van-background-2);--van-submit-bar-button-width: 110px;--van-submit-bar-price-color: var(--van-danger-color);--van-submit-bar-price-font-size: var(--van-font-size-sm);--van-submit-bar-price-integer-font-size: 20px;--van-submit-bar-price-font: var(--van-price-font);--van-submit-bar-currency-font-size: var(--van-font-size-md);--van-submit-bar-text-color: var(--van-text-color);--van-submit-bar-text-font-size: var(--van-font-size-md);--van-submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size: var(--van-font-size-sm);--van-submit-bar-tip-line-height: 1.5;--van-submit-bar-tip-color: var(--van-orange-dark);--van-submit-bar-tip-background: var(--van-orange-light);--van-submit-bar-tip-icon-size: 12px;--van-submit-bar-button-height: 40px;--van-submit-bar-padding: 0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background:var(--van-submit-bar-background);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background:var(--van-submit-bar-tip-background)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-bold);font-size:var(--van-submit-bar-price-font-size);margin-left:var(--van-padding-base)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}
+:root{--van-submit-bar-height: 50px;--van-submit-bar-z-index: 100;--van-submit-bar-background: var(--van-background-2);--van-submit-bar-button-width: 110px;--van-submit-bar-price-color: var(--van-danger-color);--van-submit-bar-price-font-size: var(--van-font-size-sm);--van-submit-bar-price-integer-font-size: 20px;--van-submit-bar-price-font: var(--van-price-font);--van-submit-bar-text-color: var(--van-text-color);--van-submit-bar-text-font-size: var(--van-font-size-md);--van-submit-bar-tip-padding: var(--van-padding-xs) var(--van-padding-sm);--van-submit-bar-tip-font-size: var(--van-font-size-sm);--van-submit-bar-tip-line-height: 1.5;--van-submit-bar-tip-color: var(--van-orange-dark);--van-submit-bar-tip-background: var(--van-orange-light);--van-submit-bar-tip-icon-size: 12px;--van-submit-bar-button-height: 40px;--van-submit-bar-padding: 0 var(--van-padding-md)}.van-submit-bar{position:fixed;bottom:0;left:0;z-index:var(--van-submit-bar-z-index);width:100%;background:var(--van-submit-bar-background);-webkit-user-select:none;user-select:none}.van-submit-bar__tip{padding:var(--van-submit-bar-tip-padding);color:var(--van-submit-bar-tip-color);font-size:var(--van-submit-bar-tip-font-size);line-height:var(--van-submit-bar-tip-line-height);background:var(--van-submit-bar-tip-background)}.van-submit-bar__tip-icon{margin-right:var(--van-padding-base);font-size:var(--van-submit-bar-tip-icon-size);vertical-align:middle}.van-submit-bar__tip-text{vertical-align:middle}.van-submit-bar__bar{display:flex;align-items:center;justify-content:flex-end;height:var(--van-submit-bar-height);padding:var(--van-submit-bar-padding);font-size:var(--van-submit-bar-text-font-size)}.van-submit-bar__text{flex:1;padding-right:var(--van-padding-sm);color:var(--van-submit-bar-text-color);text-align:right}.van-submit-bar__text span{display:inline-block}.van-submit-bar__suffix-label{margin-left:var(--van-padding-base);font-weight:var(--van-font-bold)}.van-submit-bar__price{color:var(--van-submit-bar-price-color);font-weight:var(--van-font-bold);font-size:var(--van-submit-bar-price-font-size);margin-left:var(--van-padding-base)}.van-submit-bar__price-integer{font-size:var(--van-submit-bar-price-integer-font-size);font-family:var(--van-submit-bar-price-font)}.van-submit-bar__button{width:var(--van-submit-bar-button-width);height:var(--van-submit-bar-button-height);font-weight:var(--van-font-bold);border:none}.van-submit-bar__button--danger{background:var(--van-gradient-red)}

package/lib/tabs/Tabs.js

@@ -80,6 +80,8 @@ var stdin_default = (0, import_vue2.defineComponent)({
     let tabHeight;
     let lockScroll;
     let stickyFixed;
+    let cancelScrollLeftToRaf;
+    let cancelScrollTopToRaf;
     const root = (0, import_vue2.ref)();
     const navRef = (0, import_vue2.ref)();
     const wrapRef = (0, import_vue2.ref)();
@@ -127,7 +129,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
       }
       const title = titles[state.currentIndex].$el;
       const to = title.offsetLeft - (nav.offsetWidth - title.offsetWidth) / 2;
-      (0, import_utils2.scrollLeftTo)(nav, to, immediate ? 0 : +props.duration);
+      if (cancelScrollLeftToRaf)
+        cancelScrollLeftToRaf();
+      cancelScrollLeftToRaf = (0, import_utils2.scrollLeftTo)(nav, to, immediate ? 0 : +props.duration);
     };
     const setLine = () => {
       const shouldAnimate = state.inited;
@@ -203,7 +207,9 @@ var stdin_default = (0, import_vue2.defineComponent)({
         if (target && scroller.value) {
           const to = (0, import_utils.getElementTop)(target, scroller.value) - scrollOffset.value;
           lockScroll = true;
-          (0, import_utils2.scrollTopTo)(scroller.value, to, immediate ? 0 : +props.duration, () => {
+          if (cancelScrollTopToRaf)
+            cancelScrollTopToRaf();
+          cancelScrollTopToRaf = (0, import_utils2.scrollTopTo)(scroller.value, to, immediate ? 0 : +props.duration, () => {
             lockScroll = false;
           });
         }

package/lib/tabs/utils.d.ts

@@ -1,3 +1,3 @@
 import { ScrollElement } from '../utils';
-export declare function scrollLeftTo(scroller: HTMLElement, to: number, duration: number): void;
-export declare function scrollTopTo(scroller: ScrollElement, to: number, duration: number, callback: () => void): void;
+export declare function scrollLeftTo(scroller: HTMLElement, to: number, duration: number): () => void;
+export declare function scrollTopTo(scroller: ScrollElement, to: number, duration: number, callback: () => void): () => void;

package/lib/tabs/utils.js

@@ -24,22 +24,31 @@ module.exports = __toCommonJS(stdin_exports);
 var import_use = require("@vant/use");
 var import_utils = require("../utils");
 function scrollLeftTo(scroller, to, duration) {
+  let rafId;
   let count = 0;
   const from = scroller.scrollLeft;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
+  function cancel() {
+    (0, import_use.cancelRaf)(rafId);
+  }
   function animate() {
     scroller.scrollLeft += (to - from) / frames;
     if (++count < frames) {
-      (0, import_use.raf)(animate);
+      rafId = (0, import_use.raf)(animate);
     }
   }
   animate();
+  return cancel;
 }
 function scrollTopTo(scroller, to, duration, callback) {
+  let rafId;
   let current = (0, import_utils.getScrollTop)(scroller);
   const isDown = current < to;
   const frames = duration === 0 ? 1 : Math.round(duration * 1e3 / 16);
   const step = (to - current) / frames;
+  function cancel() {
+    (0, import_use.cancelRaf)(rafId);
+  }
   function animate() {
     current += step;
     if (isDown && current > to || !isDown && current < to) {
@@ -47,10 +56,11 @@ function scrollTopTo(scroller, to, duration, callback) {
     }
     (0, import_utils.setScrollTop)(scroller, current);
     if (isDown && current < to || !isDown && current > to) {
-      (0, import_use.raf)(animate);
+      rafId = (0, import_use.raf)(animate);
     } else if (callback) {
-      (0, import_use.raf)(callback);
+      rafId = (0, import_use.raf)(callback);
     }
   }
   animate();
+  return cancel;
 }

package/lib/uploader/Uploader.d.ts

@@ -38,6 +38,7 @@ export declare const uploaderProps: {
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -100,6 +101,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -125,7 +127,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<UploaderMaxSize>;
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload")[], "update:modelValue" | "delete" | "oversize" | "clickUpload" | "closePreview" | "clickPreview" | "clickReupload", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     name: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -160,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: true;
     };
+    reupload: BooleanConstructor;
     afterRead: PropType<UploaderAfterRead>;
     showUpload: {
         type: BooleanConstructor;
@@ -192,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickUpload?: ((...args: any[]) => any) | undefined;
     onClosePreview?: ((...args: any[]) => any) | undefined;
     onClickPreview?: ((...args: any[]) => any) | undefined;
+    onClickReupload?: ((...args: any[]) => any) | undefined;
 }, {
     name: string | number;
     accept: string;
@@ -205,6 +209,7 @@ declare const _default: import("vue").DefineComponent<{
     resultType: UploaderResultType;
     uploadIcon: string;
     deletable: boolean;
+    reupload: boolean;
     showUpload: boolean;
     previewImage: boolean;
     previewFullImage: boolean;

package/lib/uploader/Uploader.js

@@ -54,6 +54,7 @@ const uploaderProps = {
   uploadIcon: (0, import_utils.makeStringProp)("photograph"),
   uploadText: String,
   deletable: import_utils.truthProp,
+  reupload: Boolean,
   afterRead: Function,
   showUpload: import_utils.truthProp,
   modelValue: (0, import_utils.makeArrayProp)(),
@@ -71,13 +72,14 @@ const uploaderProps = {
 var stdin_default = (0, import_vue2.defineComponent)({
   name: import_utils2.name,
   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 = (0, import_vue2.ref)();
     const urls = [];
+    const reuploadIndex = (0, import_vue2.ref)(-1);
     const getDetail = (index = props.modelValue.length) => ({
       name: props.name,
       index
@@ -103,7 +105,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
         }
       }
       items = (0, import_vue2.reactive)(items);
-      emit("update:modelValue", [...props.modelValue, ...(0, import_utils.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, ...(0, import_utils.toArray)(items)]);
+      }
       if (props.afterRead) {
         props.afterRead(items, getDetail());
       }
@@ -204,15 +213,20 @@ var stdin_default = (0, import_vue2.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 = (0, import_utils.extend)((0, import_utils.pick)(props, needPickData), (0, import_utils.pick)(item, needPickData, true));
       return (0, import_vue.createVNode)(import_UploaderPreviewItem.default, (0, import_vue.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)
       }, (0, import_utils.pick)(props, ["name", "lazyLoad"]), previewData), (0, import_utils.pick)(slots, ["preview-cover", "preview-delete"]));
     };
     const renderPreviewList = () => {
@@ -222,24 +236,25 @@ var stdin_default = (0, import_vue2.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 : (0, import_vue.createVNode)("input", {
         "ref": inputRef,
         "type": "file",
         "class": (0, import_utils2.bem)("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 (0, import_vue.createVNode)("div", {
+        return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
           "class": (0, import_utils2.bem)("input-wrapper"),
           "onClick": onClickUpload
-        }, [slots.default(), Input]);
+        }, [slots.default(), Input]), [[import_vue.vShow, !hideUploader]]);
       }
       return (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
         "class": (0, import_utils2.bem)("upload", {
@@ -252,7 +267,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         "class": (0, import_utils2.bem)("upload-icon")
       }, null), props.uploadText && (0, import_vue.createVNode)("span", {
         "class": (0, import_utils2.bem)("upload-text")
-      }, [props.uploadText]), Input]), [[import_vue.vShow, props.showUpload]]);
+      }, [props.uploadText]), Input]), [[import_vue.vShow, props.showUpload && !hideUploader]]);
     };
     const chooseFile = () => {
       if (inputRef.value && !props.disabled) {

package/lib/uploader/UploaderPreviewItem.d.ts

@@ -12,9 +12,10 @@ declare const _default: import("vue").DefineComponent<{
     imageFit: PropType<ImageFit>;
     lazyLoad: BooleanConstructor;
     deletable: BooleanConstructor;
+    reupload: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "reupload" | "preview")[], "delete" | "reupload" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: (NumberConstructor | StringConstructor)[];
     item: {
         type: PropType<UploaderFileListItem>;
@@ -24,13 +25,16 @@ declare const _default: import("vue").DefineComponent<{
     imageFit: PropType<ImageFit>;
     lazyLoad: BooleanConstructor;
     deletable: BooleanConstructor;
+    reupload: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
+    onReupload?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
 }, {
     lazyLoad: boolean;
     deletable: boolean;
+    reupload: boolean;
 }>;
 export default _default;