From be25a478dfbc599cdb27ba09d2d72858037c1700 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:14:40 +0800 Subject: [PATCH 1/9] feat(NavBar): add safe-area-inset-top prop --- src/nav-bar/README.md | 1 + src/nav-bar/README.zh-CN.md | 3 +- src/nav-bar/index.js | 33 +++++++++++++----- src/nav-bar/index.less | 34 ++++++++++++------- .../test/__snapshots__/index.spec.js.snap | 26 ++++++++------ src/nav-bar/test/index.spec.js | 20 ++++++++--- 6 files changed, 79 insertions(+), 38 deletions(-) diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 0a6e7fe44..3462c6ea0 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -63,6 +63,7 @@ export default { | fixed | Whether to fixed top | _boolean_ | `false` | | placeholder `v2.5.9` | Whether to generage a placeholder element when fixed | _boolean_ | `false` | | z-index | Z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | Whether to enable top safe area adaptation | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 104f7022d..cfad84e35 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -64,7 +64,8 @@ export default { | border | 是否显示下边框 | _boolean_ | `true` | | fixed | 是否固定在顶部 | _boolean_ | `false` | | placeholder `v2.5.9` | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| z-index | 元素 z-index | _number \| string_ | `1` | +| z-index | 导航栏 z-index | _number \| string_ | `1` | +| safe-area-inset-top `v2.10.13` | 是否开启顶部安全区适配 | _boolean_ | `false` | ### Slots diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js index 24eeb92b1..3e43cf120 100644 --- a/src/nav-bar/index.js +++ b/src/nav-bar/index.js @@ -16,6 +16,7 @@ export default createComponent({ rightText: String, leftArrow: Boolean, placeholder: Boolean, + safeAreaInsetTop: Boolean, border: { type: Boolean, default: true, @@ -65,17 +66,31 @@ export default createComponent({
- {this.hasLeft() &&
- {this.genLeft()} -
} -
- {this.slots('title') || this.title} +
+ {this.hasLeft() && ( +
+ {this.genLeft()} +
+ )} +
+ {this.slots('title') || this.title} +
+ {this.hasRight() && ( +
+ {this.genRight()} +
+ )}
- {this.hasRight() &&
- {this.genRight()} -
}
); }, diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 4bd86e708..1a876357f 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -1,25 +1,12 @@ @import '../style/var'; .van-nav-bar { - position: relative; z-index: @nav-bar-z-index; - display: flex; - align-items: center; - height: @nav-bar-height; line-height: 1.5; text-align: center; background-color: @nav-bar-background-color; user-select: none; - .van-icon { - color: @nav-bar-icon-color; - } - - &__arrow { - margin-right: @padding-base; - font-size: @nav-bar-arrow-size; - } - &--fixed { position: fixed; top: 0; @@ -27,6 +14,27 @@ width: 100%; } + &--safe-area-inset-top { + padding-top: constant(safe-area-inset-bottom); + padding-top: env(safe-area-inset-bottom); + } + + .van-icon { + color: @nav-bar-icon-color; + } + + &__content { + position: relative; + display: flex; + align-items: center; + height: @nav-bar-height; + } + + &__arrow { + margin-right: @padding-base; + font-size: @nav-bar-arrow-size; + } + &__title { max-width: 60%; margin: 0 auto; diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap index d4f4630a6..9598fcd54 100644 --- a/src/nav-bar/test/__snapshots__/index.spec.js.snap +++ b/src/nav-bar/test/__snapshots__/index.spec.js.snap @@ -1,23 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`placeholder prop 1`] = ` -
-
+exports[`should allow render left/right slot 1`] = ` +
+
+
Custom Left
+
Custom Right
`; -exports[`render left & right slot 1`] = ` +exports[`should allow render title slot 1`] = `
-
Custom Left
-
-
Custom Right
+
+
Custom Title
+
`; -exports[`render title slot 1`] = ` -
-
Custom Title
+exports[`should render placeholder element when enabling placeholder prop 1`] = ` +
+
+
+
+
+
`; diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js index 63149c6e0..59eb2176b 100644 --- a/src/nav-bar/test/index.spec.js +++ b/src/nav-bar/test/index.spec.js @@ -1,7 +1,7 @@ import NavBar from '..'; import { mount, mockGetBoundingClientRect } from '../../../test'; -test('render left & right slot', () => { +test('should allow render left/right slot', () => { const wrapper = mount(NavBar, { scopedSlots: { left: () => 'Custom Left', @@ -12,7 +12,7 @@ test('render left & right slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('render title slot', () => { +test('should allow render title slot', () => { const wrapper = mount(NavBar, { scopedSlots: { title: () => 'Custom Title', @@ -22,7 +22,7 @@ test('render title slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('placeholder prop', () => { +test('should render placeholder element when enabling placeholder prop', () => { const restore = mockGetBoundingClientRect({ height: 50 }); const wrapper = mount(NavBar, { @@ -37,7 +37,7 @@ test('placeholder prop', () => { restore(); }); -test('click-left event', () => { +test('should emit click-left event when clicking left text', () => { const wrapper = mount(NavBar, { propsData: { leftText: 'left', @@ -48,7 +48,7 @@ test('click-left event', () => { expect(wrapper.emitted('click-left')).toBeTruthy(); }); -test('click-right event', () => { +test('should emit click-right event when clicking right text', () => { const wrapper = mount(NavBar, { propsData: { rightText: 'right', @@ -58,3 +58,13 @@ test('click-right event', () => { wrapper.find('.van-nav-bar__right').trigger('click'); expect(wrapper.emitted('click-right')).toBeTruthy(); }); + +test('should add safe-area-inset-top classname when using safe-area-inset-top prop', () => { + const wrapper = mount(NavBar, { + propsData: { + safeAreaInsetTop: true, + }, + }); + + expect(wrapper.contains('.van-nav-bar--safe-area-inset-top')).toBeTruthy(); +}); From e7d9cae593f7fe120d56c898282b94e5bdcd2dc4 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:18:21 +0800 Subject: [PATCH 2/9] test(NavBar): improve test cases name --- .../test/__snapshots__/index.spec.js.snap | 20 +++++++++---------- src/nav-bar/test/index.spec.js | 8 ++++---- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/nav-bar/test/__snapshots__/index.spec.js.snap b/src/nav-bar/test/__snapshots__/index.spec.js.snap index 9598fcd54..cd19791ed 100644 --- a/src/nav-bar/test/__snapshots__/index.spec.js.snap +++ b/src/nav-bar/test/__snapshots__/index.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`should allow render left/right slot 1`] = ` +exports[`should render left/right slot and match snapshot 1`] = `
Custom Left
@@ -10,15 +10,7 @@ exports[`should allow render left/right slot 1`] = `
`; -exports[`should allow render title slot 1`] = ` -
-
-
Custom Title
-
-
-`; - -exports[`should render placeholder element when enabling placeholder prop 1`] = ` +exports[`should render placeholder element when using placeholder prop 1`] = `
@@ -27,3 +19,11 @@ exports[`should render placeholder element when enabling placeholder prop 1`] =
`; + +exports[`should render title slot and match snapshot 1`] = ` +
+
+
Custom Title
+
+
+`; diff --git a/src/nav-bar/test/index.spec.js b/src/nav-bar/test/index.spec.js index 59eb2176b..98f134ee9 100644 --- a/src/nav-bar/test/index.spec.js +++ b/src/nav-bar/test/index.spec.js @@ -1,7 +1,7 @@ import NavBar from '..'; import { mount, mockGetBoundingClientRect } from '../../../test'; -test('should allow render left/right slot', () => { +test('should render left/right slot and match snapshot', () => { const wrapper = mount(NavBar, { scopedSlots: { left: () => 'Custom Left', @@ -12,7 +12,7 @@ test('should allow render left/right slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('should allow render title slot', () => { +test('should render title slot and match snapshot', () => { const wrapper = mount(NavBar, { scopedSlots: { title: () => 'Custom Title', @@ -22,7 +22,7 @@ test('should allow render title slot', () => { expect(wrapper).toMatchSnapshot(); }); -test('should render placeholder element when enabling placeholder prop', () => { +test('should render placeholder element when using placeholder prop', () => { const restore = mockGetBoundingClientRect({ height: 50 }); const wrapper = mount(NavBar, { @@ -59,7 +59,7 @@ test('should emit click-right event when clicking right text', () => { expect(wrapper.emitted('click-right')).toBeTruthy(); }); -test('should add safe-area-inset-top classname when using safe-area-inset-top prop', () => { +test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => { const wrapper = mount(NavBar, { propsData: { safeAreaInsetTop: true, From d59a17c5e1578026e3cd660ff727cad57a5b23cc Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 8 Nov 2020 16:22:03 +0800 Subject: [PATCH 3/9] fix(NavBar): text vertical align (#7515) --- src/nav-bar/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/nav-bar/index.less b/src/nav-bar/index.less index 1a876357f..8f72ac913 100644 --- a/src/nav-bar/index.less +++ b/src/nav-bar/index.less @@ -2,7 +2,7 @@ .van-nav-bar { z-index: @nav-bar-z-index; - line-height: 1.5; + line-height: @line-height-lg; text-align: center; background-color: @nav-bar-background-color; user-select: none; From 2615bc54dd18d363e402218cc3ac714a6b9ee364 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 8 Nov 2020 16:36:18 +0800 Subject: [PATCH 4/9] fix(NoticeBar): can't replay in iOS14 (#7516) --- src/notice-bar/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/notice-bar/index.js b/src/notice-bar/index.js index 7c2784ff7..e074f1239 100644 --- a/src/notice-bar/index.js +++ b/src/notice-bar/index.js @@ -1,5 +1,5 @@ import { createNamespace, isDef } from '../utils'; -import { doubleRaf } from '../utils/dom/raf'; +import { doubleRaf, raf } from '../utils/dom/raf'; import { BindEventMixin } from '../mixins/bind-event'; import Icon from '../icon'; @@ -70,7 +70,8 @@ export default createComponent({ this.duration = 0; // wait for Vue to render offset - this.$nextTick(() => { + // using nextTick won't work in iOS14 + raf(() => { // use double raf to ensure animation can start doubleRaf(() => { this.offset = -this.contentWidth; From 2bf7a6cde6553776cf92189857dbcaee16511863 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 8 Nov 2020 16:38:26 +0800 Subject: [PATCH 5/9] test(NavBar): fix demo snapshot (#7517) --- .../test/__snapshots__/demo.spec.js.snap | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/nav-bar/test/__snapshots__/demo.spec.js.snap b/src/nav-bar/test/__snapshots__/demo.spec.js.snap index bcd8a6ba2..363455438 100644 --- a/src/nav-bar/test/__snapshots__/demo.spec.js.snap +++ b/src/nav-bar/test/__snapshots__/demo.spec.js.snap @@ -4,19 +4,23 @@ exports[`renders demo correctly 1`] = `
-
- 返回
-
标题
-
按钮
+
+
+ 返回
+
标题
+
按钮
+
-
- 返回
-
标题
-
-
+
+
+ 返回
+
标题
+
+
+
From 27bead6bba242a036a25126e509ce017466d772f Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:40:02 +0800 Subject: [PATCH 6/9] chore: release 2.10.13 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f0aca2954..c382dddf2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vant", - "version": "2.10.12", + "version": "2.10.13", "description": "Mobile UI Components built on Vue", "main": "lib/index.js", "module": "es/index.js", From 46fdc15ce5d35cacbc0e869b2f886f09143c4506 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:45:56 +0800 Subject: [PATCH 7/9] docs(changelog): 2.10.13 --- docs/markdown/changelog.en-US.md | 21 +++++++++++++++++++++ docs/markdown/changelog.zh-CN.md | 21 +++++++++++++++++++++ 2 files changed, 42 insertions(+) diff --git a/docs/markdown/changelog.en-US.md b/docs/markdown/changelog.en-US.md index 1a13c38fe..1b913832b 100644 --- a/docs/markdown/changelog.en-US.md +++ b/docs/markdown/changelog.en-US.md @@ -10,6 +10,27 @@ 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.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) + +`2020-11-08` + +**Feature** + +- Icon: using encoded woff2 iconfont by default [e0ad65](https://github.com/youzan/vant/commit/e0ad65e69fbcfb9ef69b25d2c1bce322577aad11) +- NavBar: add safe-area-inset-top prop [be25a4](https://github.com/youzan/vant/commit/be25a478dfbc599cdb27ba09d2d72858037c1700) +- Sticky: offset-top support vh unit [#7498](https://github.com/youzan/vant/issues/7498) + +**Bug Fixes** + +- NavBar: text vertical align [#7515](https://github.com/youzan/vant/issues/7515) +- NoticeBar: can't replay in iOS14 [#7516](https://github.com/youzan/vant/issues/7516) +- Picker: move to next option when default option is disabled [#7499](https://github.com/youzan/vant/issues/7499) +- Picker: should move to first option when all options are disabled [#7504](https://github.com/youzan/vant/issues/7504) +- Swipe: incorrect lazy render when loop is false [#7465](https://github.com/youzan/vant/issues/7465) +- Swipe: item should only rendered once [#7466](https://github.com/youzan/vant/issues/7466) +- Switch: remove unnecessary z-index [#7497](https://github.com/youzan/vant/issues/7497) +- Toast: onClose option should only be called once [#7496](https://github.com/youzan/vant/issues/7496) + ### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) `2020-10-31` diff --git a/docs/markdown/changelog.zh-CN.md b/docs/markdown/changelog.zh-CN.md index fd073c78a..19c770028 100644 --- a/docs/markdown/changelog.zh-CN.md +++ b/docs/markdown/changelog.zh-CN.md @@ -10,6 +10,27 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。 - 次版本号：每隔一至二个月发布，包含新特性和较大的功能更新，向下兼容。 - 主版本号：发布时间不定，包含不兼容更新，预计下一个主版本会与 Vue 3.0 同期发布。 +### [v2.10.13](https://github.com/youzan/vant/compare/v2.10.12...v2.10.13) + +`2020-11-08` + +**Feature** + +- Icon: 现在会默认使用 base64 图标，而不是有赞 CDN 上的 iconfont [e0ad65](https://github.com/youzan/vant/commit/e0ad65e69fbcfb9ef69b25d2c1bce322577aad11) +- NavBar: 新增 safe-area-inset-top 属性，用于开启 iOS 顶部安全区适配 [be25a4](https://github.com/youzan/vant/commit/be25a478dfbc599cdb27ba09d2d72858037c1700) +- Sticky: offset-top 属性支持使用 vh 单位 [#7498](https://github.com/youzan/vant/issues/7498) + +**Bug Fixes** + +- NavBar: 修复按钮文字不居中的问题 [#7515](https://github.com/youzan/vant/issues/7515) +- NoticeBar: 修复在 iOS14 上无法重复播放的问题 [#7516](https://github.com/youzan/vant/issues/7516) +- Picker: 修复级联模式下选项禁用时二级选项错误的问题 [#7499](https://github.com/youzan/vant/issues/7499) +- Picker: 修复禁用所有选项时默认展示的选项不为第一项的问题 [#7504](https://github.com/youzan/vant/issues/7504) +- Swipe: 修复开启 lazy-render 且 loop 为 false 时渲染节点不正确的问题 [#7465](https://github.com/youzan/vant/issues/7465) +- Swipe: 修复开启 lazy-render 时子节点被重复挂载的问题 [#7466](https://github.com/youzan/vant/issues/7466) +- Switch: 修复按钮 z-index 层级过高的问题 [#7497](https://github.com/youzan/vant/issues/7497) +- Toast: 修复 onClose 选项可以被重复触发的问题 [#7496](https://github.com/youzan/vant/issues/7496) + ### [v2.10.12](https://github.com/youzan/vant/compare/v2.10.11...v2.10.12) `2020-10-31` From 58fa4fee1c74fdda520c7bee58d1e65bf9435caa Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:57:17 +0800 Subject: [PATCH 8/9] docs(Icon): add woff2 icon tip --- src/icon/README.zh-CN.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index a65d298b5..ceb995f7a 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -59,6 +59,8 @@ Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载 import 'vant/lib/icon/local.css'; ``` +> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器才会加载有赞 CDN 的网络图标。 + ### 自定义图标 如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。 From 85e1548fc53b67804f38f1b480d377edd218bdb3 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Sun, 8 Nov 2020 16:58:44 +0800 Subject: [PATCH 9/9] docs(Icon): add en tip --- src/icon/README.md | 2 ++ src/icon/README.zh-CN.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/icon/README.md b/src/icon/README.md index 4e6f0f7b7..0e47d983e 100644 --- a/src/icon/README.md +++ b/src/icon/README.md @@ -57,6 +57,8 @@ Icon uses font file in `yzcdn.cn` by default，if you want to use the local font import 'vant/lib/icon/local.css'; ``` +> Tips: Starting from version 2.10.13, Vant will use local font files in woff2 format by default + ### Add custom iconfont ```css diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md index ceb995f7a..aa14214a1 100644 --- a/src/icon/README.zh-CN.md +++ b/src/icon/README.zh-CN.md @@ -59,7 +59,7 @@ Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载 import 'vant/lib/icon/local.css'; ``` -> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器才会加载有赞 CDN 的网络图标。 +> Tips: 从 2.10.13 版本开始，Vant 会默认使用 woff2 格式的本地字体文件，只有在不支持 woff2 字体的低端浏览器上才会加载有赞 CDN 的网络图标。 ### 自定义图标