From 9f2187f02144cf9c6bb40a95c71a0fc3ce5eff44 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 25 Nov 2020 22:10:52 +0800 Subject: [PATCH 1/6] docs(@vant/popperjs): add README --- packages/vant-popperjs/README.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/vant-popperjs/README.md diff --git a/packages/vant-popperjs/README.md b/packages/vant-popperjs/README.md new file mode 100644 index 000000000..0f483f68c --- /dev/null +++ b/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 From 488d90aab9bef1214c4130908e9032fa71c84f84 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 26 Nov 2020 19:34:51 +0800 Subject: [PATCH 2/6] feat(CheckboxGroup): toggleAll support skipDisabled option (#7644) --- src/checkbox-group/index.js | 19 +++++++++++-------- src/checkbox/README.md | 25 ++++++++++++++++++++++++- src/checkbox/README.zh-CN.md | 33 ++++++++++++++++++++++++++++----- src/checkbox/test/index.spec.js | 10 +++++++++- types/checkbox-group.d.ts | 7 ++++++- 5 files changed, 78 insertions(+), 16 deletions(-) diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 2bd6cac3e..2a577bc14 100644 --- a/src/checkbox-group/index.js +++ b/src/checkbox-group/index.js @@ -27,16 +27,19 @@ export default createComponent({ methods: { // @exposed-api - toggleAll(checked) { - if (checked === false) { - this.$emit('input', []); - return; + toggleAll(options = {}) { + if (typeof options === 'boolean') { + options = { checked: options }; } - let { children } = this; - if (!checked) { - children = children.filter((item) => !item.checked); - } + const { checked, skipDisabled } = options; + + const children = this.children.filter((item) => { + if (item.disabled && skipDisabled) { + return item.checked; + } + return checked ?? !item.checked; + }); const names = children.map((item) => item.name); this.$emit('input', names); diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 493204b62..485c53f70 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -259,7 +259,30 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CheckboxGroup instance and call | 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 diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 4d89936fa..09dcb6650 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -242,7 +242,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` | @@ -253,8 +253,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 @@ -283,7 +283,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 方法 @@ -291,7 +314,7 @@ export default { | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | -| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - | +| toggle | 切换选中状态，传 `true` 为选中，`false` 为取消选中，不传参为取反 | _checked?: boolean_ | - | ### 样式变量 diff --git a/src/checkbox/test/index.spec.js b/src/checkbox/test/index.spec.js index 9d91c366a..0156c2564 100644 --- a/src/checkbox/test/index.spec.js +++ b/src/checkbox/test/index.spec.js @@ -160,7 +160,7 @@ test('toggleAll method', async () => { - + `, 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']); }); diff --git a/types/checkbox-group.d.ts b/types/checkbox-group.d.ts index 5a53fa574..a27cfe44b 100644 --- a/types/checkbox-group.d.ts +++ b/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; } From d3f38c29f9f1ea1c858b39302207fae0d2fc36c7 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 26 Nov 2020 19:57:28 +0800 Subject: [PATCH 3/6] feat(DatetimePicker): support picker slots (#7645) --- src/datetime-picker/README.md | 12 ++++++++++++ src/datetime-picker/README.zh-CN.md | 12 ++++++++++++ src/datetime-picker/index.js | 1 + src/datetime-picker/shared.js | 1 + .../test/__snapshots__/datetime-picker.spec.js.snap | 2 ++ src/datetime-picker/test/datetime-picker.spec.js | 13 +++++++++++++ 6 files changed, 41 insertions(+) diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index 5c3d0adc3..570d6e632 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -292,6 +292,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://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods. diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index dd0a3dfc6..9c7e91462 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -301,6 +301,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)。 diff --git a/src/datetime-picker/index.js b/src/datetime-picker/index.js index 50a0c3080..5785c0e85 100644 --- a/src/datetime-picker/index.js +++ b/src/datetime-picker/index.js @@ -24,6 +24,7 @@ export default createComponent({ Custom title`; + exports[`time type 1`] = `
diff --git a/src/datetime-picker/test/datetime-picker.spec.js b/src/datetime-picker/test/datetime-picker.spec.js index a268c45a2..c729dcfa3 100644 --- a/src/datetime-picker/test/datetime-picker.spec.js +++ b/src/datetime-picker/test/datetime-picker.spec.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(); +}); From 7e4ff3b667ff27ffb8cbbf3828760a4d446f85d1 Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 26 Nov 2020 20:31:38 +0800 Subject: [PATCH 4/6] feat(Popover): add trigger prop (#7646) --- src/popover/README.md | 27 +++++++++++----- src/popover/README.zh-CN.md | 31 +++++++++++++------ src/popover/demo/index.vue | 18 +++++++---- src/popover/index.js | 9 +++++- .../test/__snapshots__/index.spec.js.snap | 6 ++-- src/popover/test/index.spec.js | 18 +++++++++++ 6 files changed, 81 insertions(+), 28 deletions(-) diff --git a/src/popover/README.md b/src/popover/README.md index 492e8ffa3..4bcb3e789 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -14,9 +14,14 @@ Vue.use(Popover); ### Basic Usage ```html - + @@ -50,9 +55,14 @@ export default { Using the `theme` prop to change the style of Popover. ```html - + @@ -100,9 +110,9 @@ bottom-end # Bottom right ### Show Icon ```html - + @@ -129,9 +139,9 @@ export default { Using the `disabled` option to disable an action. ```html - + @@ -163,6 +173,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` | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 8e35eacf8..99b2af080 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -20,9 +20,14 @@ Vue.use(Popover); 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。 ```html - + @@ -53,9 +58,14 @@ export default { Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。 ```html - + @@ -103,9 +113,9 @@ bottom-end # 底部右侧位置 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。 ```html - + @@ -132,9 +142,9 @@ export default { 在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。 ```html - + @@ -161,7 +171,7 @@ export default { 通过默认插槽，可以在 Popover 内部放置任意内容。 ```html - + @@ -205,6 +215,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` | diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index b23669027..06b28c92a 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -3,13 +3,14 @@ @@ -17,12 +18,13 @@ @@ -48,6 +50,7 @@ @@ -78,12 +82,13 @@ @@ -93,6 +98,7 @@ @@ -190,7 +196,7 @@ export default { disableAction: false, }, showPicker: false, - currentPlacement: '', + currentPlacement: 'top', placements: [ 'top', 'top-start', diff --git a/src/popover/index.js b/src/popover/index.js index 087964b38..5ba35cc38 100644 --- a/src/popover/index.js +++ b/src/popover/index.js @@ -21,6 +21,7 @@ export default createComponent({ props: { value: Boolean, + trigger: String, overlay: Boolean, offset: { type: Array, @@ -120,6 +121,12 @@ export default createComponent({ this.$emit('input', value); }, + onClickWrapper() { + if (this.trigger === 'click') { + this.onToggle(!this.value); + } + }, + onTouchstart(event) { event.stopPropagation(); this.$emit('touchstart', event); @@ -162,7 +169,7 @@ export default createComponent({ render() { return ( - + `; exports[`should locate to reference element when showed 2`] = ` -
+
`; exports[`should locate to reference element when showed 3`] = ` -