Merge branch '2.x' into dev

src/area/README.md

@@ -66,7 +66,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop
 | columns-placeholder | Placeholder of columns | _string[]_ | `[]` |
 | loading | Whether to show loading prompt | _boolean_ | `false` |
 | readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
 | columns-num | Level of picker | _number \| string_ | `3` |
 | visible-item-count | Count of visible columns | _number \| string_ | `6` |
 | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |

src/area/README.zh-CN.md

@@ -66,7 +66,7 @@ app.use(Area);
 | columns-placeholder | 列占位提示文字 | _string[]_ | `[]` |
 | loading | 是否显示加载状态 | _boolean_ | `false` |
 | readonly `v2.10.5` | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` |
 | visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
 | swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |

src/datetime-picker/README.md

@@ -261,7 +261,7 @@ export default {
 | filter | Option filter | _(type, vals) => vals_ | - |
 | formatter | Option text formatter | _(type, val) => val_ | - |
 | columns-order `v2.9.2` | Array for ordering columns, where item can be set to<br> `year`, `month`, `day`, `hour` and `minute` | _string[]_ | - |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
 | visible-item-count | Count of visible columns | _number \| string_ | `6` |
 | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
 

src/datetime-picker/README.zh-CN.md

@@ -270,7 +270,7 @@ export default {
 | filter | 选项过滤函数 | _(type, vals) => vals_ | - |
 | formatter | 选项格式化函数 | _(type, val) => val_ | - |
 | columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为<br> `year`、`month`、`day`、`hour`、`minute` | _string[]_ | - |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
 | swipe-duration | 快速滑动时惯性滚动的时长，单位`ms` | _number \| string_ | `1000` |
 

src/picker/README.md

@@ -251,7 +251,7 @@ export default {
 | show-toolbar | Whether to show toolbar | _boolean_ | `true` |
 | allow-html | Whether to allow HTML in option text | _boolean_ | `false` |
 | default-index | Default value index of single column picker | _number \| string_ | `0` |
-| item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | Option height, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `44` |
 | visible-item-count | Count of visible columns | _number \| string_ | `6` |
 | swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
 

src/picker/README.zh-CN.md

@@ -274,7 +274,7 @@ export default {
 | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
 | allow-html | 是否允许选项内容中渲染 HTML | _boolean_ | `false` |
 | default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
-| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
+| item-height `v2.8.6` | 选项高度，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
 | swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
 

src/picker/index.js

@@ -66,7 +66,15 @@ export default createComponent({
       let cursor = { children: props.columns };
 
       while (cursor && cursor.children) {
-        const defaultIndex = cursor.defaultIndex ?? +props.defaultIndex;
+        const { children } = cursor;
+        let defaultIndex = cursor.defaultIndex ?? +this.defaultIndex;
+
+        while (
+          children[defaultIndex].disabled &&
+          defaultIndex < children.length - 1
+        ) {
+          defaultIndex++;
+        }
 
         formatted.push({
           values: cursor.children,
@@ -74,7 +82,7 @@ export default createComponent({
           defaultIndex,
         });
 
-        cursor = cursor.children[defaultIndex];
+        cursor = children[defaultIndex];
       }
 
       formattedColumns.value = formatted;

src/picker/test/__snapshots__/cascade.legacy.js.snap

@@ -5,3 +5,34 @@ exports[`disabled in cascade 1`] = `
   <div class="van-ellipsis">A2</div>
 </li>
 `;
+
+exports[`should move to next option when default option is disabled 1`] = `
+<div class="van-picker">
+  <!---->
+  <div class="van-picker__columns" style="height: 264px;">
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 66px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
+          <div class="van-ellipsis">A1</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">A2</div>
+        </li>
+      </ul>
+    </div>
+    <div class="van-picker-column">
+      <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 110px, 0); transition-duration: 0ms; transition-property: none;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+          <div class="van-ellipsis">B3</div>
+        </li>
+        <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+          <div class="van-ellipsis">B4</div>
+        </li>
+      </ul>
+    </div>
+    <div class="van-picker__mask" style="background-size: 100% 110px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+  <!---->
+</div>
+`;

src/picker/test/cascade.legacy.js

@@ -125,3 +125,23 @@ test('disabled in cascade', () => {
 
   expect(wrapper.find('.van-picker-column__item--disabled')).toMatchSnapshot();
 });
+
+test('should move to next option when default option is disabled', () => {
+  const wrapper = mount(Picker, {
+    propsData: {
+      columns: [
+        {
+          text: 'A1',
+          disabled: true,
+          children: [{ text: 'B1' }, { text: 'B2' }],
+        },
+        {
+          text: 'A2',
+          children: [{ text: 'B3' }, { text: 'B4' }],
+        },
+      ],
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/sticky/README.md

@@ -57,7 +57,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| offset-top `v2.8.7` | Offset top, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | Offset top, supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
 | z-index | z-index when sticky | _number \| string_ | `99` |
 | container | Container DOM | _Element_ | - |
 

src/sticky/README.zh-CN.md

@@ -67,7 +67,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | 吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
 | z-index | 吸顶时的 z-index | _number \| string_ | `99` |
 | container | 容器对应的 HTML 节点 | _Element_ | - |
 

src/style/var.less

@@ -731,7 +731,6 @@
 @switch-width: 2em;
 @switch-height: 1em;
 @switch-node-size: 1em;
-@switch-node-z-index: 1;
 @switch-node-background-color: @white;
 @switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
   0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);

src/switch/index.less

@@ -17,7 +17,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: @switch-node-z-index;
     width: @switch-node-size;
     height: @switch-node-size;
     background-color: @switch-node-background-color;

src/tab/README.md

@@ -234,7 +234,7 @@ export default {
 | swipeable | Whether to switch tabs with swipe gestrue in the content | _boolean_ | `false` |
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy `v2.3.0` | Whether to use scrollspy mode | _boolean_ | `false` |
-| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
 | swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | - |
 | title-active-color | Title active color | _string_ | - |
 | title-inactive-color | Title inactive color | _string_ | - |

src/tab/README.zh-CN.md

@@ -241,7 +241,7 @@ export default {
 | swipeable | 是否开启手势滑动切换 | _boolean_ | `false` |
 | lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
 | scrollspy `v2.3.0` | 是否开启滚动导航 | _boolean_ | `false` |
-| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offset-top `v2.8.7` | 粘性定位布局下与顶部的最小距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
 | swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number \| string_ | `5` |
 | title-active-color | 标题选中态颜色 | _string_ | - |
 | title-inactive-color | 标题默认态颜色 | _string_ | - |

src/toast/test/index.legacy.js

@@ -150,7 +150,7 @@ test('toast duration 0', () => {
   Toast.allowMultiple(false);
 });
 
-test('onClose callback', () => {
+test('should trigger onClose callback after closed', () => {
   Toast.allowMultiple();
   const onClose = jest.fn();
   const toast = Toast({
@@ -158,6 +158,10 @@ test('onClose callback', () => {
     onClose,
   });
 
+  toast.clear();
+  expect(onClose).toHaveBeenCalledTimes(1);
+
+  // onClose should only be called once
   toast.clear();
   expect(onClose).toHaveBeenCalledTimes(1);
   Toast.allowMultiple(false);

src/utils/format/unit.ts

@@ -44,6 +44,11 @@ function convertVw(value: string) {
   return (+value * window.innerWidth) / 100;
 }
 
+function convertVh(value: string) {
+  value = value.replace(/vh/g, '');
+  return (+value * window.innerHeight) / 100;
+}
+
 export function unitToPx(value: string | number): number {
   if (typeof value === 'number') {
     return value;
@@ -53,10 +58,12 @@ export function unitToPx(value: string | number): number {
     if (value.indexOf('rem') !== -1) {
       return convertRem(value);
     }
-
     if (value.indexOf('vw') !== -1) {
       return convertVw(value);
     }
+    if (value.indexOf('vh') !== -1) {
+      return convertVh(value);
+    }
   }
 
   return parseFloat(value);

src/utils/test/index.legacy.js

@@ -132,6 +132,8 @@ test('addUnit', () => {
 test('unitToPx', () => {
   const originGetComputedStyle = window.getComputedStyle;
 
+  window.innerWidth = 100;
+  window.innerHeight = 200;
   window.getComputedStyle = () => ({ fontSize: '16px' });
 
   expect(unitToPx(0)).toEqual(0);
@@ -139,6 +141,8 @@ test('unitToPx', () => {
   expect(unitToPx('10px')).toEqual(10);
   expect(unitToPx('0rem')).toEqual(0);
   expect(unitToPx('10rem')).toEqual(160);
+  expect(unitToPx('10vw')).toEqual(10);
+  expect(unitToPx('10vh')).toEqual(20);
 
   window.getComputedStyle = originGetComputedStyle;
 });