vant 4.3.2 → 4.4.0

package/lib/date-picker/DatePicker.js

@@ -53,6 +53,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
     slots
   }) {
     const currentValues = (0, import_vue2.ref)(props.modelValue);
+    const updatedByExternalSources = (0, import_vue2.ref)(false);
     const genYearOptions = () => {
       const minYear = props.minDate.getFullYear();
       const maxYear = props.maxDate.getFullYear();
@@ -68,7 +69,7 @@ var stdin_default = (0, import_vue2.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;
       }
@@ -114,11 +115,13 @@ var stdin_default = (0, import_vue2.defineComponent)({
         emit("update:modelValue", newValues);
       }
     });
-    (0, import_vue2.watch)(() => props.modelValue, (newValues) => {
+    (0, import_vue2.watch)(() => props.modelValue, (newValues, oldValues) => {
+      updatedByExternalSources.value = (0, import_utils.isSameValue)(oldValues, currentValues.value);
       newValues = (0, import_utils2.formatValueRange)(newValues, columns.value);
       if (!(0, import_utils.isSameValue)(newValues, currentValues.value)) {
         currentValues.value = newValues;
       }
+      updatedByExternalSources.value = false;
     }, {
       immediate: true
     });

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

@@ -28,6 +28,7 @@ const [name, bem] = (0, import_utils.createNamespace)("divider");
 const dividerProps = {
   dashed: Boolean,
   hairline: import_utils.truthProp,
+  vertical: Boolean,
   contentPosition: (0, import_utils.makeStringProp)("center")
 };
 var stdin_default = (0, import_vue2.defineComponent)({
@@ -43,9 +44,10 @@ var stdin_default = (0, import_vue2.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/lib/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/lib/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/lib/image-preview/ImagePreviewItem.js

@@ -34,6 +34,7 @@ const getCenter = (touches) => ({
   y: (touches[0].clientY + touches[1].clientY) / 2
 });
 const bem = (0, import_utils.createNamespace)("image-preview")[1];
+const longImageRatio = 2.6;
 var stdin_default = (0, import_vue2.defineComponent)({
   props: {
     src: String,
@@ -56,21 +57,14 @@ var stdin_default = (0, import_vue2.defineComponent)({
       moveY: 0,
       moving: false,
       zooming: false,
-      imageRatio: 0,
-      displayWidth: 0,
-      displayHeight: 0
+      imageRatio: 0
     });
     const touch = (0, import_use_touch.useTouch)();
     const imageRef = (0, import_vue2.ref)();
     const swipeItem = (0, import_vue2.ref)();
-    const vertical = (0, import_vue2.computed)(() => {
-      const {
-        rootWidth,
-        rootHeight
-      } = props;
-      const rootRatio = rootHeight / rootWidth;
-      return state.imageRatio > rootRatio;
-    });
+    const vertical = (0, import_vue2.ref)(false);
+    const isLongImage = (0, import_vue2.ref)(false);
+    let initialMoveY = 0;
     const imageStyle = (0, import_vue2.computed)(() => {
       const {
         scale,
@@ -82,7 +76,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
       const style = {
         transitionDuration: zooming || moving ? "0s" : ".3s"
       };
-      if (scale !== 1) {
+      if (scale !== 1 || isLongImage.value) {
         style.transform = `matrix(${scale}, 0, 0, ${scale}, ${moveX}, ${moveY})`;
       }
       return style;
@@ -127,7 +121,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
           state.moveY = (0, import_utils.clamp)(moveY, -maxMoveY.value, maxMoveY.value);
         } else {
           state.moveX = 0;
-          state.moveY = 0;
+          state.moveY = isLongImage.value ? initialMoveY : 0;
         }
         emit("scale", {
           scale,
@@ -140,7 +134,7 @@ var stdin_default = (0, import_vue2.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);
@@ -170,7 +164,7 @@ var stdin_default = (0, import_vue2.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;
@@ -266,12 +260,30 @@ var stdin_default = (0, import_vue2.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();
     };
     (0, import_vue2.watch)(() => props.active, resetScale);
     (0, import_vue2.watch)(() => props.show, (value) => {
@@ -279,6 +291,7 @@ var stdin_default = (0, import_vue2.defineComponent)({
         resetScale();
       }
     });
+    (0, import_vue2.watch)(() => [props.rootWidth, props.rootHeight], resize);
     (0, import_use.useEventListener)("touchmove", onTouchMove, {
       target: (0, import_vue2.computed)(() => {
         var _a;