Merge branch 'dev' into next

docs/markdown/design.zh-CN.md

@@ -6,14 +6,22 @@
 
 ### 组件设计稿（Sketch）
 
-包含 Sketch 格式的组件设计规范、色彩规范。
+包含 Sketch 格式的色彩规范、字体规范、组件设计规范。
 
-<img src="https://img.yzcdn.cn/vant/design-components-0321.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+#### 色彩规范
+
+<img src="https://img.yzcdn.cn/vant/color_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### 字体规范
+
+<img src="https://img.yzcdn.cn/vant/words_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
+
+#### 组件规范
+
+<img src="https://img.yzcdn.cn/vant/tab_202009101415.png" style="width: 80%; box-shadow: 0 1px 2px rgba(0,0,0,.2)">
 
 <a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>
 
-> 提示：目前 Sketch 中部分组件仍为旧版样式，我们正在梳理新版设计规范，尽请期待！
-
 ### 图标设计稿（Sketch）
 
 包含 Sketch 格式的图标库资源。

src/image-preview/ImagePreview.js

@@ -1,5 +1,4 @@
 // Utils
-import { inBrowser } from '../utils';
 import { bem, createComponent } from './shared';
 import { callInterceptor } from '../utils/interceptor';
 
@@ -79,13 +78,13 @@ export default createComponent({
   data() {
     return {
       active: 0,
-      windowWidth: 0,
+      rootWidth: 0,
-      windowHeight: 0,
+      rootHeight: 0,
       doubleClickTimer: null,
     };
   },
 
-  created() {
+  mounted() {
     this.resize();
   },
 
@@ -96,6 +95,7 @@ export default createComponent({
       if (val) {
         this.setActive(+this.startPosition);
         this.$nextTick(() => {
+          this.resize();
           this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true });
         });
       } else {
@@ -109,9 +109,10 @@ export default createComponent({
 
   methods: {
     resize() {
-      if (inBrowser) {
+      if (this.$el && this.$el.getBoundingClientRect) {
-        this.windowWidth = window.innerWidth;
+        const rect = this.$el.getBoundingClientRect();
-        this.windowHeight = window.innerHeight;
+        this.rootWidth = rect.width;
+        this.rootHeight = rect.height;
       }
     },
 
@@ -174,8 +175,8 @@ export default createComponent({
               active={this.active}
               maxZoom={this.maxZoom}
               minZoom={this.minZoom}
-              windowWidth={this.windowWidth}
+              rootWidth={this.rootWidth}
-              windowHeight={this.windowHeight}
+              rootHeight={this.rootHeight}
               onScale={this.emitScale}
               onClose={this.emitClose}
             />

src/image-preview/ImagePreviewItem.js

@@ -27,8 +27,8 @@ export default {
     active: Number,
     minZoom: [Number, String],
     maxZoom: [Number, String],
-    windowWidth: Number,
+    rootWidth: Number,
-    windowHeight: Number,
+    rootHeight: Number,
   },
 
   emits: ['scale', 'close'],
@@ -48,9 +48,9 @@ export default {
 
   computed: {
     vertical() {
-      const { windowWidth, windowHeight } = this;
+      const { rootWidth, rootHeight } = this;
-      const windowRatio = windowHeight / windowWidth;
+      const rootRatio = rootHeight / rootWidth;
-      return this.imageRatio > windowRatio;
+      return this.imageRatio > rootRatio;
     },
 
     imageStyle() {
@@ -71,10 +71,10 @@ export default {
     maxMoveX() {
       if (this.imageRatio) {
         const displayWidth = this.vertical
-          ? this.windowHeight / this.imageRatio
+          ? this.rootHeight / this.imageRatio
-          : this.windowWidth;
+          : this.rootWidth;
 
-        return Math.max(0, (this.scale * displayWidth - this.windowWidth) / 2);
+        return Math.max(0, (this.scale * displayWidth - this.rootWidth) / 2);
       }
 
       return 0;
@@ -83,13 +83,10 @@ export default {
     maxMoveY() {
       if (this.imageRatio) {
         const displayHeight = this.vertical
-          ? this.windowHeight
+          ? this.rootHeight
-          : this.windowWidth * this.imageRatio;
+          : this.rootWidth * this.imageRatio;
 
-        return Math.max(
+        return Math.max(0, (this.scale * displayHeight - this.rootHeight) / 2);
-          0,
-          (this.scale * displayHeight - this.windowHeight) / 2
-        );
       }
 
       return 0;

src/image-preview/test/index.spec.js

@@ -219,12 +219,7 @@ test('register component', () => {
 });
 
 test('zoom in and drag image to move', async () => {
-  const restore = mockGetBoundingClientRect({ width: 100 });
+  const restore = mockGetBoundingClientRect({ width: 100, height: 100 });
-  const originWindowWidth = window.innerWidth;
-  const originWindowHeight = window.innerHeight;
-
-  window.innerWidth = 100;
-  window.innerHeight = 100;
 
   const wrapper = mount(ImagePreviewVue, {
     propsData: { images, value: true },
@@ -248,8 +243,6 @@ test('zoom in and drag image to move', async () => {
   triggerDrag(image, 300, 300);
   expect(wrapper.find('.van-image')).toMatchSnapshot();
 
-  window.innerWidth = originWindowWidth;
-  window.innerHeight = originWindowHeight;
   restore();
 });
 

src/tabs/index.js

@@ -4,6 +4,7 @@ import { scrollLeftTo, scrollTopTo } from './utils';
 import { route } from '../composition/use-route';
 import { isHidden } from '../utils/dom/style';
 import { on, off } from '../utils/dom/event';
+import { unitToPx } from '../utils/format/unit';
 import { BORDER_TOP_BOTTOM } from '../utils/constant';
 import { callInterceptor } from '../utils/interceptor';
 import {
@@ -119,9 +120,13 @@ export default createComponent({
       }
     },
 
+    offsetTopPx() {
+      return unitToPx(this.offsetTop);
+    },
+
     scrollOffset() {
       if (this.sticky) {
-        return +this.offsetTop + this.tabHeight;
+        return this.offsetTopPx + this.tabHeight;
       }
       return 0;
     },
@@ -151,7 +156,7 @@ export default createComponent({
 
       // scroll to correct position
       if (this.stickyFixed && !this.scrollspy) {
-        setRootScrollTop(Math.ceil(getElementTop(this.$el) - this.offsetTop));
+        setRootScrollTop(Math.ceil(getElementTop(this.$el) - this.offsetTopPx));
       }
     },
 

yarn.lock

@@ -4375,7 +4375,7 @@ debug@4, debug@4.1.1, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -5150,9 +5150,9 @@ etag@~1.8.1:
   integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
 eventemitter3@^4.0.0:
-  version "4.0.0"
+  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
 events@^3.0.0:
   version "3.1.0"
@@ -5598,11 +5598,9 @@ flush-write-stream@^1.0.0:
     readable-stream "^2.3.6"
 
 follow-redirects@^1.0.0:
-  version "1.10.0"
+  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
-  integrity sha512-4eyLK6s6lH32nOvLLwlIOnr9zrL8Sm+OvW4pVTJNoXeGzYIkHVf+pADQi+OJ0E67hiuSLezPVPyBcIZO50TmmQ==
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
-  dependencies:
-    debug "^3.0.0"
 
 for-in@^1.0.2:
   version "1.0.2"
@@ -6317,9 +6315,9 @@ http-proxy-middleware@0.19.1:
     micromatch "^3.1.10"
 
 http-proxy@^1.17.0:
-  version "1.18.0"
+  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
-  integrity sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
     eventemitter3 "^4.0.0"
     follow-redirects "^1.0.0"