diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 9fa222e97..9a963a53d 100644 --- a/docs/markdown/changelog.en-US.md +++ b/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` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index 9235c02ce..551294810 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/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` 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 diff --git a/src/checkbox-group/index.js b/src/checkbox-group/index.js index 67818a05a..bef74ce8e 100644 --- a/src/checkbox-group/index.js +++ b/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) => { - 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( diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 20ff6e151..e6922795d 100644 --- a/src/checkbox/README.md +++ b/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 diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index bdcb5a397..f241ea791 100644 --- a/src/checkbox/README.zh-CN.md +++ b/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` | -| 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_ | - | ### 样式变量 diff --git a/src/checkbox/test/index.legacy.js b/src/checkbox/test/index.legacy.js index 58c0b44ba..8d9f14af7 100644 --- a/src/checkbox/test/index.legacy.js +++ b/src/checkbox/test/index.legacy.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/src/datetime-picker/DatePicker.js b/src/datetime-picker/DatePicker.js index bc55f9207..086efdde6 100644 --- a/src/datetime-picker/DatePicker.js +++ b/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 () => ( { const { minHour, maxHour, maxMinute, minMinute } = props; @@ -171,6 +171,7 @@ export default createComponent({ return () => ( Custom title`; + exports[`time type 1`] = `
diff --git a/src/datetime-picker/test/datetime-picker.legacy.js b/src/datetime-picker/test/datetime-picker.legacy.js index 82f1ddfbc..02b89b326 100644 --- a/src/datetime-picker/test/datetime-picker.legacy.js +++ b/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(); +}); diff --git a/src/popover/README.md b/src/popover/README.md index 059a3aae3..6d4a51f49 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -17,9 +17,7 @@ app.use(Popover); ```html ``` @@ -53,9 +51,7 @@ Using the `theme` prop to change the style of Popover. ```html ``` @@ -103,9 +99,7 @@ bottom-end # Bottom right ```html ``` @@ -132,9 +126,7 @@ Using the `disabled` option to disable an action. ```html ``` @@ -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` | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 31b4d1775..4c5802dcd 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -23,9 +23,7 @@ app.use(Popover); ```html ``` @@ -56,9 +54,7 @@ Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` ```html ``` @@ -106,9 +102,7 @@ bottom-end # 底部右侧位置 ```html ``` @@ -135,9 +129,7 @@ export default { ```html ``` @@ -179,9 +171,7 @@ export default { /> ``` @@ -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` | diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index 111e6f757..09f93c00b 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -100,7 +100,7 @@ clickable :border="false" column-num="3" - style="width: 240px;" + style="width: 240px" > { + 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 () => ( - + -
@@ -31,7 +31,7 @@ exports[`should locate to reference element when showed 2`] = ` exports[`should locate to reference element when showed 3`] = ` -