Merge branch '2.x' into dev

docs/markdown/changelog.en-US.md

@@ -10,6 +10,28 @@ Vant follows [Semantic Versioning 2.0.0](https://semver.org/lang/zh-CN/).
 - Minor version：released every one to two months, including backwards compatible features.
 - Major version：including breaking changes and new features.
 
+### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
+
+`2020-11-26`
+
+**Feature**
+
+- CheckboxGroup: toggleAll support skipDisabled option [#7644](https://github.com/youzan/vant/issues/7644)
+- DatetimePicker: support picker slots [#7645](https://github.com/youzan/vant/issues/7645)
+- Popover: add trigger prop [#7646](https://github.com/youzan/vant/issues/7646)
+- Popover: improve a11y [#7624](https://github.com/youzan/vant/issues/7624)
+- ShareSheet: support weapp-qrcode icon [#7635](https://github.com/youzan/vant/issues/7635)
+
+**style**
+
+- NavBar: z-index not work when border is hidden [#7612](https://github.com/youzan/vant/issues/7612)
+- Popover: improve cursor [#7623](https://github.com/youzan/vant/issues/7623)
+
+**Bug Fixes**
+
+- Button: icon button vertical align [#7636](https://github.com/youzan/vant/issues/7636)
+- Popover: failed to compile in legacy nuxt.js [f3ad7e](https://github.com/youzan/vant/commit/f3ad7ed1a77cd2f19001489ea64df0d61429ce33)
+
 ### [v2.11.0](https://github.com/youzan/vant/compare/v2.10.14...v2.11.0)
 
 `2020-11-22`

docs/markdown/changelog.zh-CN.md

@@ -10,6 +10,28 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。
 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。
 
+### [v2.11.1](https://github.com/youzan/vant/compare/v2.11.0...v2.11.1)
+
+`2020-11-26`
+
+**Feature**
+
+- CheckboxGroup: toggleAll 方法新增 skipDisabled 选项，用于跳过禁用的复选框 [#7644](https://github.com/youzan/vant/issues/7644)
+- DatetimePicker: 支持 Picker 的所有插槽 [#7645](https://github.com/youzan/vant/issues/7645)
+- Popover: 新增 trigger 属性，用于控制弹出层的触发时机 [#7646](https://github.com/youzan/vant/issues/7646)
+- Popover: 优化无障碍访问 [#7624](https://github.com/youzan/vant/issues/7624)
+- ShareSheet: 新增小程序码图标 [#7635](https://github.com/youzan/vant/issues/7635)
+
+**style**
+
+- NavBar: 修复当 border 为 false 时 z-index 不生效的问题 [#7612](https://github.com/youzan/vant/issues/7612)
+- Popover: 优化 cursor 样式 [#7623](https://github.com/youzan/vant/issues/7623)
+
+**Bug Fixes**
+
+- Button: 修复图标按钮和图标按钮无法垂直对齐的问题 [#7636](https://github.com/youzan/vant/issues/7636)
+- Popover: 修复在 nuxt.js 上编译报错的问题 [f3ad7e](https://github.com/youzan/vant/commit/f3ad7ed1a77cd2f19001489ea64df0d61429ce33)
+
 ### [v2.11.0](https://github.com/youzan/vant/compare/v2.10.14...v2.11.0)
 
 `2020-11-22`

packages/vant-popperjs/README.md

@@ -0,0 +1,17 @@
+# @vant/popperjs
+
+@popperjs/core in commonjs format, added Object.assign polyfill.
+
+## Install
+
+```shell
+yarn add @vant/popperjs
+```
+
+## Usage
+
+see: https://popper.js.org/
+
+## Refer
+
+issue: https://github.com/youzan/vant/issues/7626

src/checkbox-group/index.js

@@ -25,18 +25,25 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { children, linkChildren } = useChildren(CHECKBOX_KEY);
 
-    const toggleAll = (checked) => {
+    const toggleAll = (options = {}) => {
-      if (checked === false) {
+      if (typeof options === 'boolean') {
-        emit('update:modelValue', []);
+        options = { checked: options };
-      } else {
-        const names = children
-          .filter((item) => {
-            const willCheck = checked || !item.checked.value;
-            return item.props.bindGroup && willCheck;
-          })
-          .map((item) => item.name);
-        emit('update:modelValue', names);
       }
+
+      const { checked, skipDisabled } = options;
+
+      const checkedChildren = children.filter((item) => {
+        if (!item.props.bindGroup) {
+          return false;
+        }
+        if (item.props.disabled && skipDisabled) {
+          return item.checked.value;
+        }
+        return checked ?? !item.checked.value;
+      });
+
+      const names = checkedChildren.map((item) => item.name);
+      emit('update:modelValue', names);
     };
 
     watch(

src/checkbox/README.md

@@ -273,7 +273,30 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
 
 | Name | Description | Attribute | Return value |
 | --- | --- | --- | --- |
-| toggleAll | Toggle check status of all checkboxes | _checked?: boolean_ | - |
+| toggleAll | Toggle check status of all checkboxes | _options?: boolean \| object_ | - |
+
+### toggleAll Usage
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// Toggle all
+checkboxGroup.toggleAll();
+// Select all
+checkboxGroup.toggleAll(true);
+// Unselect all
+checkboxGroup.toggleAll(false);
+
+// Toggle all, skip disabled
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// Select all, skip disabled
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox Methods
 

src/checkbox/README.zh-CN.md

@@ -256,7 +256,7 @@ export default {
 | disabled        | 是否禁用复选框            | _boolean_          | `false`   |
 | label-disabled  | 是否禁用复选框文本点击    | _boolean_          | `false`   |
 | label-position  | 文本位置，可选值为 `left` | _string_           | `right`   |
-| icon-size       | 图标大小，默认单位为`px`  | _number \| string_ | `20px`    |
+| icon-size       | 图标大小，默认单位为 `px` | _number \| string_ | `20px`    |
 | checked-color   | 选中状态颜色              | _string_           | `#1989fa` |
 | bind-group      | 是否与复选框组绑定        | _boolean_          | `true`    |
 
@@ -267,8 +267,8 @@ export default {
 | v-model (value) | 所有选中项的标识符 | _any[]_ | - |
 | disabled | 是否禁用所有复选框 | _boolean_ | `false` |
 | max | 最大可选数，`0`为无限制 | _number \| string_ | `0` |
-| direction `v2.5.0` | 排列方向，可选值为`horizontal` | _string_ | `vertical` |
+| direction `v2.5.0` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
-| icon-size | 所有复选框的图标大小，默认单位为`px` | _number \| string_ | `20px` |
+| icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` |
 | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` |
 
 ### Checkbox Events
@@ -297,7 +297,30 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggleAll | 切换所有复选框，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+| toggleAll | 切换所有复选框，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _options?: boolean \| object_ | - |
+
+### toggleAll 方法示例
+
+```js
+const { checkboxGroup } = this.$refs;
+
+// 全部反选
+checkboxGroup.toggleAll();
+// 全部选中
+checkboxGroup.toggleAll(true);
+// 全部取消
+checkboxGroup.toggleAll(false);
+
+// 全部反选，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  skipDisabled: true,
+});
+// 全部选中，并跳过禁用的复选框
+checkboxGroup.toggleAll({
+  checked: true,
+  skipDisabled: true,
+});
+```
 
 ### Checkbox 方法
 
@@ -305,7 +328,7 @@ export default {
 
 | 方法名 | 说明 | 参数 | 返回值 |
 | --- | --- | --- | --- |
-| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
+| toggle | 切换选中状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _checked?: boolean_ | - |
 
 ### 样式变量
 

src/checkbox/test/index.legacy.js

@@ -160,7 +160,7 @@ test('toggleAll method', async () => {
       <van-checkbox-group v-model="result" ref="group">
         <van-checkbox name="a" />
         <van-checkbox name="b" />
-        <van-checkbox name="c" />
+        <van-checkbox name="c" disabled />
       </van-checkbox-group>
     `,
     data() {
@@ -186,4 +186,12 @@ test('toggleAll method', async () => {
   wrapper.vm.toggleAll(true);
   await later();
   expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
+
+  wrapper.vm.toggleAll({ skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['c']);
+
+  wrapper.vm.toggleAll({ checked: true, skipDisabled: true });
+  await later();
+  expect(wrapper.vm.result).toEqual(['a', 'b', 'c']);
 });

src/datetime-picker/DatePicker.js

@@ -36,7 +36,7 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const formatValue = (value) => {
       if (!isDate(value)) {
         value = props.minDate;
@@ -299,6 +299,7 @@ export default createComponent({
 
     return () => (
       <Picker
+        v-slots={slots}
         ref={picker}
         columns={columns.value}
         readonly={props.readonly}

src/datetime-picker/README.md

@@ -293,6 +293,18 @@ Following props are supported when the type is time
 | confirm | Emitted when the confirm button is clicked | value: current value |
 | cancel  | Emitted when the cancel button is clicked  | -                    |
 
+### Slots
+
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default `v2.11.1` | Custom toolbar content | - |
+| title `v2.11.1` | Custom title | - |
+| confirm `v2.11.1` | Custom confirm button text | - |
+| cancel `v2.11.1` | Custom cancel button text | - |
+| option `v2.11.1` | Custom option content | _option: string \| object_ |
+| columns-top `v2.11.1` | Custom content above columns | - |
+| columns-bottom `v2.11.1` | Custom content below columns | - |
+
 ### Methods
 
 Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get DatetimePicker instance and call instance methods.

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

@@ -302,6 +302,18 @@ export default {
 | confirm | 点击完成按钮时触发的事件 | value: 当前选中的时间 |
 | cancel  | 点击取消按钮时触发的事件 | -                     |
 
+### Slots
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| default `v2.11.1` | 自定义整个顶部栏的内容 | - |
+| title `v2.11.1` | 自定义标题内容 | - |
+| confirm `v2.11.1` | 自定义确认按钮内容 | - |
+| cancel `v2.11.1` | 自定义取消按钮内容 | - |
+| option `v2.11.1` | 自定义选项内容 | _option: string \| object_ |
+| columns-top `v2.11.1` | 自定义选项上方内容 | - |
+| columns-bottom `v2.11.1` | 自定义选项下方内容 | - |
+
 ### 方法
 
 通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。

src/datetime-picker/TimePicker.js

@@ -36,7 +36,7 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const formatValue = (value) => {
       const { minHour, maxHour, maxMinute, minMinute } = props;
 
@@ -171,6 +171,7 @@ export default createComponent({
 
     return () => (
       <Picker
+        v-slots={slots}
         ref={picker}
         columns={columns.value}
         readonly={props.readonly}

src/datetime-picker/index.js

@@ -15,7 +15,7 @@ export default createComponent({
     ...DatePicker.props,
   },
 
-  setup(props, { attrs }) {
+  setup(props, { attrs, slots }) {
     const root = ref();
 
     useExpose({
@@ -32,6 +32,7 @@ export default createComponent({
 
       return (
         <Component
+          v-slots={slots}
           ref={root}
           class={bem()}
           {...{ ...inheritProps, ...attrs }}

src/datetime-picker/test/__snapshots__/datetime-picker.legacy.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should render title slot correctly 1`] = `<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>`;
+
 exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
   <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>

src/datetime-picker/test/datetime-picker.legacy.js

@@ -35,3 +35,16 @@ test('getPicker method', () => {
   const wrapper = mount(DatetimePicker);
   expect(wrapper.vm.getPicker()).toBeTruthy();
 });
+
+test('should render title slot correctly', () => {
+  const wrapper = mount(DatetimePicker, {
+    propsData: {
+      showToolbar: true,
+    },
+    scopedSlots: {
+      title: () => 'Custom title',
+    },
+  });
+
+  expect(wrapper.find('.van-picker__toolbar')).toMatchSnapshot();
+});

src/popover/README.md

@@ -17,9 +17,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> Light Theme </van-button>
-      Light Theme
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -53,9 +51,7 @@ Using the `theme` prop to change the style of Popover.
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> Dark Theme </van-button>
-      Dark Theme
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -103,9 +99,7 @@ bottom-end    # Bottom right
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> Show Icon </van-button>
-      Show Icon
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -132,9 +126,7 @@ Using the `disabled` option to disable an action.
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> Disable Action </van-button>
-      Disable Action
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -164,6 +156,7 @@ export default {
 | actions | Actions | _Action[]_ | `[]` |
 | placement | Placement | _string_ | `bottom` |
 | theme | Theme，can be set to `dark` | _string_ | `light` |
+| trigger `v2.11.1` | Trigger mode，can be set to `click` | - |
 | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
 | overlay | Whether to show overlay | _boolean_ | `false` |
 | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |

src/popover/README.zh-CN.md

@@ -23,9 +23,7 @@ app.use(Popover);
 ```html
 <van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> 浅色风格 </van-button>
-      浅色风格
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -56,9 +54,7 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme`
 ```html
 <van-popover v-model:show="showPopover" theme="dark" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> 深色风格 </van-button>
-      深色风格
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -106,9 +102,7 @@ bottom-end    # 底部右侧位置
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> 展示图标 </van-button>
-      展示图标
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -135,9 +129,7 @@ export default {
 ```html
 <van-popover v-model:show="showPopover" :actions="actions">
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> 禁用选项 </van-button>
-      禁用选项
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -179,9 +171,7 @@ export default {
     />
   </van-grid>
   <template #reference>
-    <van-button type="primary" @click="showPopover = true">
+    <van-button type="primary"> 自定义内容 </van-button>
-      自定义内容
-    </van-button>
   </template>
 </van-popover>
 ```
@@ -206,6 +196,7 @@ export default {
 | actions | 选项列表 | _Action[]_ | `[]` |
 | placement | 弹出位置 | _string_ | `bottom` |
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
+| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |

src/popover/demo/index.vue

@@ -100,7 +100,7 @@
         clickable
         :border="false"
         column-num="3"
-        style="width: 240px;"
+        style="width: 240px"
       >
         <van-grid-item
           v-for="i in 6"
@@ -187,7 +187,7 @@ export default {
         disableAction: false,
       },
       showPicker: false,
-      currentPlacement: '',
+      currentPlacement: 'top',
       placements: [
         'top',
         'top-start',

src/popover/index.js

@@ -19,6 +19,7 @@ export default createComponent({
 
   props: {
     show: Boolean,
+    trigger: String,
     overlay: Boolean,
     offset: {
       type: Array,
@@ -94,6 +95,12 @@ export default createComponent({
       emit('update:show', value);
     };
 
+    const onClickWrapper = () => {
+      if (props.trigger === 'click') {
+        toggle(!props.show);
+      }
+    };
+
     const onTouchstart = (event) => {
       event.stopPropagation();
       emit('touchstart', event);
@@ -142,7 +149,7 @@ export default createComponent({
     useClickAway(wrapperRef, onClickAway, { eventName: 'touchstart' });
 
     return () => (
-      <span ref={wrapperRef} class={bem('wrapper')}>
+      <span ref={wrapperRef} class={bem('wrapper')} onClick={onClickWrapper}>
         <Popup
           ref={popoverRef}
           show={props.show}

src/popover/test/__snapshots__/index.spec.js.snap

@@ -17,7 +17,7 @@ exports[`should locate to reference element when showed 1`] = `
 
 exports[`should locate to reference element when showed 2`] = `
 <transition-stub>
-  <div style="z-index: 2005; position: absolute; left: 0px; top: 8px; margin: 0px;"
+  <div style="z-index: 2006; position: absolute; left: 0px; top: 8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="bottom"
   >
@@ -31,7 +31,7 @@ exports[`should locate to reference element when showed 2`] = `
 
 exports[`should locate to reference element when showed 3`] = `
 <transition-stub>
-  <div style="z-index: 2005; display: none;"
+  <div style="z-index: 2006; display: none;"
        class="van-popup van-popover van-popover--light"
   >
     <div class="van-popover__arrow">
@@ -44,7 +44,7 @@ exports[`should locate to reference element when showed 3`] = `
 
 exports[`should watch placement prop and update location 1`] = `
 <transition-stub>
-  <div style="z-index: 2006; position: absolute; left: 0px; top: -8px; margin: 0px;"
+  <div style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;"
        class="van-popup van-popover van-popover--light"
        data-popper-placement="top"
   >

src/popover/test/index.spec.js

@@ -7,9 +7,27 @@ const baseActions = [
   { text: 'Option 3' },
 ];
 
+test('should toggle popover when trigger is "click" and the reference element is clicked', async () => {
+  const wrapper = mount(Popover, {
+    props: {
+      show: true,
+    },
+    slots: {
+      reference: () => <div class="reference"></div>,
+    },
+  });
+
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('update:show')).toBeFalsy();
+
+  await wrapper.setProps({ trigger: 'click' });
+  wrapper.find('.reference').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});
+
 test('should emit select event when clicking the action', async () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: baseActions,
@@ -23,7 +41,7 @@ test('should emit select event when clicking the action', async () => {
 
 test('should not emit select event when the action is disabled', () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: [{ text: 'Option', disabled: true }],
@@ -36,7 +54,7 @@ test('should not emit select event when the action is disabled', () => {
 
 test('should close popover when clicking the action', async () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: baseActions,
@@ -53,7 +71,7 @@ test('should close popover when clicking the action', async () => {
 
 test('should allow to custom the className of action', () => {
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: null,
       actions: [{ text: 'Option', className: 'foo' }],
@@ -66,7 +84,7 @@ test('should allow to custom the className of action', () => {
 test('should locate to reference element when showed', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       teleport: root,
     },
   });
@@ -84,7 +102,7 @@ test('should locate to reference element when showed', async () => {
 test('should watch placement prop and update location', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: root,
     },
@@ -101,7 +119,7 @@ test('should watch placement prop and update location', async () => {
 test('should close popover when touch outside content', async () => {
   const root = document.createElement('div');
   const wrapper = mount(Popover, {
-    propsData: {
+    props: {
       show: true,
       teleport: root,
     },

types/checkbox-group.d.ts

@@ -1,5 +1,10 @@
 import { VanComponent } from './component';
 
+export type ToggleAllOptions = {
+  checked?: boolean;
+  skipDisabled?: boolean;
+};
+
 export class CheckboxGroup extends VanComponent {
-  toggleAll(checked?: boolean): void;
+  toggleAll(options?: boolean | ToggleAllOptions): void;
 }