blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

Merge branch '2.x' into dev

Browse Source
This commit is contained in:
chenjiahan 2020-11-26 21:05:57 +08:00
commit 52fdf99c69
21 changed files with 240 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/markdown/changelog.en-US.md
View File

@ -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`

22
docs/markdown/changelog.zh-CN.md
View File

@ -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`

17
packages/vant-popperjs/README.md Normal file
View File

@ -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

29
src/checkbox-group/index.js
View File

@ -25,18 +25,25 @@ export default createComponent({
setup(props, { emit, slots }) {
const { children, linkChildren } = useChildren(CHECKBOX_KEY);
const toggleAll = (checked) => {
if (checked === false) {
emit('update:modelValue', []);
} 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 toggleAll = (options = {}) => {
if (typeof options === 'boolean') {
options = { checked: options };
}
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(

25
src/checkbox/README.md
View File

@ -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

33
src/checkbox/README.zh-CN.md
View File

@ -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` |
| icon-size | 所有复选框的图标大小，默认单位为`px` | _number \| string_ | `20px` |
| direction `v2.5.0` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
| 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_ | - |
### 样式变量

10
src/checkbox/test/index.legacy.js
View File

@ -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']);
});

3
src/datetime-picker/DatePicker.js
View File

@ -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}

12
src/datetime-picker/README.md
View File

@ -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.

12
src/datetime-picker/README.zh-CN.md
View File

@ -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)。

3
src/datetime-picker/TimePicker.js
View File

@ -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}

3
src/datetime-picker/index.js
View File

@ -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 }}

2
src/datetime-picker/test/__snapshots__/datetime-picker.legacy.js.snap
View File

@ -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>

13
src/datetime-picker/test/datetime-picker.legacy.js
View File

@ -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();
});

17
src/popover/README.md
View File

@ -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">
Light Theme
</van-button>
<van-button type="primary"> 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">
Dark Theme
</van-button>
<van-button type="primary"> 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">
Show Icon
</van-button>
<van-button type="primary"> 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">
Disable Action
</van-button>
<van-button type="primary"> 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` |

21
src/popover/README.zh-CN.md
View File

@ -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>
<van-button type="primary"> 浅色风格 </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>
<van-button type="primary"> 深色风格 </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>
<van-button type="primary"> 展示图标 </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>
<van-button type="primary"> 禁用选项 </van-button>
</template>
</van-popover>
```
@ -179,9 +171,7 @@ export default {
/>
</van-grid>
<template #reference>
<van-button type="primary" @click="showPopover = true">
自定义内容
</van-button>
<van-button type="primary"> 自定义内容 </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` |

4
src/popover/demo/index.vue
View File

@ -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',

9
src/popover/index.js
View File

@ -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}

6
src/popover/test/__snapshots__/index.spec.js.snap
View File

@ -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"
>

32
src/popover/test/index.spec.js
View File

@ -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,
},

7
types/checkbox-group.d.ts vendored
View File

@ -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;
}