Merge branch 'dev' into next

README.zh-CN.md

@@ -24,10 +24,16 @@
 
 ---
 
+### 介绍
+
+Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
+
+目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。
+
 ## 特性
 
-- 60+ 高质量组件
+- 60+ 高质量组件，覆盖移动端各类场景
-- 90% 单元测试覆盖率
+- 90%+ 单元测试覆盖率，提供稳定性保障
 - 完善的中英文文档和示例
 - 支持按需引入
 - 支持主题定制
@@ -72,7 +78,7 @@ vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手
 
 ## 加入我们
 
-**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。
+**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。
 
 我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：
 

docs/markdown/home.zh-CN.md

@@ -6,15 +6,21 @@
   </div>
 </div>
 
+### 介绍
+
+Vant 是**有赞前端团队**开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。 <br><br>
+
+目前 Vant 官方提供了 [Vue 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://github.com/mxdi9i7/vant-react)。
+
 ### 特性
 
-- 60+ 高质量组件
+- 60+ 高质量组件，覆盖移动端各类场景
-- 90% 单元测试覆盖率
+- 90%+ 单元测试覆盖率，提供稳定性保障
 - 完善的中英文文档和示例
 - 支持按需引入
 - 支持主题定制
 - 支持国际化
-- 支持 TS
+- 支持 TypeScript
 - 支持 SSR
 
 ### 快速上手
@@ -33,7 +39,7 @@
 
 ### 加入我们
 
-**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。
+**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、有赞云、赋能平台、增长中心等业务线。
 
 我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：
 

src/calendar/components/Month.js

@@ -254,7 +254,6 @@ export default createComponent({
       () => props.realRowHeight,
       () => {
         height.value = useRect(monthRef).height;
-        console.log('height.value', height.value);
       }
     );
 

src/calendar/index.js

@@ -1,5 +1,6 @@
 // Utils
 import { pick } from '../utils';
+import { raf } from '../utils/dom/raf';
 import { isDate } from '../utils/validate/date';
 import { getScrollTop } from '../utils/dom/scroll';
 import {
@@ -191,13 +192,13 @@ export default createComponent({
           this.$refs.body.getBoundingClientRect().height
         );
         this.onScroll();
+        this.scrollIntoView();
       });
-      this.scrollIntoView();
     },
 
     // scroll to current month
     scrollIntoView() {
-      this.$nextTick(() => {
+      raf(() => {
         const { currentDate } = this;
 
         if (!currentDate) {
@@ -258,31 +259,27 @@ export default createComponent({
       const { body } = this.$refs;
       const { months, monthRefs } = this;
       const top = getScrollTop(body);
+      const bottom = top + this.bodyHeight;
+
       const heights = months.map(
         (item, index) => monthRefs[index].height.value
       );
       const heightSum = heights.reduce((a, b) => a + b, 0);
 
       // iOS scroll bounce may exceed the range
-      let bottom = top + this.bodyHeight;
       if (bottom > heightSum && top > 0) {
-        bottom = heightSum;
+        return;
       }
 
       let height = 0;
       let currentMonth;
-
+      let visibleIndex;
-      // add offset to avoid rem accuracy issues
-      // see: https://github.com/youzan/vant/issues/6929
-      const viewportOffset = 50;
-      const viewportTop = top - viewportOffset;
-      const viewportBottom = bottom + viewportOffset;
 
       for (let i = 0; i < months.length; i++) {
-        const visible =
+        const visible = height <= bottom && height + heights[i] >= top;
-          height <= viewportBottom && height + heights[i] >= viewportTop;
 
         if (visible && !currentMonth) {
+          visibleIndex = i;
           currentMonth = monthRefs[i];
         }
 
@@ -293,10 +290,14 @@ export default createComponent({
           });
         }
 
-        monthRefs[i].setVisible(visible);
         height += heights[i];
       }
 
+      months.forEach((month, index) => {
+        const visible = index >= visibleIndex - 1 && index <= visibleIndex + 1;
+        monthRefs[index].setVisible(visible);
+      });
+
       /* istanbul ignore else */
       if (currentMonth) {
         this.subtitle = currentMonth.getTitle();

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -139,40 +139,7 @@ exports[`renders demo correctly 1`] = `
         </div>
         <div class="van-calendar__month" style="padding-bottom: 0px;">
           <div class="van-calendar__month-title">2012年3月</div>
-          <div role="grid" class="van-calendar__days">
+          <div></div>
-            <div class="van-calendar__month-mark">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day" style="margin-left: 57.142857142857146%;">1</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">2</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">3</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">4</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">5</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">6</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">7</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">8</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">9</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">10</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">11</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">12</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">13</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">14</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">15</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">16</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">17</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">18</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">19</div>
-            <div role="gridcell" tabindex="-1" class="van-calendar__day">20</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">21</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">22</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">23</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">24</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">25</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">26</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">27</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">28</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">29</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">30</div>
-            <div role="gridcell" class="van-calendar__day van-calendar__day--disabled">31</div>
-          </div>
         </div>
       </div>
       <div class="van-calendar__footer"></div>

src/cell/README.zh-CN.md

@@ -97,7 +97,7 @@ app.use(CellGroup);
 <van-cell title="单元格" icon="shop-o">
   <!-- 使用 right-icon 插槽来自定义右侧图标 -->
   <template #right-icon>
-    <van-icon name="search" class="search=icon" />
+    <van-icon name="search" class="search-icon" />
   </template>
 </van-cell>
 

src/coupon-cell/index.js

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { isDef, createNamespace } from '../utils';
 import Cell from '../cell';
 
 const [createComponent, bem, t] = createNamespace('coupon-cell');
@@ -8,7 +8,14 @@ function formatValue(props) {
   const coupon = coupons[+chosenCoupon];
 
   if (coupon) {
-    const value = coupon.value || coupon.denominations || 0;
+    let value = 0;
+
+    if (isDef(coupon.value)) {
+      ({ value } = coupon);
+    } else if (isDef(coupon.denominations)) {
+      value = coupon.denominations;
+    }
+
     return `-${currency} ${(value / 100).toFixed(2)}`;
   }
 

src/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -54,6 +54,15 @@ exports[`render coupon cell with coupon 1`] = `
 </div>
 `;
 
+
+exports[`render coupon cell with zero discount 1`] = `
+<div role="button" tabindex="0" class="van-cell van-cell--clickable van-coupon-cell">
+  <div class="van-cell__title"><span>优惠券</span></div>
+  <div class="van-cell__value van-coupon-cell__value van-coupon-cell__value--selected"><span>-¥ 0.00</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
+    <!----></i>
+</div>
+`;
+
 exports[`render coupon list 1`] = `
 <div class="van-coupon-list">
   <div class="van-coupon-list__exchange-bar">

src/coupon-list/test/index.spec.js

@@ -26,6 +26,12 @@ const coupon3 = {
   denominations: 123,
 };
 
+const coupon4 = {
+  ...coupon,
+  startAt: 1600327871,
+  endAt: 1700327871,
+};
+
 const emptyCoupon = {
   id: 0,
   discount: 0,
@@ -162,3 +168,13 @@ test('render coupon cell with coupon', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render coupon cell with zero discount', () => {
+  const wrapper = mount(CouponCell, {
+    propsData: {
+      coupons: [{ ...coupon4, value: 0, denominations: 150 }],
+      chosenCoupon: 0,
+    },
+  });
+  expect(wrapper).toMatchSnapshot();
+});

src/field/index.less

@@ -55,10 +55,10 @@
 
     &:disabled {
       color: @field-input-disabled-text-color;
-      background-color: transparent;
       cursor: not-allowed;
       opacity: 1;
-      -webkit-text-fill-color: currentColor; // fix disabled color in iOS
+      // fix disabled color in mobile safari
+      -webkit-text-fill-color: @field-input-disabled-text-color;
     }
 
     &:read-only {

src/swipe/index.js

@@ -243,8 +243,8 @@ export default createComponent({
       state.rect = rect;
       state.swiping = true;
       state.active = active;
-      state.width = Math.round(+props.width || rect.width);
+      state.width = Math.floor(+props.width || rect.width);
-      state.height = Math.round(+props.height || rect.height);
+      state.height = Math.floor(+props.height || rect.height);
       state.offset = getTargetOffset(active);
       children.forEach((swipe) => {
         swipe.setOffset(0);

src/swipe/index.less

@@ -41,7 +41,8 @@
     background-color: @swipe-indicator-inactive-background-color;
     border-radius: 100%;
     opacity: @swipe-indicator-inactive-opacity;
-    transition: opacity 0.2s;
+    transition: opacity @animation-duration-fast,
+      background-color @animation-duration-fast;
 
     &:not(:last-child) {
       margin-right: @swipe-indicator-size;