Merge pull request #3242 from youzan/2.0

[breaking change] 2.0

docs/markdown/changelog.en-US.md

@@ -34,7 +34,7 @@
 - Tabbar: add safe-area-inset-bottom prop [\#3149](https://github.com/youzan/vant/pull/3149)
 - SubmitBar: add safe-area-inset-bottom prop [\#3172](https://github.com/youzan/vant/pull/3172)
 - GoodsAction: add safe-area-inset-bottom prop [\#3174](https://github.com/youzan/vant/pull/3174)
-- Actionsheet: add safe-area-inset-bottom prop [\#3171](https://github.com/youzan/vant/pull/3171)
+- ActionSheet: add safe-area-inset-bottom prop [\#3171](https://github.com/youzan/vant/pull/3171)
 - NumberKeyboard: add safe-area-inset-bottom prop [\#3173](https://github.com/youzan/vant/pull/3173)
 
 **Bug Fixes**
@@ -55,7 +55,7 @@
 - Cell: add less vars [\#3122](https://github.com/youzan/vant/pull/3122)
 - Rate: add less vars [\#3135](https://github.com/youzan/vant/pull/3135)
 - Panel: add less vars [\#3136](https://github.com/youzan/vant/pull/3136)
-- Badge: add less vars [\#3131](https://github.com/youzan/vant/pull/3131)
+- Sidebar: add less vars [\#3131](https://github.com/youzan/vant/pull/3131)
 - Dialog: add less vars [\#3123](https://github.com/youzan/vant/pull/3123)
 - Slider: add less vars [\#3125](https://github.com/youzan/vant/pull/3125)
 - Tabbar: add less vars [\#3124](https://github.com/youzan/vant/pull/3124)
@@ -89,7 +89,7 @@
 
 **Improvements**
 
-- Actionsheet: add less vars [\#3049](https://github.com/youzan/vant/pull/3049)
+- ActionSheet: add less vars [\#3049](https://github.com/youzan/vant/pull/3049)
 
 **Bug Fixes**
 
@@ -112,7 +112,7 @@
 - NoticeBar: add wrapable prop [\#2992](https://github.com/youzan/vant/pull/2992)
 - Field: add error-message-align prop [\#3016](https://github.com/youzan/vant/pull/3016)
 - Sku: support set selectedNum when inited [\#3045](https://github.com/youzan/vant/pull/3045)
-- Actionsheet: support use slot and cancel-text at same time [\#3021](https://github.com/youzan/vant/pull/3021)
+- ActionSheet: support use slot and cancel-text at same time [\#3021](https://github.com/youzan/vant/pull/3021)
 
 **Bug Fixes**
 
@@ -152,7 +152,7 @@
 - CellGroup: add title prop [\#2928](https://github.com/youzan/vant/pull/2928)
 - Steps: add active-icon prop [\#2934](https://github.com/youzan/vant/pull/2934)
 - Picker: add default-index prop [\#2935](https://github.com/youzan/vant/pull/2935)
-- Actionsheet: add index param for select event [\#2917](https://github.com/youzan/vant/pull/2917)
+- ActionSheet: add index param for select event [\#2917](https://github.com/youzan/vant/pull/2917)
 
 **Bug Fixes**
 
@@ -188,8 +188,8 @@
 
 **Bug Fixes**
 
-- fix Actionsheet lazy-render not work [\#2840](https://github.com/youzan/vant/pull/2840)
-- fix Actionsheet get-container not work [\#2853](https://github.com/youzan/vant/pull/2853)
+- fix ActionSheet lazy-render not work [\#2840](https://github.com/youzan/vant/pull/2840)
+- fix ActionSheet get-container not work [\#2853](https://github.com/youzan/vant/pull/2853)
 - fix Tab should scroll to active tab when inited [\#2857](https://github.com/youzan/vant/pull/2857)
 - fix Checkbox uncheckable when inside cell [\#2855](https://github.com/youzan/vant/pull/2855)
 - fix CouponList incorrectly render when disabled list empty [\#2845](https://github.com/youzan/vant/pull/2845)
@@ -554,7 +554,7 @@ Also we have optimized the UI of the following components:：
 
 - Tab: add animated props [\#2126](https://github.com/youzan/vant/pull/2126)
 - Tab: update title style [\#2120](https://github.com/youzan/vant/pull/2120)
-- Badge: update info style [\#2122](https://github.com/youzan/vant/pull/2122)
+- Sidebar: update info style [\#2122](https://github.com/youzan/vant/pull/2122)
 - Radio: add checked-color prop [\#2129](https://github.com/youzan/vant/pull/2129)
 - Swipe: add indicator-color prop [\#2110](https://github.com/youzan/vant/pull/2110)
 - TreeSelect: support disable option [\#2107](https://github.com/youzan/vant/pull/2107)
@@ -612,7 +612,7 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-- Badge: add change event [\#2017](https://github.com/youzan/vant/pull/2017)
+- Sidebar: add change event [\#2017](https://github.com/youzan/vant/pull/2017)
 - Radio: update color [\#2018](https://github.com/youzan/vant/pull/2018)
 - Checkbox: update color [\#2018](https://github.com/youzan/vant/pull/2018)
 - Sku: support image preview [\#2019](https://github.com/youzan/vant/pull/2019)
@@ -710,7 +710,7 @@ Also we have optimized the UI of the following components:：
 **Improvements**
 
 - Tab: upgrade style [\#1908](https://github.com/youzan/vant/pull/1908)
-- Badge: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907)
+- Sidebar: upgrade style [\#1907](https://github.com/youzan/vant/pull/1907)
 - Dialog: upgrade style [\#1906](https://github.com/youzan/vant/pull/1906)
 - NoticeBar: upgrade style [\#1893](https://github.com/youzan/vant/pull/1893)
 - Collapse: add disabled prop [\#1892](https://github.com/youzan/vant/pull/1892)
@@ -873,14 +873,14 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-- Actionsheet: add select event [\#1594](https://github.com/youzan/vant/pull/1594)
+- ActionSheet: add select event [\#1594](https://github.com/youzan/vant/pull/1594)
 - ImagePreview: suppot onClose callback [\#1589](https://github.com/youzan/vant/pull/1589)
 - List: add check method [\#1590](https://github.com/youzan/vant/pull/1590)
 - Search: update style [\#1603](https://github.com/youzan/vant/pull/1603)
 
 **Bug Fixes**
 
-- fix Actionsheet item unclickable when loading [\#1587](https://github.com/youzan/vant/pull/1587)
+- fix ActionSheet item unclickable when loading [\#1587](https://github.com/youzan/vant/pull/1587)
 - fix DatetimePicker value uncorrect when use formatter [\#1591](https://github.com/youzan/vant/pull/1591)
 
 
@@ -970,7 +970,7 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-- Actionsheet: support lazy render [\#1365](https://github.com/youzan/vant/pull/1365)
+- ActionSheet: support lazy render [\#1365](https://github.com/youzan/vant/pull/1365)
 - AddressEdit: adjust event order [\#1402](https://github.com/youzan/vant/pull/1402)
 - SwitchCell: add size prop [\#1371](https://github.com/youzan/vant/pull/1371)
 - Checkbox: add label-position prop [\#1394](https://github.com/youzan/vant/pull/1394)
@@ -1015,7 +1015,7 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-- Actionsheet: support disable option [\#1293](https://github.com/youzan/vant/pull/1293)
+- ActionSheet: support disable option [\#1293](https://github.com/youzan/vant/pull/1293)
 - Field: support clearable [\#1309](https://github.com/youzan/vant/pull/1309)
 - Layout: support flex layout [\#1305](https://github.com/youzan/vant/pull/1305)
 - Locale: add type definition [\#1294](https://github.com/youzan/vant/pull/1294)
@@ -1046,7 +1046,7 @@ Also we have optimized the UI of the following components:：
 
 **Bug Fixes**
 
-- fix Actionsheet title font size [\#1267](https://github.com/youzan/vant/pull/1267)
+- fix ActionSheet title font size [\#1267](https://github.com/youzan/vant/pull/1267)
 - fix CheckboxGroup v-model type check [\#1254](https://github.com/youzan/vant/pull/1254)
 - fix Popup max height [\#1256](https://github.com/youzan/vant/pull/1256)
 - fix Tab resize line when title changed [\#1260](https://github.com/youzan/vant/pull/1260)
@@ -1273,8 +1273,8 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-* Actionsheet: add cancel event [\#796](https://github.com/youzan/vant/pull/796)
-* Actionsheet: support maxHeight [\#777](https://github.com/youzan/vant/pull/777)
+* ActionSheet: add cancel event [\#796](https://github.com/youzan/vant/pull/796)
+* ActionSheet: support maxHeight [\#777](https://github.com/youzan/vant/pull/777)
 * DatetimePicker: support all picker props [\#788](https://github.com/youzan/vant/pull/788)
 * SubmitBar: unite font-size [\#774](https://github.com/youzan/vant/pull/774)
 * i18n: support zh-HK language [\#812](https://github.com/youzan/vant/pull/812)
@@ -1359,10 +1359,10 @@ Also we have optimized the UI of the following components:：
 
 **Bug Fixes**
 
-* fix Actionsheet bottom border missing [\#686](https://github.com/youzan/vant/pull/686)
+* fix ActionSheet bottom border missing [\#686](https://github.com/youzan/vant/pull/686)
 * fix AddressEdit area not selected when area_code changed [\#680](https://github.com/youzan/vant/pull/680)
 * fix Stepper value overlimit [\#691](https://github.com/youzan/vant/issues/691)
-* fix Badge info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
+* fix Sidebar info font weight when selected [\#687](https://github.com/youzan/vant/pull/687)
 
 
 ## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
@@ -1652,7 +1652,7 @@ Also we have optimized the UI of the following components:：
 * Search: support native input attrs [\#418](https://github.com/youzan/vant/pull/418)
 * CellGroup: add 'border' prop [\#420](https://github.com/youzan/vant/pull/420)
 * AddressEdit: add focus、change-area、select-search events [\#426](https://github.com/youzan/vant/pull/426)
-* Badge、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419)
+* Sidebar、CouponList、ContactCard: add active color [\#419](https://github.com/youzan/vant/pull/419)
 
 **Bug Fixes**
 
@@ -1781,7 +1781,7 @@ Also we have optimized the UI of the following components:：
 
 **Improvements**
 
-* Actionsheet: update close icon style [\#340](https://github.com/youzan/vant/pull/340)
+* ActionSheet: update close icon style [\#340](https://github.com/youzan/vant/pull/340)
 * Popup: add overlayClass and overlayStyle props [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343)
 * Icon: adjust unicode for better display [\#330](https://github.com/youzan/vant/pull/330)
 * ImagePreview: support manually close [\#346](https://github.com/youzan/vant/pull/346)

docs/markdown/changelog.zh-CN.md

@@ -34,7 +34,7 @@
 - Tabbar: 新增 safe-area-inset-bottom 属性 [\#3149](https://github.com/youzan/vant/pull/3149)
 - SubmitBar: 新增 safe-area-inset-bottom 属性 [\#3172](https://github.com/youzan/vant/pull/3172)
 - GoodsAction: 新增 safe-area-inset-bottom 属性 [\#3174](https://github.com/youzan/vant/pull/3174)
-- Actionsheet: 新增 safe-area-inset-bottom 属性 [\#3171](https://github.com/youzan/vant/pull/3171)
+- ActionSheet: 新增 safe-area-inset-bottom 属性 [\#3171](https://github.com/youzan/vant/pull/3171)
 - NumberKeyboard: 新增 safe-area-inset-bottom 属性 [\#3173](https://github.com/youzan/vant/pull/3173)
 
 **Bug Fixes**
@@ -55,7 +55,7 @@
 - Cell: 新增多个 Less 变量 [\#3122](https://github.com/youzan/vant/pull/3122)
 - Rate: 新增多个 Less 变量 [\#3135](https://github.com/youzan/vant/pull/3135)
 - Panel: 新增多个 Less 变量 [\#3136](https://github.com/youzan/vant/pull/3136)
-- Badge: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131)
+- Sidebar: 新增多个 Less 变量 [\#3131](https://github.com/youzan/vant/pull/3131)
 - Dialog: 新增多个 Less 变量 [\#3123](https://github.com/youzan/vant/pull/3123)
 - Slider: 新增多个 Less 变量 [\#3125](https://github.com/youzan/vant/pull/3125)
 - Tabbar: 新增多个 Less 变量 [\#3124](https://github.com/youzan/vant/pull/3124)
@@ -89,7 +89,7 @@
 
 **Improvements**
 
-- Actionsheet: 新增 less 变量 [\#3049](https://github.com/youzan/vant/pull/3049)
+- ActionSheet: 新增 less 变量 [\#3049](https://github.com/youzan/vant/pull/3049)
 
 **Bug Fixes**
 
@@ -112,7 +112,7 @@
 - NoticeBar: 新增 wrapable 属性 [\#2992](https://github.com/youzan/vant/pull/2992)
 - Field: 新增 error-message-align 属性 [\#3016](https://github.com/youzan/vant/pull/3016)
 - Sku: 支持在初始化时设置选中商品数量 [\#3045](https://github.com/youzan/vant/pull/3045)
-- Actionsheet: 支持同时设置默认插槽和 cancel-text [\#3021](https://github.com/youzan/vant/pull/3021)
+- ActionSheet: 支持同时设置默认插槽和 cancel-text [\#3021](https://github.com/youzan/vant/pull/3021)
 
 **Bug Fixes**
 
@@ -152,7 +152,7 @@
 - CellGroup: 新增 title 属性 [\#2928](https://github.com/youzan/vant/pull/2928)
 - Steps: 新增 active-icon 属性 [\#2934](https://github.com/youzan/vant/pull/2934)
 - Picker: 新增 default-index 属性 [\#2935](https://github.com/youzan/vant/pull/2935)
-- Actionsheet: 新增 index 作为 select 事件的回调参数 [\#2917](https://github.com/youzan/vant/pull/2917)
+- ActionSheet: 新增 index 作为 select 事件的回调参数 [\#2917](https://github.com/youzan/vant/pull/2917)
 
 **Bug Fixes**
 
@@ -188,8 +188,8 @@
 
 **Bug Fixes**
 
-- 修复 Actionsheet lazy-render 属性不生效的问题 [\#2840](https://github.com/youzan/vant/pull/2840)
-- 修复 Actionsheet get-container 属性不生效的问题 [\#2853](https://github.com/youzan/vant/pull/2853)
+- 修复 ActionSheet lazy-render 属性不生效的问题 [\#2840](https://github.com/youzan/vant/pull/2840)
+- 修复 ActionSheet get-container 属性不生效的问题 [\#2853](https://github.com/youzan/vant/pull/2853)
 - 修复 Tab 初始化时导航栏未自动滚动到当前标签位置的问题 [\#2857](https://github.com/youzan/vant/pull/2857)
 - 修复 Checkbox 与 Cell 组件嵌套用法在 Vue 2.6+ 上的兼容问题 [\#2855](https://github.com/youzan/vant/pull/2855)
 - 修复 CouponList 不可用券列表为空时展示错误的问题 [\#2845](https://github.com/youzan/vant/pull/2845)
@@ -555,7 +555,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 - Tab: 新增 animated 属性 [\#2126](https://github.com/youzan/vant/pull/2126)
 - Tab: 更新标题栏样式 [\#2120](https://github.com/youzan/vant/pull/2120)
-- Badge: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122)
+- Sidebar: 更新提示样式 [\#2122](https://github.com/youzan/vant/pull/2122)
 - Radio: 新增 checked-color 属性 [\#2129](https://github.com/youzan/vant/pull/2129)
 - Swipe: 新增 indica为r-color 属性 [\#2110](https://github.com/youzan/vant/pull/2110)
 - TreeSelect: 支持禁用选项 [\#2107](https://github.com/youzan/vant/pull/2107)
@@ -616,7 +616,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 - i18n: 支持土耳其语 [\#1998](https://github.com/youzan/vant/pull/1998)
 - i18n: 支持繁体中文（台） [\#1999](https://github.com/youzan/vant/pull/1999)
 - Icon: 新增 question2 图标 [\#2005](https://github.com/youzan/vant/pull/2005)
-- Badge: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017)
+- Sidebar: 新增 change 事件 [\#2017](https://github.com/youzan/vant/pull/2017)
 - Switch: 新增 active-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
 - Switch: 新增 inactive-color 属性 [\#2013](https://github.com/youzan/vant/pull/2013)
 - Radio: 选中态颜色调整为蓝色 [\#2018](https://github.com/youzan/vant/pull/2018)
@@ -710,7 +710,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 **Improvements**
 
 - Tab: 样式升级 [\#1908](https://github.com/youzan/vant/pull/1908)
-- Badge: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907)
+- Sidebar: 样式升级 [\#1907](https://github.com/youzan/vant/pull/1907)
 - Dialog: 样式升级 [\#1906](https://github.com/youzan/vant/pull/1906)
 - NoticeBar: 样式升级 [\#1893](https://github.com/youzan/vant/pull/1893)
 - Collapse: 新增 disabled 属性 [\#1892](https://github.com/youzan/vant/pull/1892)
@@ -875,14 +875,14 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Improvements**
 
-- Actionsheet: 新增 select 事件 [\#1594](https://github.com/youzan/vant/pull/1594)
+- ActionSheet: 新增 select 事件 [\#1594](https://github.com/youzan/vant/pull/1594)
 - ImagePreview: 支持传入 onClose 回调函数 [\#1589](https://github.com/youzan/vant/pull/1589)
 - List: 新增 check 方法 [\#1590](https://github.com/youzan/vant/pull/1590)
 - Search: 优化样式结构 [\#1603](https://github.com/youzan/vant/pull/1603)
 
 **Bug Fixes**
 
-- 修复 Actionsheet 选项加载中时仍然有点击态的问题 [\#1587](https://github.com/youzan/vant/pull/1587)
+- 修复 ActionSheet 选项加载中时仍然有点击态的问题 [\#1587](https://github.com/youzan/vant/pull/1587)
 - 修复 DatetimePicker 使用 formatter 时默认值错误的问题 [\#1591](https://github.com/youzan/vant/pull/1591)
 
 
@@ -970,7 +970,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Improvements**
 
-- Actionsheet: 支持 lazy-render [\#1365](https://github.com/youzan/vant/pull/1365)
+- ActionSheet: 支持 lazy-render [\#1365](https://github.com/youzan/vant/pull/1365)
 - AddressEdit: 优化事件触发顺序 [\#1402](https://github.com/youzan/vant/pull/1402)
 - SwitchCell: 新增 size 属性 [\#1371](https://github.com/youzan/vant/pull/1371)
 - Checkbox: 新增 label-position 属性 [\#1394](https://github.com/youzan/vant/pull/1394)
@@ -1015,7 +1015,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Improvements**
 
-- Actionsheet: 支持禁用选项 [\#1293](https://github.com/youzan/vant/pull/1293)
+- ActionSheet: 支持禁用选项 [\#1293](https://github.com/youzan/vant/pull/1293)
 - Field: 支持展示清除控件 [\#1309](https://github.com/youzan/vant/pull/1309)
 - Layout: 支持 Flex 布局 [\#1305](https://github.com/youzan/vant/pull/1305)
 - Locale: 新增 TS 类型定义 [\#1294](https://github.com/youzan/vant/pull/1294)
@@ -1046,7 +1046,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Bug Fixes**
 
-- 修复 Actionsheet 在 rem 布局下标题文字大小错误的问题 [\#1267](https://github.com/youzan/vant/pull/1267)
+- 修复 ActionSheet 在 rem 布局下标题文字大小错误的问题 [\#1267](https://github.com/youzan/vant/pull/1267)
 - 修复 CheckboxGroup v-model 类型检查错误 [\#1254](https://github.com/youzan/vant/pull/1254)
 - 修复 Tab 标题长度变化时底部条未重新渲染的问题 [\#1260](https://github.com/youzan/vant/pull/1260)
 - 修复 Popup 内容过高时超出屏幕可视范围的问题 [\#1256](https://github.com/youzan/vant/pull/1256)
@@ -1269,8 +1269,8 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Improvements**
 
-- Actionsheet: 新增 cancel 事件 [\#796](https://github.com/youzan/vant/pull/796)
-- Actionsheet: 增加最大高度限制 [\#777](https://github.com/youzan/vant/pull/777)
+- ActionSheet: 新增 cancel 事件 [\#796](https://github.com/youzan/vant/pull/796)
+- ActionSheet: 增加最大高度限制 [\#777](https://github.com/youzan/vant/pull/777)
 - DatetimePicker: 支持所有 picker 组件配置 [\#788](https://github.com/youzan/vant/pull/788)
 - SubmitBar: 统一文字大小 [\#774](https://github.com/youzan/vant/pull/774)
 - i18n: 支持 zh-HK 语言 [\#812](https://github.com/youzan/vant/pull/812)
@@ -1353,10 +1353,10 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Bug Fixes**
 
-* 修复 Actionsheet 下边框未展示的问题 [\#686](https://github.com/youzan/vant/pull/686)
+* 修复 ActionSheet 下边框未展示的问题 [\#686](https://github.com/youzan/vant/pull/686)
 * 修复 AddressEdit 在数据变更时未正确选中省市区的问题 [\#680](https://github.com/youzan/vant/pull/680)
 * 修复 Stepper value 溢出的问题 [\#691](https://github.com/youzan/vant/issues/691)
-* 修复 Badge 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687)
+* 修复 Sidebar 选中时字体粗细 [\#687](https://github.com/youzan/vant/pull/687)
 
 ## [v0.12.14](https://github.com/youzan/vant/tree/v0.12.14)
 `2018-03-09`
@@ -1644,7 +1644,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 * Search: 支持 input 标签原生属性 [\#418](https://github.com/youzan/vant/pull/418)
 * CellGroup: 新增 'border' 属性 [\#420](https://github.com/youzan/vant/pull/420)
 * AddressEdit: 新增 focus、change-area、select-search 事件 [\#426](https://github.com/youzan/vant/pull/426)
-* Badge、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419)
+* Sidebar、CouponList、ContactCard: 增加点击反馈 [\#419](https://github.com/youzan/vant/pull/419)
 
 **Bug Fixes**
 
@@ -1774,7 +1774,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 
 **Improvements**
 
-* Actionsheet: 更新关闭按钮样式 [\#340](https://github.com/youzan/vant/pull/340)
+* ActionSheet: 更新关闭按钮样式 [\#340](https://github.com/youzan/vant/pull/340)
 * Popup: 新增 overlayClass、overlayStyle 属性 [\#349](https://github.com/youzan/vant/pull/349) [\#343](https://github.com/youzan/vant/pull/343)
 * Icon: 调整 unicode，避免展示特殊字符 [\#330](https://github.com/youzan/vant/pull/330)
 * ImagePreview: 支持手动关闭 [\#346](https://github.com/youzan/vant/pull/346)
@@ -2126,7 +2126,7 @@ PS: 不小心跳过了 1.4.6 版本  ^_^
 * 新增 GoodsAction 组件 [\#102](https://github.com/youzan/vant/pull/102)
 * 新增 OrderGoods 组件 [\#99](https://github.com/youzan/vant/pull/99)
 * 新增 PayOrder 组件 [\#98](https://github.com/youzan/vant/pull/98)
-* 优化 Step、Loading、Tag、Badge 文档 [\#101](https://github.com/youzan/vant/pull/101)
+* 优化 Step、Loading、Tag、Sidebar 文档 [\#101](https://github.com/youzan/vant/pull/101)
 * Checkbox: 支持 change 事件 [\#104](https://github.com/youzan/vant/pull/104)
 
 **Bug Fixes**

docs/markdown/v2-progress-tracking.md

@@ -0,0 +1,52 @@
+## Vant 2.0 改动一览
+
+## 不兼容更新
+
+在 2.0 版本中，我们对组件和 API 进行重命名，以更加符合业界的命名规范，同时移除了少量不常用的属性，具体改动如下：
+
+### Actionsheet
+
+- [x] 重命名为`ActionSheet`
+
+### Button
+
+- [x] 移除`bottom-action`属性，请使用`square`和`size`代替
+
+### Field
+
+- [x] 移除`on-icon-click`属性，请使用`click-right-icon`事件代替
+- [x] `icon`属性重命名为`right-icon`
+- [x] `icon`插槽重命名为`right-icon`
+- [x] `click-icon`事件重命名为`click-right-icon`
+
+### GoodsAction
+
+- [x] `GoodsActionBigBtn`重命名为`GoodsActionButton`
+- [x] `GoodsActionMiniBtn`重命名为`GoodsActionIcon`
+- [x] `GoodsActionBigBtn`移除`primary`属性，请使用`type`属性代替
+
+### Step
+
+- [x] 移除`icon`属性
+- [x] 移除`title`属性
+- [x] 移除`icon-class`属性
+- [x] 移除`description`属性
+- [x] 移除`message-extra`插槽
+
+### Badge
+
+- [x] `BadgeGroup`重命名为`Sidebar`
+- [x] `Badge`重命名为`SlideBarItem`
+
+### Loading
+
+- [x] 移除`circle`类型
+- [x] 移除`gradient-circle`类型
+
+### Waterfall
+
+- [x] 彻底移除在 1.0 版本废弃的 Waterfall 组件，请使用`List`组件代替，或使用独立的[@vant/waterfall](https://github.com/chenjiahan/vant-waterfall)包。
+
+## 新特性
+
+TODO

docs/src/demo-entry.js

@@ -3,11 +3,10 @@
 import { wrapper } from './demo-common';
 
 export default {
-  'actionsheet': () => wrapper(import('../../packages/actionsheet/demo'), 'actionsheet'),
+  'action-sheet': () => wrapper(import('../../packages/action-sheet/demo'), 'action-sheet'),
   'address-edit': () => wrapper(import('../../packages/address-edit/demo'), 'address-edit'),
   'address-list': () => wrapper(import('../../packages/address-list/demo'), 'address-list'),
   'area': () => wrapper(import('../../packages/area/demo'), 'area'),
-  'badge': () => wrapper(import('../../packages/badge/demo'), 'badge'),
   'button': () => wrapper(import('../../packages/button/demo'), 'button'),
   'card': () => wrapper(import('../../packages/card/demo'), 'card'),
   'cell': () => wrapper(import('../../packages/cell/demo'), 'cell'),
@@ -40,6 +39,7 @@ export default {
   'radio': () => wrapper(import('../../packages/radio/demo'), 'radio'),
   'rate': () => wrapper(import('../../packages/rate/demo'), 'rate'),
   'search': () => wrapper(import('../../packages/search/demo'), 'search'),
+  'sidebar': () => wrapper(import('../../packages/sidebar/demo'), 'sidebar'),
   'sku': () => wrapper(import('../../packages/sku/demo'), 'sku'),
   'slider': () => wrapper(import('../../packages/slider/demo'), 'slider'),
   'stepper': () => wrapper(import('../../packages/stepper/demo'), 'stepper'),
@@ -55,6 +55,5 @@ export default {
   'tag': () => wrapper(import('../../packages/tag/demo'), 'tag'),
   'toast': () => wrapper(import('../../packages/toast/demo'), 'toast'),
   'tree-select': () => wrapper(import('../../packages/tree-select/demo'), 'tree-select'),
-  'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader'),
-  'waterfall': () => wrapper(import('../../packages/waterfall/demo'), 'waterfall')
+  'uploader': () => wrapper(import('../../packages/uploader/demo'), 'uploader')
 };

docs/src/doc.config.js

@@ -168,8 +168,8 @@ module.exports = {
             icon: 'passed',
             list: [
               {
-                path: '/actionsheet',
-                title: 'Actionsheet 上拉菜单'
+                path: '/action-sheet',
+                title: 'ActionSheet 上拉菜单'
               },
               {
                 path: '/dialog',
@@ -251,10 +251,6 @@ module.exports = {
             groupName: '导航组件',
             icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
-              {
-                path: '/badge',
-                title: 'Badge 徽章'
-              },
               {
                 path: '/nav-bar',
                 title: 'NavBar 导航栏'
@@ -263,6 +259,10 @@ module.exports = {
                 path: '/pagination',
                 title: 'Pagination 分页'
               },
+              {
+                path: '/sidebar',
+                title: 'Sidebar 侧边导航'
+              },
               {
                 path: '/tab',
                 title: 'Tab 标签页'
@@ -475,8 +475,8 @@ module.exports = {
             icon: 'passed',
             list: [
               {
-                path: '/actionsheet',
-                title: 'Actionsheet'
+                path: '/action-sheet',
+                title: 'ActionSheet'
               },
               {
                 path: '/dialog',
@@ -558,10 +558,6 @@ module.exports = {
             groupName: 'Navigation Components',
             icon: 'https://img.yzcdn.cn/vant/nav-0401.svg',
             list: [
-              {
-                path: '/badge',
-                title: 'Badge'
-              },
               {
                 path: '/nav-bar',
                 title: 'NavBar'
@@ -570,6 +566,10 @@ module.exports = {
                 path: '/pagination',
                 title: 'Pagination'
               },
+              {
+                path: '/sidebar',
+                title: 'Sidebar'
+              },
               {
                 path: '/tab',
                 title: 'Tab'

docs/src/docs-entry.js

@@ -12,16 +12,15 @@ export default {
   'style-guide.zh-CN': () => import('../markdown/style-guide.zh-CN.md'),
   'theme.en-US': () => import('../markdown/theme.en-US.md'),
   'theme.zh-CN': () => import('../markdown/theme.zh-CN.md'),
-  'actionsheet.en-US': () => import('../../packages/actionsheet/en-US.md'),
-  'actionsheet.zh-CN': () => import('../../packages/actionsheet/zh-CN.md'),
+  'v2-progress-tracking': () => import('../markdown/v2-progress-tracking.md'),
+  'action-sheet.en-US': () => import('../../packages/action-sheet/en-US.md'),
+  'action-sheet.zh-CN': () => import('../../packages/action-sheet/zh-CN.md'),
   'address-edit.en-US': () => import('../../packages/address-edit/en-US.md'),
   'address-edit.zh-CN': () => import('../../packages/address-edit/zh-CN.md'),
   'address-list.en-US': () => import('../../packages/address-list/en-US.md'),
   'address-list.zh-CN': () => import('../../packages/address-list/zh-CN.md'),
   'area.en-US': () => import('../../packages/area/en-US.md'),
   'area.zh-CN': () => import('../../packages/area/zh-CN.md'),
-  'badge.en-US': () => import('../../packages/badge/en-US.md'),
-  'badge.zh-CN': () => import('../../packages/badge/zh-CN.md'),
   'button.en-US': () => import('../../packages/button/en-US.md'),
   'button.zh-CN': () => import('../../packages/button/zh-CN.md'),
   'card.en-US': () => import('../../packages/card/en-US.md'),
@@ -88,6 +87,8 @@ export default {
   'rate.zh-CN': () => import('../../packages/rate/zh-CN.md'),
   'search.en-US': () => import('../../packages/search/en-US.md'),
   'search.zh-CN': () => import('../../packages/search/zh-CN.md'),
+  'sidebar.en-US': () => import('../../packages/sidebar/en-US.md'),
+  'sidebar.zh-CN': () => import('../../packages/sidebar/zh-CN.md'),
   'sku.en-US': () => import('../../packages/sku/en-US.md'),
   'sku.zh-CN': () => import('../../packages/sku/zh-CN.md'),
   'slider.en-US': () => import('../../packages/slider/en-US.md'),
@@ -119,7 +120,5 @@ export default {
   'tree-select.en-US': () => import('../../packages/tree-select/en-US.md'),
   'tree-select.zh-CN': () => import('../../packages/tree-select/zh-CN.md'),
   'uploader.en-US': () => import('../../packages/uploader/en-US.md'),
-  'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md'),
-  'waterfall.en-US': () => import('../../packages/waterfall/en-US.md'),
-  'waterfall.zh-CN': () => import('../../packages/waterfall/zh-CN.md')
+  'uploader.zh-CN': () => import('../../packages/uploader/zh-CN.md')
 };

jest.config.js

@@ -15,8 +15,7 @@ module.exports = {
     '!**/style/**',
     '!**/demo/**',
     '!**/locale/lang/**',
-    '!**/sku/**',
-    '!**/waterfall/**'
+    '!**/sku/**'
   ],
   collectCoverage: true,
   coverageReporters: ['html', 'lcov', 'text-summary'],

packages/action-sheet/demo/index.vue

@@ -2,7 +2,7 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-button @click="show1 = true">{{ $t('button1') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show1"
         :actions="actions"
         @select="onSelect"
@@ -11,7 +11,7 @@
 
     <demo-block :title="$t('title2')">
       <van-button @click="show2 = true">{{ $t('button2') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show2"
         :actions="actions"
         :cancel-text="$t('cancel')"
@@ -22,12 +22,12 @@
 
     <demo-block :title="$t('title3')">
       <van-button @click="show3 = true">{{ $t('button3') }}</van-button>
-      <van-actionsheet
+      <van-action-sheet
         v-model="show3"
         :title="$t('title')"
       >
         <p>{{ $t('content') }}</p>
-      </van-actionsheet>
+      </van-action-sheet>
     </demo-block>
   </demo-section>
 </template>
@@ -36,20 +36,20 @@
 export default {
   i18n: {
     'zh-CN': {
-      button1: '弹出 Actionsheet',
-      button2: '弹出带取消按钮的 Actionsheet',
-      button3: '弹出带标题的 Actionsheet',
-      title2: '带取消按钮的 Actionsheet',
-      title3: '带标题的 Actionsheet',
+      button1: '弹出 ActionSheet',
+      button2: '弹出带取消按钮的 ActionSheet',
+      button3: '弹出带标题的 ActionSheet',
+      title2: '带取消按钮的 ActionSheet',
+      title3: '带标题的 ActionSheet',
       description: '描述信息',
       disabledOption: '禁用选项'
     },
     'en-US': {
-      button1: 'Show Actionsheet',
-      button2: 'Show Actionsheet with cancel button',
-      button3: 'Show Actionsheet with title',
-      title2: 'Actionsheet with cancel button',
-      title3: 'Actionsheet with title',
+      button1: 'Show ActionSheet',
+      button2: 'Show ActionSheet with cancel button',
+      button3: 'Show ActionSheet with title',
+      title2: 'ActionSheet with cancel button',
+      title3: 'ActionSheet with title',
       description: 'Description',
       disabledOption: 'Disabled Option'
     }
@@ -89,7 +89,7 @@ export default {
 </script>
 
 <style lang="less">
-.demo-actionsheet {
+.demo-action-sheet {
   .van-button {
     margin-left: 15px;
   }

packages/action-sheet/en-US.md

@@ -1,19 +1,19 @@
-## Actionsheet
+## ActionSheet
 
 ### Install
 ``` javascript
-import { Actionsheet } from 'vant';
+import { ActionSheet } from 'vant';
 
-Vue.use(Actionsheet);
+Vue.use(ActionSheet);
 ```
 
 ### Usage
 
 #### Basic Usage
-Use `actions` prop to set options of actionsheet. 
+Use `actions` prop to set options of action-sheet. 
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   @select="onSelect"
@@ -53,10 +53,10 @@ export default {
 }
 ```
 
-#### Actionsheet with cancel button
+#### ActionSheet with cancel button
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="Cancel"
@@ -65,13 +65,13 @@ export default {
 />
 ```
 
-#### Actionsheet with title
-Actionsheet will get another style if there is a `title` prop.
+#### ActionSheet with title
+ActionSheet will get another style if there is a `title` prop.
 
 ```html
-<van-actionsheet v-model="show" title="Title">
+<van-action-sheet v-model="show" title="Title">
   <p>Content</p>
-</van-actionsheet>
+</van-action-sheet>
 ```
 
 ### API
@@ -84,7 +84,7 @@ Actionsheet will get another style if there is a `title` prop.
 | overlay | Whether to show overlay | `Boolean` | `true` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
-| get-container | Return the mount node for actionsheet | `String | () => HTMLElement` | - |
+| get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
 ### Event

packages/action-sheet/index.less

@@ -1,6 +1,6 @@
 @import '../style/var';
 
-.van-actionsheet {
+.van-action-sheet {
   color: @action-sheet-item-text-color;
   max-height: @action-sheet-max-height;
 

packages/action-sheet/index.tsx

@@ -10,29 +10,29 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 import { PopupMixinProps } from '../mixins/popup/type';
 
-export type ActionsheetItem = {
+export type ActionSheetItem = {
   name: string;
   subname?: string;
   loading?: boolean;
   disabled?: boolean;
   className?: string;
-  callback?: (item: ActionsheetItem) => void;
+  callback?: (item: ActionSheetItem) => void;
 };
 
-export type ActionsheetProps = PopupMixinProps & {
+export type ActionSheetProps = PopupMixinProps & {
   title?: string;
-  actions: ActionsheetItem[];
+  actions: ActionSheetItem[];
   cancelText?: string;
   safeAreaInsetBottom?: boolean;
 };
 
-const [sfc, bem] = use('actionsheet');
+const [sfc, bem] = use('action-sheet');
 
-function Actionsheet(
+function ActionSheet(
   h: CreateElement,
-  props: ActionsheetProps,
+  props: ActionSheetProps,
   slots: DefaultSlots,
-  ctx: RenderContext<ActionsheetProps>
+  ctx: RenderContext<ActionSheetProps>
 ) {
   const { title, cancelText } = props;
 
@@ -48,7 +48,7 @@ function Actionsheet(
     </div>
   );
 
-  const Option = (item: ActionsheetItem, index: number) => (
+  const Option = (item: ActionSheetItem, index: number) => (
     <div
       class={[
         bem('item', { disabled: item.disabled || item.loading }),
@@ -103,7 +103,7 @@ function Actionsheet(
   );
 }
 
-Actionsheet.props = {
+ActionSheet.props = {
   ...PopupMixin.props,
   title: String,
   actions: Array,
@@ -119,4 +119,4 @@ Actionsheet.props = {
   }
 };
 
-export default sfc<ActionsheetProps>(Actionsheet);
+export default sfc<ActionSheetProps>(ActionSheet);

packages/action-sheet/test/__snapshots__/demo.spec.js.snap

@@ -2,13 +2,13 @@
 
 exports[`renders demo correctly 1`] = `
 <div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出 ActionSheet</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带取消按钮的 ActionSheet</span></button>
     <!---->
   </div>
-  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 Actionsheet</span></button>
+  <div><button class="van-button van-button--default van-button--normal"><span class="van-button__text">弹出带标题的 ActionSheet</span></button>
     <!---->
   </div>
 </div>

packages/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`callback events 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__cancel">Cancel</div>
+</div>
+`;
+
+exports[`disable lazy-render 1`] = `
+<div class="van-popup van-popup--bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></div>
+  <div class="van-action-sheet__cancel">Cancel</div>
+</div>
+`;

packages/action-sheet/test/index.spec.js

@@ -1,5 +1,5 @@
 import { mount } from '../../../test/utils';
-import Actionsheet from '..';
+import ActionSheet from '..';
 
 test('callback events', () => {
   const callback = jest.fn();
@@ -12,7 +12,7 @@ test('callback events', () => {
     { name: 'Option', disabled: true }
   ];
 
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       value: true,
       actions,
@@ -27,10 +27,10 @@ test('callback events', () => {
     }
   });
 
-  const options = wrapper.findAll('.van-actionsheet__item');
+  const options = wrapper.findAll('.van-action-sheet__item');
   options.at(0).trigger('click');
   options.at(1).trigger('click');
-  wrapper.find('.van-actionsheet__cancel').trigger('click');
+  wrapper.find('.van-action-sheet__cancel').trigger('click');
 
   expect(callback).toHaveBeenCalled();
   expect(onCancel).toHaveBeenCalled();
@@ -40,7 +40,7 @@ test('callback events', () => {
 });
 
 test('disable lazy-render', () => {
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       lazyRender: false,
       actions: [
@@ -55,7 +55,7 @@ test('disable lazy-render', () => {
 });
 
 test('get container', () => {
-  const wrapper = mount(Actionsheet, {
+  const wrapper = mount(ActionSheet, {
     propsData: {
       value: true,
       getContainer: 'body'

packages/action-sheet/zh-CN.md

@@ -1,10 +1,10 @@
-## Actionsheet 上拉菜单
+## ActionSheet 上拉菜单
 
 ### 使用指南
 ``` javascript
-import { Actionsheet } from 'vant';
+import { ActionSheet } from 'vant';
 
-Vue.use(Actionsheet);
+Vue.use(ActionSheet);
 ```
 
 ### 代码演示
@@ -14,7 +14,7 @@ Vue.use(Actionsheet);
 需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   @select="onSelect"
@@ -55,12 +55,12 @@ export default {
 }
 ```
 
-#### 带取消按钮的 Actionsheet
+#### 带取消按钮的 ActionSheet
 
-如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。
+如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`ActionSheet`关闭。
 
 ```html
-<van-actionsheet
+<van-action-sheet
   v-model="show"
   :actions="actions"
   cancel-text="取消"
@@ -69,14 +69,14 @@ export default {
 />
 ```
 
-#### 带标题的 Actionsheet
+#### 带标题的 ActionSheet
 
-如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。
+如果传入了`title`属性，且不为空，则另外一种样式的`ActionSheet`，里面内容需要自定义。
 
 ```html
-<van-actionsheet v-model="show" title="支持以下配送方式">
+<van-action-sheet v-model="show" title="支持以下配送方式">
   <p>一些内容</p>
-</van-actionsheet>
+</van-action-sheet>
 ```
 
 ### API

packages/actionsheet/test/__snapshots__/index.spec.js.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`callback events 1`] = `
-<div class="van-popup van-popup--bottom van-actionsheet" name="van-popup-slide-bottom">
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__item van-actionsheet__item--disabled van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__cancel">Cancel</div>
-</div>
-`;
-
-exports[`disable lazy-render 1`] = `
-<div class="van-popup van-popup--bottom van-actionsheet" style="display: none;" name="van-popup-slide-bottom">
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__item van-hairline--top"><span class="van-actionsheet__name">Option</span></div>
-  <div class="van-actionsheet__cancel">Cancel</div>
-</div>
-`;

packages/address-edit/test/__snapshots__/index.spec.js.snap

@@ -38,7 +38,7 @@ exports[`create a AddressEdit 1`] = `
         <div class="van-picker__confirm">确认</div>
       </div>
       <div class="van-picker__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+        <div class="van-loading van-loading--circular" style="color:#c9c9c9;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
       </div>
       <div class="van-picker__columns" style="height:220px;">
         <div class="van-picker-column" style="height:220px;">

packages/badge-group/index.less

@@ -1,5 +0,0 @@
-@import '../style/var';
-
-.badge-group {
-  width: @badge-group-width;
-}

packages/badge/en-US.md

@@ -1,65 +0,0 @@
-## Badge
-
-### Install
-``` javascript
-import { Badge, BadgeGroup } from 'vant';
-
-Vue.use(Badge);
-Vue.use(BadgeGroup);
-```
-
-### Usage
-
-#### Basic Usage
-Use `active-key` prop to set index of chosen 'badge'
-
-```html
-<van-badge-group :active-key="activeKey" @change="onChange">
-  <van-badge title="Title" />
-  <van-badge title="Title" info="8" />
-  <van-badge title="Title" info="99" />
-  <van-badge title="Title" info="99+" />
-</van-badge-group>
-```
-
-``` javascript
-export default {
-  data() {
-    return {
-      activeKey: 0
-    };
-  },
-
-  methods: {
-    onChange(key) {
-      this.activeKey = key;
-    }
-  }
-};
-```
-
-### BadgeGroup API
-
-| Attribute | Description | Type | Default |
-|------|------|------|------|
-| active-key | Index of chosen badge | `String | Number` | `0` |
-
-### BadgeGroup Event
-
-| Event | Description | Arguments |
-|------|------|------|
-| change | Triggered when badge changed | key: index of current badge |
-
-### Badge API
-
-| Attribute | Description | Type | Default |
-|------|------|------|------|
-| title | Content | `String` | `''` |
-| info | Info Message | `String | Number` | `''` |
-| url | Link | `String` | - |
-
-### Badge Event
-
-| Event | Description | Arguments |
-|------|------|------|
-| click | Triggered when click badge | key: index of current badge |

packages/badge/index.less

@@ -1,46 +0,0 @@
-@import '../style/var';
-
-.van-badge {
-  display: block;
-  overflow: hidden;
-  user-select: none;
-  word-break: break-all;
-  box-sizing: border-box;
-  color: @badge-text-color;
-  padding: @badge-padding;
-  font-size: @badge-font-size;
-  line-height: @badge-line-height;
-  background-color: @badge-background-color;
-  border-left: 3px solid transparent;
-
-  &__text {
-    position: relative;
-  }
-
-  &:active {
-    background-color: @badge-active-color;
-  }
-
-  &:not(:last-child)::after {
-    border-bottom-width: 1px;
-  }
-
-  &--select {
-    color: @badge-selected-text-color;
-    font-weight: @badge-selected-font-weight;
-    border-color: @badge-selected-border-color;
-
-    &::after {
-      border-right-width: 1px;
-    }
-
-    &,
-    &:active {
-      background-color: @badge-selected-background-color;
-    }
-  }
-
-  .van-info {
-    right: 4px;
-  }
-}

packages/badge/test/__snapshots__/demo.spec.js.snap

@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders demo correctly 1`] = `
-<div>
-  <div>
-    <div class="van-badge-group van-hairline--top-bottom"><a class="van-badge van-badge--select van-hairline">
-        <div class="van-badge__text">标签名称
-          <!---->
-        </div>
-      </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">8</div>
-        </div>
-      </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">99</div>
-        </div>
-      </a> <a class="van-badge van-hairline">
-        <div class="van-badge__text">标签名称<div class="van-info van-badge__info">99+</div>
-        </div>
-      </a></div>
-  </div>
-</div>
-`;

packages/badge/zh-CN.md

@@ -1,66 +0,0 @@
-## Badge 徽章
-
-### 使用指南
-``` javascript
-import { Badge, BadgeGroup } from 'vant';
-
-Vue.use(Badge);
-Vue.use(BadgeGroup);
-```
-
-### 代码演示
-
-#### 基础用法
-
-通过在`van-badge-group`上设置`active-key`属性来控制选中的`badge`
-
-```html
-<van-badge-group :active-key="activeKey" @change="onChange">
-  <van-badge title="标签名称" />
-  <van-badge title="标签名称" info="8" />
-  <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" info="99+" />
-</van-badge-group>
-```
-
-``` javascript
-export default {
-  data() {
-    return {
-      activeKey: 0
-    };
-  },
-
-  methods: {
-    onChange(key) {
-      this.activeKey = key;
-    }
-  }
-};
-```
-
-### BadgeGroup API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| active-key | 选中`badge`的索引 | `String | Number` | `0` | - |
-
-### BadgeGroup Event
-
-| 事件名 | 说明 | 参数 |
-|------|------|------|
-| change | 切换徽章时触发 | key: 当前选中徽章的索引 |
-
-### Badge API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| title | 内容 | `String` | `''` | - |
-| info | 提示消息 | `String | Number` | `''` | - |
-| url | 跳转链接 | `String` | - | - |
-
-### Badge Event
-
-| 事件名 | 说明 | 参数 |
-|------|------|------|
-| click | 点击徽章时触发 | key: 当前徽章的索引 |

packages/button/index.less

@@ -131,21 +131,6 @@
     display: block;
   }
 
-  &--bottom-action {
-    border: 0;
-    width: 100%;
-    height: 50px;
-    font-size: 16px;
-    line-height: 50px;
-    border-radius: 0;
-    color: @button-bottom-action-default-color;
-    background-color: @button-bottom-action-default-background-color;
-
-    &.van-button--primary {
-      background-color: @button-bottom-action-primary-background-color;
-    }
-  }
-
   &--disabled {
     opacity: @button-disabled-opacity;
   }

packages/button/index.tsx

@@ -26,7 +26,6 @@ export type ButtonProps = RouteProps & {
   nativeType?: string;
   loadingSize: string;
   loadingText?: string;
-  bottomAction?: boolean;
 };
 
 export type ButtonEvents = {
@@ -65,8 +64,7 @@ function Button(
         block: props.block,
         plain: props.plain,
         round: props.round,
-        square: props.square,
-        'bottom-action': props.bottomAction
+        square: props.square
       }
     ]),
     { 'van-hairline--surround': hairline }
@@ -108,7 +106,6 @@ Button.props = {
   disabled: Boolean,
   nativeType: String,
   loadingText: String,
-  bottomAction: Boolean,
   tag: {
     type: String,
     default: 'button'

packages/button/test/__snapshots__/index.spec.js.snap

@@ -2,6 +2,6 @@
 
 exports[`loading size 1`] = `
 <button class="van-button van-button--default van-button--normal van-button--loading">
-  <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+  <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
 </button>
 `;

packages/field/index.js

@@ -20,7 +20,6 @@ export default sfc({
     labelWidth: [String, Number],
     labelAlign: String,
     inputAlign: String,
-    onIconClick: Function,
     autosize: [Boolean, Object],
     errorMessage: String,
     errorMessageAlign: String,
@@ -130,10 +129,7 @@ export default sfc({
     },
 
     onClickRightIcon() {
-      // compatible old version
-      this.$emit('click-icon');
       this.$emit('click-right-icon');
-      this.onIconClick && this.onIconClick();
     },
 
     onClear(event) {
@@ -220,11 +216,11 @@ export default sfc({
 
     renderRightIcon() {
       const { slots } = this;
-      const showRightIcon = slots('right-icon') || slots('icon') || this.rightIcon || this.icon;
+      const showRightIcon = slots('right-icon') || this.rightIcon;
       if (showRightIcon) {
         return (
           <div class={bem('right-icon')} onClick={this.onClickRightIcon}>
-            {slots('right-icon') || slots('icon') || <Icon name={this.rightIcon || this.icon} />}
+            {slots('right-icon') || <Icon name={this.rightIcon} />}
           </div>
         );
       }

packages/field/test/__snapshots__/index.spec.js.snap

@@ -44,17 +44,6 @@ exports[`render label slot 1`] = `
 </div>
 `;
 
-exports[`render right icon with icon prop for old version 1`] = `
-<div class="van-cell van-field">
-  <div class="van-cell__value van-cell__value--alone">
-    <div class="van-field__body"><input type="text" class="van-field__control">
-      <div class="van-field__right-icon"><i class="van-icon van-icon-success">
-          <!----></i></div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`render textarea 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">

packages/field/test/index.spec.js

@@ -11,22 +11,18 @@ test('input event', () => {
 });
 
 test('click icon event', () => {
-  const onIconClick = jest.fn();
   const wrapper = mount(Field, {
     propsData: {
       value: 'a',
       leftIcon: 'contact',
-      rightIcon: 'search',
-      onIconClick
+      rightIcon: 'search'
     }
   });
 
   wrapper.find('.van-field__left-icon').trigger('click');
   wrapper.find('.van-field__right-icon').trigger('click');
-  expect(wrapper.emitted('click-icon')).toBeTruthy();
   expect(wrapper.emitted('click-left-icon')).toBeTruthy();
   expect(wrapper.emitted('click-right-icon')).toBeTruthy();
-  expect(onIconClick).toHaveBeenCalled();
 });
 
 test('keypress event', () => {
@@ -179,15 +175,6 @@ test('render label slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('render right icon with icon prop for old version', () => {
-  const wrapper = mount(Field, {
-    propsData: {
-      icon: 'success'
-    }
-  });
-  expect(wrapper).toMatchSnapshot();
-});
-
 test('size prop', () => {
   const wrapper = mount(Field, {
     propsData: {

packages/goods-action-button/index.less

@@ -1,6 +1,6 @@
 @import '../style/var';
 
-.van-goods-action-big-btn {
+.van-goods-action-button {
   flex: 1;
   padding: 0;
 

packages/goods-action-button/index.tsx

@@ -1,5 +1,5 @@
 import { use } from '../utils';
-import Button, { ButtonEvents } from '../button';
+import Button, { ButtonType, ButtonEvents } from '../button';
 import { emit, inherit } from '../utils/functional';
 import { functionalRoute, routeProps, RouteProps } from '../utils/router';
 
@@ -7,20 +7,21 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
-export type GoodsActionBigBtnProps = RouteProps & {
+export type GoodsActionButtonProps = RouteProps & {
   text?: string;
+  type?: ButtonType;
   primary?: boolean;
   loading?: boolean;
   disabled?: boolean;
 };
 
-const [sfc, bem] = use('goods-action-big-btn');
+const [sfc, bem] = use('goods-action-button');
 
-function GoodsActionBigBtn(
+function GoodsActionButton(
   h: CreateElement,
-  props: GoodsActionBigBtnProps,
+  props: GoodsActionButtonProps,
   slots: DefaultSlots,
-  ctx: RenderContext<GoodsActionBigBtnProps>
+  ctx: RenderContext<GoodsActionButtonProps>
 ) {
   const onClick = (event: Event) => {
     emit(ctx, 'click', event);
@@ -32,9 +33,9 @@ function GoodsActionBigBtn(
       square
       class={bem()}
       size="large"
+      type={props.type}
       loading={props.loading}
       disabled={props.disabled}
-      type={props.primary ? 'danger' : 'warning'}
       onClick={onClick}
       {...inherit(ctx)}
     >
@@ -43,12 +44,12 @@ function GoodsActionBigBtn(
   );
 }
 
-GoodsActionBigBtn.props = {
+GoodsActionButton.props = {
   ...routeProps,
+  type: String,
   text: String,
-  primary: Boolean,
   loading: Boolean,
   disabled: Boolean
 };
 
-export default sfc<GoodsActionBigBtnProps, ButtonEvents>(GoodsActionBigBtn);
+export default sfc<GoodsActionButtonProps, ButtonEvents>(GoodsActionButton);

packages/goods-action-icon/index.less

@@ -1,6 +1,6 @@
 @import '../style/var';
 
-.van-goods-action-mini-btn {
+.van-goods-action-icon {
   color: @gray-darker;
   display: flex;
   height: 50px;

packages/goods-action-icon/index.tsx

@@ -7,20 +7,20 @@ import { functionalRoute, routeProps, RouteProps } from '../utils/router';
 import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/use/sfc';
 
-export type GoodsActionMiniBtnProps = RouteProps & {
+export type GoodsActionIconProps = RouteProps & {
   icon: string;
   text?: string;
   info?: string | number;
   iconClass?: any;
 };
 
-const [sfc, bem] = use('goods-action-mini-btn');
+const [sfc, bem] = use('goods-action-icon');
 
-function GoodsActionMiniBtn(
+function GoodsActionIcon(
   h: CreateElement,
-  props: GoodsActionMiniBtnProps,
+  props: GoodsActionIconProps,
   slots: DefaultSlots,
-  ctx: RenderContext<GoodsActionMiniBtnProps>
+  ctx: RenderContext<GoodsActionIconProps>
 ) {
   const onClick = (event: Event) => {
     emit(ctx, 'click', event);
@@ -40,7 +40,7 @@ function GoodsActionMiniBtn(
   );
 }
 
-GoodsActionMiniBtn.props = {
+GoodsActionIcon.props = {
   ...routeProps,
   text: String,
   icon: String,
@@ -48,4 +48,4 @@ GoodsActionMiniBtn.props = {
   iconClass: null as any
 };
 
-export default sfc<GoodsActionMiniBtnProps, IconEvents>(GoodsActionMiniBtn);
+export default sfc<GoodsActionIconProps, IconEvents>(GoodsActionIcon);

packages/goods-action/demo/index.vue

@@ -2,54 +2,56 @@
   <demo-section>
     <demo-block :title="$t('basicUsage')">
       <van-goods-action>
-        <van-goods-action-mini-btn
+        <van-goods-action-icon
           icon="chat-o"
           :text="$t('icon1')"
-          @click="onClickMiniBtn"
+          @click="onClickIcon"
         />
-        <van-goods-action-mini-btn
+        <van-goods-action-icon
           icon="cart-o"
           :text="$t('icon2')"
-          @click="onClickMiniBtn"
+          @click="onClickIcon"
         />
-        <van-goods-action-big-btn
+        <van-goods-action-button
+          type="warning"
           :text="$t('button1')"
-          @click="onClickBigBtn"
+          @click="onClickButton"
         />
-        <van-goods-action-big-btn
-          primary
+        <van-goods-action-button
+          type="danger"
           :text="$t('button2')"
-          @click="onClickBigBtn"
+          @click="onClickButton"
         />
       </van-goods-action>
     </demo-block>
 
     <demo-block :title="$t('title2')">
       <van-goods-action>
-        <van-goods-action-mini-btn
+        <van-goods-action-icon
           icon="chat-o"
           :text="$t('icon1')"
-          @click="onClickMiniBtn"
+          @click="onClickIcon"
         />
-        <van-goods-action-mini-btn
+        <van-goods-action-icon
           icon="cart-o"
           info="5"
           :text="$t('icon2')"
-          @click="onClickMiniBtn"
+          @click="onClickIcon"
         />
-        <van-goods-action-mini-btn
+        <van-goods-action-icon
           icon="shop-o"
           :text="$t('icon3')"
-          @click="onClickMiniBtn"
+          @click="onClickIcon"
         />
-        <van-goods-action-big-btn
+        <van-goods-action-button
+          type="warning"
           :text="$t('button1')"
-          @click="onClickBigBtn"
+          @click="onClickButton"
         />
-        <van-goods-action-big-btn
-          primary
+        <van-goods-action-button
+          type="danger"
           :text="$t('button2')"
-          @click="onClickBigBtn"
+          @click="onClickButton"
         />
       </van-goods-action>
     </demo-block>
@@ -82,11 +84,11 @@ export default {
   },
 
   methods: {
-    onClickMiniBtn() {
+    onClickIcon() {
       this.$toast(this.$t('clickIcon'));
     },
 
-    onClickBigBtn() {
+    onClickButton() {
       this.$toast(this.$t('clickButton'));
     }
   }

packages/goods-action/en-US.md

@@ -4,14 +4,14 @@
 ``` javascript
 import {
   GoodsAction,
-  GoodsActionBigBtn,
-  GoodsActionMiniBtn
+  GoodsActionButton,
+  GoodsActionIcon
 } from 'vant';
 
 Vue
   .use(GoodsAction)
-  .use(GoodsActionBigBtn)
-  .use(GoodsActionMiniBtn);
+  .use(GoodsActionButton)
+  .use(GoodsActionIcon);
 ```
 
 ### Usage
@@ -19,24 +19,25 @@ Vue
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="chat-o"
     text="Icon1"
-    @click="onClickMiniBtn"
+    @click="onClickIcon"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="cart-o"
     text="Icon2"
-    @click="onClickMiniBtn"
+    @click="onClickIcon"
   />
-  <van-goods-action-big-btn
+  <van-goods-action-button
+    type="warning"
     text="Button1"
-    @click="onClickBigBtn"
+    @click="onClickButton"
   />
-  <van-goods-action-big-btn
-    primary
+  <van-goods-action-button
+    type="danger"
     text="Button2"
-    @click="onClickBigBtn"
+    @click="onClickButton"
   />
 </van-goods-action>
 ```
@@ -44,10 +45,10 @@ Vue
 ```javascript
 export default {
   methods: {
-    onClickMiniBtn() {
+    onClickIcon() {
       Toast('Click Icon');
     },
-    onClickBigBtn() {
+    onClickButton() {
       Toast('Click Button');
     }
   }
@@ -60,22 +61,25 @@ Use `info` prop to show messages in upper right corner of icon
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="chat-o"
     text="Icon1"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     info="5"
     icon="cart-o"
     text="Icon2"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="shop-o"
     text="Icon3"
   />
-  <van-goods-action-big-btn text="Button1" />
-  <van-goods-action-big-btn
-    primary
+  <van-goods-action-button
+    type="warning"
+    text="Button1"
+  />
+  <van-goods-action-button
+    type="danger"
     text="Button2"
   />
 </van-goods-action>
@@ -88,7 +92,7 @@ Use `info` prop to show messages in upper right corner of icon
 | Attribute | Description | Type | Default |
 | safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
 
-#### GoodsActionMiniBtn
+#### GoodsActionIcon
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
@@ -100,10 +104,11 @@ Use `info` prop to show messages in upper right corner of icon
 | to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
 | replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
 
-#### GoodsActionBigBtn
+#### GoodsActionButton
 
 | Attribute | Description | Type | Default |
 |------|------|------|------|
+| type | Button type, Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
 | text | Button text | `String` | - |
 | primary | Is primary button (red color) | `Boolean` | `false` |
 | disabled | Whether to disable button | `Boolean` | `false` |

packages/goods-action/test/__snapshots__/demo.spec.js.snap

@@ -4,35 +4,35 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-goods-action">
-      <div class="van-goods-action-mini-btn van-hairline">
-        <div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-icon van-hairline">
+        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
           <!---->
         </div>客服
       </div>
-      <div class="van-goods-action-mini-btn van-hairline">
-        <div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-icon van-hairline">
+        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <!---->
         </div>购物车
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
   <div>
     <div class="van-goods-action">
-      <div class="van-goods-action-mini-btn van-hairline">
-        <div class="van-icon van-icon-chat-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-icon van-hairline">
+        <div class="van-icon van-icon-chat-o van-goods-action-icon__icon">
           <!---->
         </div>客服
       </div>
-      <div class="van-goods-action-mini-btn van-hairline">
-        <div class="van-icon van-icon-cart-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-icon van-hairline">
+        <div class="van-icon van-icon-cart-o van-goods-action-icon__icon">
           <div class="van-info">5</div>
         </div>购物车
       </div>
-      <div class="van-goods-action-mini-btn van-hairline">
-        <div class="van-icon van-icon-shop-o van-goods-action-mini-btn__icon">
+      <div class="van-goods-action-icon van-hairline">
+        <div class="van-icon van-icon-shop-o van-goods-action-icon__icon">
           <!---->
         </div>店铺
-      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">立即购买</span></button>
+      </div> <button class="van-button van-button--warning van-button--large van-button--square van-goods-action-button"><span class="van-button__text">加入购物车</span></button> <button class="van-button van-button--danger van-button--large van-button--square van-goods-action-button"><span class="van-button__text">立即购买</span></button>
     </div>
   </div>
 </div>

packages/goods-action/test/__snapshots__/index.spec.js.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BigBtn render default slot 1`] = `<button class="van-button van-button--warning van-button--large van-button--square van-goods-action-big-btn"><span class="van-button__text">Default Content</span></button>`;
+exports[`Button render default slot 1`] = `<button class="van-button van-button--default van-button--large van-button--square van-goods-action-button"><span class="van-button__text">Default Content</span></button>`;
 
-exports[`Mini render default slot 1`] = `
-<div class="van-goods-action-mini-btn van-hairline">
-  <div class="van-icon van-icon-undefined van-goods-action-mini-btn__icon">
+exports[`Icon render default slot 1`] = `
+<div class="van-goods-action-icon van-hairline">
+  <div class="van-icon van-icon-undefined van-goods-action-icon__icon">
     <!---->
   </div>Default Content
 </div>

packages/goods-action/test/index.spec.js

@@ -1,10 +1,10 @@
-import BigBtn from '../../goods-action-big-btn';
-import MiniBtn from '../../goods-action-mini-btn';
+import Button from '../../goods-action-button';
+import Icon from '../../goods-action-icon';
 import { mount } from '../../../test/utils';
 
-test('BigBtn click event', () => {
+test('Button click event', () => {
   const click = jest.fn();
-  const wrapper = mount(BigBtn, {
+  const wrapper = mount(Button, {
     context: {
       on: {
         click
@@ -16,9 +16,9 @@ test('BigBtn click event', () => {
   expect(click).toHaveBeenCalledTimes(1);
 });
 
-test('MiniBtn click event', () => {
+test('Icon click event', () => {
   const click = jest.fn();
-  const wrapper = mount(MiniBtn, {
+  const wrapper = mount(Icon, {
     context: {
       on: {
         click
@@ -30,20 +30,20 @@ test('MiniBtn click event', () => {
   expect(click).toHaveBeenCalledTimes(1);
 });
 
-test('BigBtn render default slot', () => {
+test('Button render default slot', () => {
   const wrapper = mount({
     render(h) {
-      return h(BigBtn, null, ['Default Content']);
+      return h(Button, null, ['Default Content']);
     }
   });
 
   expect(wrapper).toMatchSnapshot();
 });
 
-test('Mini render default slot', () => {
+test('Icon render default slot', () => {
   const wrapper = mount({
     render(h) {
-      return h(MiniBtn, null, ['Default Content']);
+      return h(Icon, null, ['Default Content']);
     }
   });
 

packages/goods-action/zh-CN.md

@@ -4,14 +4,14 @@
 ``` javascript
 import {
   GoodsAction,
-  GoodsActionBigBtn,
-  GoodsActionMiniBtn
+  GoodsActionIcon,
+  GoodsActionButton
 } from 'vant';
 
 Vue
   .use(GoodsAction)
-  .use(GoodsActionBigBtn)
-  .use(GoodsActionMiniBtn);
+  .use(GoodsActionIcon)
+  .use(GoodsActionButton);
 ```
 
 ### 代码演示
@@ -19,24 +19,25 @@ Vue
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="chat-o"
     text="客服"
-    @click="onClickMiniBtn"
+    @click="onClickIcon"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="cart-o"
     text="购物车"
-    @click="onClickMiniBtn"
+    @click="onClickIcon"
   />
-  <van-goods-action-big-btn
+  <van-goods-action-button
+    type="warning"
     text="加入购物车"
-    @click="onClickBigBtn"
+    @click="onClickButton"
   />
-  <van-goods-action-big-btn
-    primary
+  <van-goods-action-button
+    type="danger"
     text="立即购买"
-    @click="onClickBigBtn"
+    @click="onClickButton"
   />
 </van-goods-action>
 ```
@@ -44,10 +45,10 @@ Vue
 ```javascript
 export default {
   methods: {
-    onClickMiniBtn() {
+    onClickIcon() {
       Toast('点击图标');
     },
-    onClickBigBtn() {
+    onClickButton() {
       Toast('点击按钮');
     }
   }
@@ -59,22 +60,25 @@ export default {
 
 ```html
 <van-goods-action>
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="chat-o"
     text="客服"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     info="5"
     icon="cart-o"
     text="购物车"
   />
-  <van-goods-action-mini-btn
+  <van-goods-action-icon
     icon="shop-o"
     text="店铺"
   />
-  <van-goods-action-big-btn text="加入购物车" />
-  <van-goods-action-big-btn
-    primary
+  <van-goods-action-button
+    type="warning"
+    text="加入购物车"
+  />
+  <van-goods-action-button
+    type="danger"
     text="立即购买"
   />
 </van-goods-action>
@@ -88,7 +92,7 @@ export default {
 |------|------|------|------|------|
 | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
-#### GoodsActionMiniBtn
+#### GoodsActionIcon
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
@@ -100,12 +104,12 @@ export default {
 | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
 | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
 
-#### GoodsActionBigBtn
+#### GoodsActionButton
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | text | 按钮文字 | `String` | - | - |
-| primary | 是否为红色按钮 | `Boolean` | `false` | - |
+| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` |
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - | 1.3.10 |
 | loading | 是否显示为加载状态 | `Boolean` | `false` | - | 1.3.10 |
 | url | 跳转链接 | `String` | - | - |

packages/index.less

@@ -8,8 +8,6 @@
 /* common components */
 @import './col/index';
 @import './row/index';
-@import './badge/index';
-@import './badge-group/index';
 @import './circle/index';
 @import './collapse-item/index';
 @import './list/index';
@@ -30,6 +28,8 @@
 @import './image-preview/index';
 @import './stepper/index';
 @import './progress/index';
+@import './sidebar/index';
+@import './sidebar-item/index';
 @import './swipe/index';
 @import './swipe-item/index';
 @import './slider/index';
@@ -44,7 +44,7 @@
 @import './number-keyboard/index';
 
 /* action components */
-@import './actionsheet/index';
+@import './action-sheet/index';
 @import './dialog/index';
 @import './picker/index';
 @import './pull-refresh/index';
@@ -67,7 +67,7 @@
 @import './coupon-cell/index';
 @import './coupon-list/index';
 @import './goods-action/index';
-@import './goods-action-big-btn/index';
-@import './goods-action-mini-btn/index';
+@import './goods-action-button/index';
+@import './goods-action-icon/index';
 @import './submit-bar/index';
 @import './sku/index';

packages/index.ts

@@ -1,12 +1,10 @@
 /* eslint-disable */
 // This file is auto gererated by build/build-entry.js
 import { VueConstructor } from 'vue/types';
-import Actionsheet from './actionsheet';
+import ActionSheet from './action-sheet';
 import AddressEdit from './address-edit';
 import AddressList from './address-list';
 import Area from './area';
-import Badge from './badge';
-import BadgeGroup from './badge-group';
 import Button from './button';
 import Card from './card';
 import Cell from './cell';
@@ -27,8 +25,8 @@ import DatetimePicker from './datetime-picker';
 import Dialog from './dialog';
 import Field from './field';
 import GoodsAction from './goods-action';
-import GoodsActionBigBtn from './goods-action-big-btn';
-import GoodsActionMiniBtn from './goods-action-mini-btn';
+import GoodsActionButton from './goods-action-button';
+import GoodsActionIcon from './goods-action-icon';
 import Icon from './icon';
 import ImagePreview from './image-preview';
 import Info from './info';
@@ -53,6 +51,8 @@ import RadioGroup from './radio-group';
 import Rate from './rate';
 import Row from './row';
 import Search from './search';
+import Sidebar from './sidebar';
+import SidebarItem from './sidebar-item';
 import Sku from './sku';
 import Slider from './slider';
 import Step from './step';
@@ -72,7 +72,6 @@ import Tag from './tag';
 import Toast from './toast';
 import TreeSelect from './tree-select';
 import Uploader from './uploader';
-import Waterfall from './waterfall';
 
 declare global {
   interface Window {
@@ -82,12 +81,10 @@ declare global {
 
 const version = '1.6.16';
 const components = [
-  Actionsheet,
+  ActionSheet,
   AddressEdit,
   AddressList,
   Area,
-  Badge,
-  BadgeGroup,
   Button,
   Card,
   Cell,
@@ -108,8 +105,8 @@ const components = [
   Dialog,
   Field,
   GoodsAction,
-  GoodsActionBigBtn,
-  GoodsActionMiniBtn,
+  GoodsActionButton,
+  GoodsActionIcon,
   Icon,
   ImagePreview,
   Info,
@@ -132,6 +129,8 @@ const components = [
   Rate,
   Row,
   Search,
+  Sidebar,
+  SidebarItem,
   Sku,
   Slider,
   Step,
@@ -167,12 +166,10 @@ if (typeof window !== 'undefined' && window.Vue) {
 export {
   install,
   version,
-  Actionsheet,
+  ActionSheet,
   AddressEdit,
   AddressList,
   Area,
-  Badge,
-  BadgeGroup,
   Button,
   Card,
   Cell,
@@ -193,8 +190,8 @@ export {
   Dialog,
   Field,
   GoodsAction,
-  GoodsActionBigBtn,
-  GoodsActionMiniBtn,
+  GoodsActionButton,
+  GoodsActionIcon,
   Icon,
   ImagePreview,
   Info,
@@ -219,6 +216,8 @@ export {
   Rate,
   Row,
   Search,
+  Sidebar,
+  SidebarItem,
   Sku,
   Slider,
   Step,
@@ -237,8 +236,7 @@ export {
   Tag,
   Toast,
   TreeSelect,
-  Uploader,
-  Waterfall
+  Uploader
 };
 
 export default {

packages/loading/index.less

@@ -9,11 +9,6 @@
   position: relative;
   vertical-align: middle;
 
-  &--circle {
-    width: 16px;
-    height: 16px;
-  }
-
   &__spinner {
     z-index: -1;
     width: 100%;
@@ -23,18 +18,6 @@
     box-sizing: border-box;
     animation: van-rotate 0.8s linear infinite;
 
-    &--circle {
-      border-radius: 100%;
-      border: 3px solid transparent;
-      border-color: @gray;
-      border-top-color: @gray-darker;
-    }
-
-    &--gradient-circle {
-      background-size: contain;
-      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-black.png');
-    }
-
     &--spinner {
       animation-timing-function: steps(12);
 
@@ -73,17 +56,6 @@
       animation: van-circular 1.5s ease-in-out infinite;
     }
   }
-
-  &--white {
-    .van-loading__spinner--circle {
-      border-color: rgba(0, 0, 0, .1);
-      border-top-color: rgba(255, 255, 255, .7);
-    }
-
-    .van-loading__spinner--gradient-circle {
-      background-image: url('https://img.yzcdn.cn/vant/gradient-circle-white.png');
-    }
-  }
 }
 
 @keyframes van-circular {

packages/loading/index.tsx

@@ -22,10 +22,8 @@ function Loading(
 ) {
   const { color, size, type } = props;
 
-  const colorType = color === 'white' || color === 'black' ? color : '';
-
   const style = {
-    color: color === 'black' ? DEFAULT_COLOR : color,
+    color,
     width: size,
     height: size
   };
@@ -44,7 +42,7 @@ function Loading(
   );
 
   return (
-    <div class={bem([type, colorType])} style={style} {...inherit(ctx, true)}>
+    <div class={bem([type])} style={style} {...inherit(ctx, true)}>
       <span class={bem('spinner', type)}>
         {Spin}
         {Circular}

packages/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -25,7 +25,7 @@ exports[`change head content when pulling down 3`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>
@@ -37,7 +37,7 @@ exports[`change head content when pulling down 4`] = `
   <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
+        <div class="van-loading van-loading--circular" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>

packages/sidebar-item/index.js

@@ -1,7 +1,7 @@
 import { use } from '../utils';
 import Info from '../info';
 
-const [sfc, bem] = use('badge');
+const [sfc, bem] = use('sidebar-item');
 
 export default sfc({
   props: {
@@ -10,32 +10,32 @@ export default sfc({
     title: String
   },
 
-  inject: ['vanBadgeGroup'],
+  inject: ['vanSidebar'],
 
   created() {
-    this.parent.badges.push(this);
+    this.parent.items.push(this);
   },
 
   beforeDestroy() {
-    this.parent.badges = this.parent.badges.filter(item => item !== this);
+    this.parent.items = this.parent.items.filter(item => item !== this);
   },
 
   computed: {
     parent() {
-      if (process.env.NODE_ENV !== 'production' && !this.vanBadgeGroup) {
-        console.error('[Vant] Badge needs to be child of BadgeGroup');
+      if (process.env.NODE_ENV !== 'production' && !this.vanSidebar) {
+        console.error('[Vant] SidebarItem needs to be child of Sidebar');
       }
-      return this.vanBadgeGroup;
+      return this.vanSidebar;
     },
 
     select() {
-      return this.parent.badges.indexOf(this) === +this.parent.activeKey;
+      return this.parent.items.indexOf(this) === +this.parent.activeKey;
     }
   },
 
   methods: {
     onClick() {
-      const index = this.parent.badges.indexOf(this);
+      const index = this.parent.items.indexOf(this);
       this.$emit('click', index);
       this.parent.$emit('change', index);
     }

packages/sidebar-item/index.less

@@ -0,0 +1,46 @@
+@import '../style/var';
+
+.van-sidebar-item {
+  display: block;
+  overflow: hidden;
+  user-select: none;
+  word-break: break-all;
+  box-sizing: border-box;
+  color: @sidebar-text-color;
+  padding: @sidebar-padding;
+  font-size: @sidebar-font-size;
+  line-height: @sidebar-line-height;
+  background-color: @sidebar-background-color;
+  border-left: 3px solid transparent;
+
+  &__text {
+    position: relative;
+  }
+
+  &:active {
+    background-color: @sidebar-active-color;
+  }
+
+  &:not(:last-child)::after {
+    border-bottom-width: 1px;
+  }
+
+  &--select {
+    color: @sidebar-selected-text-color;
+    font-weight: @sidebar-selected-font-weight;
+    border-color: @sidebar-selected-border-color;
+
+    &::after {
+      border-right-width: 1px;
+    }
+
+    &,
+    &:active {
+      background-color: @sidebar-selected-background-color;
+    }
+  }
+
+  .van-info {
+    right: 4px;
+  }
+}

packages/sidebar/demo/index.vue

@@ -1,24 +1,24 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-badge-group
+      <van-sidebar
         :active-key="activeKey"
         @change="onChange"
       >
-        <van-badge :title="$t('title')" />
-        <van-badge
+        <van-sidebar-item :title="$t('title')" />
+        <van-sidebar-item
           :title="$t('title')"
           info="8"
         />
-        <van-badge
+        <van-sidebar-item
           :title="$t('title')"
           info="99"
         />
-        <van-badge
+        <van-sidebar-item
           :title="$t('title')"
           info="99+"
         />
-      </van-badge-group>
+      </van-sidebar>
     </demo-block>
   </demo-section>
 </template>
@@ -48,8 +48,8 @@ export default {
 <style lang="less">
 @import '../../style/var';
 
-.demo-badge {
-  .van-badge-group {
+.demo-sidebar {
+  .van-sidebar {
     width: auto;
     margin: 0 15px;
     padding: 20px 0;
@@ -60,7 +60,7 @@ export default {
     }
   }
 
-  .van-badge {
+  .van-sidebar-item {
     width: 85px;
     margin: 0 auto;
   }

packages/sidebar/en-US.md

@@ -0,0 +1,67 @@
+## Sidebar
+
+### Install
+
+``` javascript
+import { Sidebar, SidebarItem } from 'vant';
+
+Vue.use(Sidebar);
+Vue.use(SidebarItem);
+```
+
+### Usage
+
+#### Basic Usage
+
+Use `active-key` prop to set index of chosen item
+
+```html
+<van-sidebar :active-key="activeKey" @change="onChange">
+  <van-sidebar-item title="Title" />
+  <van-sidebar-item title="Title" info="8" />
+  <van-sidebar-item title="Title" info="99" />
+  <van-sidebar-item title="Title" info="99+" />
+</van-sidebar>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onChange(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+
+### Sidebar API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| active-key | Index of chosen item | `String | Number` | `0` |
+
+### Sidebar Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| change | Triggered when item changed | key: index of current item |
+
+### SidebarItem API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| title | Content | `String` | `''` |
+| info | Info Message | `String | Number` | `''` |
+| url | Link | `String` | - |
+
+### SidebarItem Event
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when click item | key: index of current item |

packages/sidebar/index.js

@@ -1,6 +1,6 @@
 import { use } from '../utils';
 
-const [sfc, bem] = use('badge-group');
+const [sfc, bem] = use('sidebar');
 
 export default sfc({
   props: {
@@ -12,13 +12,13 @@ export default sfc({
 
   provide() {
     return {
-      vanBadgeGroup: this
+      vanSidebar: this
     };
   },
 
   data() {
     return {
-      badges: []
+      items: []
     };
   },
 

packages/sidebar/index.less

@@ -0,0 +1,5 @@
+@import '../style/var';
+
+.van-sidebar {
+  width: @sidebar-width;
+}

packages/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-sidebar van-hairline--top-bottom"><a class="van-sidebar-item van-sidebar-item--select van-hairline">
+        <div class="van-sidebar-item__text">标签名称
+          <!---->
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">8</div>
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99</div>
+        </div>
+      </a> <a class="van-sidebar-item van-hairline">
+        <div class="van-sidebar-item__text">标签名称<div class="van-info van-sidebar-item__info">99+</div>
+        </div>
+      </a></div>
+  </div>
+</div>
+`;

packages/sidebar/test/index.spec.js

@@ -1,19 +1,19 @@
 import { mount } from '../../../test/utils';
-import Badge from '..';
-import BadgeGroup from '../../badge-group';
+import Sidebar from '..';
+import SidebarItem from '../../sidebar-item';
 
 test('event', () => {
   const onClick = jest.fn();
   const onChange = jest.fn();
   const wrapper = mount({
     template: `
-      <badge-group @change="onChange">
-        <badge @click="onClick">Text</badge>
-      </badge-group>
+      <sidebar @change="onChange">
+        <sidebar-item @click="onClick">Text</sidebar-item>
+      </sidebar>
     `,
     components: {
-      Badge,
-      BadgeGroup
+      Sidebar,
+      SidebarItem
     },
     methods: {
       onClick,
@@ -21,7 +21,7 @@ test('event', () => {
     }
   });
 
-  wrapper.find('.van-badge').trigger('click');
+  wrapper.find('.van-sidebar-item').trigger('click');
   expect(onClick).toHaveBeenCalledWith(0);
   expect(onChange).toHaveBeenCalledWith(0);
   wrapper.vm.$destroy();
@@ -31,7 +31,7 @@ test('without parent', () => {
   const consoleError = console.error;
   try {
     console.error = jest.fn();
-    mount(Badge);
+    mount(Sidebar);
   } catch (err) {
     console.error = consoleError;
     expect(err).toBeTruthy();

packages/sidebar/zh-CN.md

@@ -0,0 +1,67 @@
+## Sidebar 侧边导航
+
+### 使用指南
+
+``` javascript
+import { Sidebar, SidebarItem } from 'vant';
+
+Vue.use(Sidebar);
+Vue.use(SidebarItem);
+```
+
+### 代码演示
+
+#### 基础用法
+
+通过在`van-sidebar`上设置`active-key`属性来控制选中项
+
+```html
+<van-sidebar :active-key="activeKey" @change="onChange">
+  <van-sidebar-item title="标签名称" />
+  <van-sidebar-item title="标签名称" info="8" />
+  <van-sidebar-item title="标签名称" info="99" />
+  <van-sidebar-item title="标签名称" info="99+" />
+</van-sidebar>
+```
+
+``` javascript
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+
+  methods: {
+    onChange(key) {
+      this.activeKey = key;
+    }
+  }
+};
+```
+
+### Sidebar API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| active-key | 当前导航项的索引 | `String | Number` | `0` | - |
+
+### Sidebar Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| change | 切换当前导航项时触发 | key: 当前导航项的索引 |
+
+### SidebarItem API
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| title | 内容 | `String` | `''` | - |
+| info | 提示消息 | `String | Number` | `''` | - |
+| url | 跳转链接 | `String` | - | - |
+
+### SidebarItem Event
+
+| 事件名 | 说明 | 参数 |
+|------|------|------|
+| click | 点击时触发 | key: 当前导航项的索引 |

packages/sku/components/SkuActions.tsx

@@ -27,11 +27,18 @@ function SkuActions(
   return (
     <div class={bem()} {...inherit(ctx)}>
       {props.showAddCartBtn && (
-        <Button bottomAction text="加入购物车" onClick={emit('sku:addCart')} />
+        <Button
+          square
+          size="large"
+          type="warning"
+          text="加入购物车"
+          onClick={emit('sku:addCart')}
+        />
       )}
       <Button
-        type="primary"
-        bottomAction
+        square
+        size="large"
+        type="danger"
         text={props.buyText || '立即购买'}
         onClick={emit('sku:buy')}
       />

packages/sku/demo/index.vue

@@ -117,14 +117,17 @@
           >
             <div class="van-sku-actions">
               <van-button
-                bottom-action
+                square
+                size="large"
+                type="warning"
                 @click="onPointClicked"
               >
                 {{ $t('button1') }}
               </van-button>
               <van-button
-                type="primary"
-                bottom-action
+                square
+                size="large"
+                type="danger"
                 @click="props.skuEventBus.$emit('sku:buy')"
               >
                 {{ $t('button2') }}

packages/sku/en-US.md

@@ -70,12 +70,27 @@ Vue.use(Sku);
       <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
+
   <!-- custom sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottom-action @click="onPointClicked">Button</van-button>
+      <van-button
+        square
+        size="large"
+        type="warning"
+        @click="onPointClicked"
+      >
+        Button
+      </van-button>
       <!-- trigger sku inner event -->
-      <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">Button</van-button>
+      <van-button
+        square
+        size="large"
+        type="danger"
+        @click="props.skuEventBus.$emit('sku:buy')"
+      >
+        Button
+      </van-button>
     </div>
   </template>
 </van-sku>

packages/sku/zh-CN.md

@@ -71,12 +71,27 @@ Vue.use(Sku);
       <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
+
   <!-- 自定义 sku actions -->
   <template slot="sku-actions" slot-scope="props">
     <div class="van-sku-actions">
-      <van-button bottom-action @click="onPointClicked">积分兑换</van-button>
+      <van-button
+        square
+        size="large"
+        type="warning"
+        @click="onPointClicked"
+      >
+        积分兑换
+      </van-button>
       <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
-      <van-button type="primary" bottom-action @click="props.skuEventBus.$emit('sku:buy')">买买买</van-button>
+      <van-button
+        square
+        size="large"
+        type="danger"
+        @click="props.skuEventBus.$emit('sku:buy')"
+      >
+        买买买
+      </van-button>
     </div>
   </template>
 </van-sku>

packages/steps/index.js

@@ -1,16 +1,11 @@
 import { use } from '../utils';
 import { GREEN } from '../utils/color';
-import Icon from '../icon';
 
 const [sfc, bem] = use('steps');
 
 export default sfc({
   props: {
-    icon: String,
-    title: String,
     active: Number,
-    iconClass: String,
-    description: String,
     direction: {
       type: String,
       default: 'horizontal'
@@ -32,29 +27,9 @@ export default sfc({
   },
 
   render(h) {
-    const { icon, title, description, slots } = this;
-
-    const StatusIcon = (slots('icon') || icon) && (
-      <div class={bem('icon')}>{slots('icon') || <Icon name={icon} class={this.iconClass} />}</div>
-    );
-
-    const StatusMessage = (
-      <div class={bem('message')}>
-        <div class={bem('title')}>{title}</div>
-        <div class={[bem('desc'), 'van-ellipsis']}>{description}</div>
-      </div>
-    );
-
     return (
       <div class={bem([this.direction])}>
-        {(title || description) && (
-          <div class={bem('status')}>
-            {StatusIcon}
-            {StatusMessage}
-            {slots('message-extra')}
-          </div>
-        )}
-        <div class={bem('items', { alone: !title && !description })}>{slots()}</div>
+        <div class={bem('items')}>{this.slots()}</div>
       </div>
     );
   }

packages/steps/index.less

@@ -13,40 +13,10 @@
       overflow: hidden;
       position: relative;
       padding-bottom: 22px;
-
-      &.van-steps__items--alone {
-        padding-top: 10px;
-      }
     }
   }
 
   &--vertical {
     padding: 0 0 0 35px;
   }
-
-  &__icon {
-    float: left;
-    margin-right: 10px;
-  }
-
-  .van-icon {
-    font-size: 40px;
-  }
-
-  &__message {
-    height: 40px;
-    margin: 15px 0;
-  }
-
-  &__title {
-    font-size: 14px;
-    color: @text-color;
-    padding-top: 4px;
-  }
-
-  &__desc {
-    font-size: 12px;
-    line-height: 1.5;
-    color: @gray-dark;
-  }
 }

packages/steps/zh-CN.md

@@ -73,7 +73,6 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | active | 当前步骤 | `Number` | 0 | - |
-| title | 顶部描述栏标题 | `String` | - | - |
 | direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - |
 | active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
 | active-color | 激活状态颜色 | `String` | `#07c160` | - |

packages/style/var.less

@@ -32,21 +32,6 @@
 @action-sheet-close-icon-size: 18px;
 @action-sheet-close-icon-color: @gray-dark;
 
-// Badge
-@badge-font-size: 14px;
-@badge-line-height: 1.4;
-@badge-text-color: @gray-darker;
-@badge-padding: 20px 12px 20px 9px;
-@badge-active-color: @active-color;
-@badge-background-color: @background-color;
-@badge-selected-font-weight: 500;
-@badge-selected-text-color: @text-color;
-@badge-selected-border-color: @red;
-@badge-selected-background-color: @white;
-
-// BadgeGroup
-@badge-group-width: 85px;
-
 // Button
 @button-mini-height: 22px;
 @button-mini-min-width: 50px;
@@ -77,10 +62,6 @@
 @button-warning-color: @white;
 @button-warning-background-color: @orange;
 @button-warning-border-color: @orange;
-@button-bottom-action-default-color: @white;
-@button-bottom-action-default-background-color: @orange;
-@button-bottom-action-primary-color: @white;
-@button-bottom-action-primary-background-color: @red;
 @button-border-width: 1px;
 @button-border-radius: 2px;
 @button-round-border-radius: 10em;
@@ -239,6 +220,21 @@
 // Rate
 @rate-horizontal-padding: 2px;
 
+// Sidebar
+@sidebar-width: 85px;
+
+// SidebarItem
+@sidebar-font-size: 14px;
+@sidebar-line-height: 1.4;
+@sidebar-text-color: @gray-darker;
+@sidebar-padding: 20px 12px 20px 9px;
+@sidebar-active-color: @active-color;
+@sidebar-background-color: @background-color;
+@sidebar-selected-font-weight: 500;
+@sidebar-selected-text-color: @text-color;
+@sidebar-selected-border-color: @red;
+@sidebar-selected-background-color: @white;
+
 // Slider
 @slider-active-background-color: @blue;
 @slider-inactive-background-color: @gray-light;

packages/waterfall/demo/index.vue

@@ -1,82 +0,0 @@
-<template>
-  <demo-section>
-    <van-notice-bar>{{ $t('tips') }}</van-notice-bar>
-    <demo-block :title="$t('basicUsage')">
-      <p class="page-desc">{{ $t('text') }}</p>
-      <ul
-        v-waterfall-lower="loadMore"
-        waterfall-disabled="disabled"
-        waterfall-offset="400"
-      >
-        <li v-for="item in list">{{ item }}</li>
-      </ul>
-    </demo-block>
-  </demo-section>
-</template>
-
-<script>
-import { Waterfall } from '../..';
-
-export default {
-  i18n: {
-    'zh-CN': {
-      text: '当即将滚动到元素底部时，会自动加载更多',
-      tips: '注意：Waterfall 已被废弃，请使用 List 组件代替'
-    },
-    'en-US': {
-      text: 'This list will load items will scroll to bottom.',
-      tips: 'Waterfall is deprecated and no longer maintained, please use the List component instead.'
-    }
-  },
-
-  directives: {
-    WaterfallLower: Waterfall('lower')
-  },
-
-  data() {
-    return {
-      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      disabled: false
-    };
-  },
-
-  methods: {
-    loadMore() {
-      this.disabled = true;
-      setTimeout(() => {
-        for (let i = 0; i < 5; i++) {
-          this.list.push(this.list.length);
-        }
-        this.disabled = false;
-      }, 200);
-    }
-  }
-};
-</script>
-
-<style lang="less">
-@import '../../style/var';
-
-.demo-waterfall {
-  ul {
-    max-height: 360px;
-    overflow: scroll;
-    border-top: 1px solid @gray-light;
-  }
-
-  li {
-    line-height: 50px;
-    border-bottom: 1px solid @gray-light;
-    background: @white;
-    text-align: center;
-  }
-
-  .page-desc {
-    padding: 5px 0;
-    line-height: 1.4;
-    font-size: 14px;
-    text-align: center;
-    color: @gray-darker;
-  }
-}
-</style>

packages/waterfall/directive.js

@@ -1,133 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { on, off } from '../utils/event';
-import {
-  getScrollTop,
-  getElementTop,
-  getVisibleHeight,
-  getScrollEventTarget
-} from '../utils/scroll';
-
-const CONTEXT = '@@Waterfall';
-const OFFSET = 300;
-
-// 处理滚动函数
-function handleScrollEvent() {
-  const element = this.el;
-  const { scrollEventTarget } = this;
-  // 已被禁止的滚动处理
-  if (this.disabled) return;
-
-  const targetScrollTop = getScrollTop(scrollEventTarget);
-  const targetVisibleHeight = getVisibleHeight(scrollEventTarget);
-  // 滚动元素可视区域下边沿到滚动元素元素最顶上 距离
-  const targetBottom = targetScrollTop + targetVisibleHeight;
-
-  // 如果无元素高度，考虑为元素隐藏，直接返回
-  if (!targetVisibleHeight) return;
-
-  // 判断是否到了底
-  let needLoadMoreToLower = false;
-  if (element === scrollEventTarget) {
-    needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
-  } else {
-    const elementBottom =
-      getElementTop(element) - getElementTop(scrollEventTarget) + getVisibleHeight(element);
-    needLoadMoreToLower = elementBottom - targetVisibleHeight < this.offset;
-  }
-  if (needLoadMoreToLower) {
-    this.cb.lower && this.cb.lower({ target: scrollEventTarget, top: targetScrollTop });
-  }
-
-  // 判断是否到了顶
-  let needLoadMoreToUpper = false;
-  if (element === scrollEventTarget) {
-    needLoadMoreToUpper = targetScrollTop < this.offset;
-  } else {
-    const elementTop = getElementTop(element) - getElementTop(scrollEventTarget);
-    needLoadMoreToUpper = elementTop + this.offset > 0;
-  }
-  if (needLoadMoreToUpper) {
-    this.cb.upper && this.cb.upper({ target: scrollEventTarget, top: targetScrollTop });
-  }
-}
-
-// 绑定事件到元素上
-// 读取基本的控制变量
-function doBindEvent() {
-  if (this.el[CONTEXT].binded) {
-    return;
-  }
-  this.el[CONTEXT].binded = true;
-
-  this.scrollEventListener = handleScrollEvent.bind(this);
-  this.scrollEventTarget = getScrollEventTarget(this.el);
-
-  const disabledExpr = this.el.getAttribute('waterfall-disabled');
-  let disabled = false;
-  if (disabledExpr) {
-    this.vm.$watch(disabledExpr, value => {
-      this.disabled = value;
-      this.scrollEventListener();
-    });
-    disabled = Boolean(this.vm[disabledExpr]);
-  }
-  this.disabled = disabled;
-
-  const offset = this.el.getAttribute('waterfall-offset');
-  this.offset = Number(offset) || OFFSET;
-
-  on(this.scrollEventTarget, 'scroll', this.scrollEventListener, true);
-
-  this.scrollEventListener();
-}
-
-// 绑定事件
-function startBind(el) {
-  const context = el[CONTEXT];
-
-  context.vm.$nextTick(() => {
-    doBindEvent.call(el[CONTEXT]);
-  });
-}
-
-// 确认何时绑事件监听函数
-function doCheckStartBind(el) {
-  const context = el[CONTEXT];
-
-  if (context.vm._isMounted) {
-    startBind(el);
-  } else {
-    context.vm.$on('hook:mounted', () => {
-      startBind(el);
-    });
-  }
-}
-
-export default function (type) {
-  return {
-    bind(el, binding, vnode) {
-      if (!el[CONTEXT]) {
-        el[CONTEXT] = {
-          el,
-          vm: vnode.context,
-          cb: {}
-        };
-      }
-      el[CONTEXT].cb[type] = binding.value;
-
-      doCheckStartBind(el);
-    },
-
-    update(el) {
-      const context = el[CONTEXT];
-      context.scrollEventListener && context.scrollEventListener();
-    },
-
-    unbind(el) {
-      const context = el[CONTEXT];
-      if (context.scrollEventTarget) {
-        off(context.scrollEventTarget, 'scroll', context.scrollEventListener);
-      }
-    }
-  };
-}

packages/waterfall/en-US.md

@@ -1,77 +0,0 @@
-## Waterfall
-Note: Waterfall is deprecated and no longer maintained, please use the [List](#/zh-CN/list) component instead.
-
-### Install
-
-#### Global registration
-
-```js
-import Vue from 'vue';
-import { Waterfall } from 'vant';
-
-Vue.use(Waterfall);
-```
-
-#### Local registration
-If you just watch to use `Waterfall` in a component, you can register the directive in the component. 
-
-```js
-import { Waterfall } from 'vant';
-
-export default {
-  directives: {
-    WaterfallLower: Waterfall('lower'),
-    WaterfallUpper: Waterfall('upper')
-  }
-};
-```
-
-### Usage
-
-#### Basic Usage
-
-```html
-<ul
-  v-waterfall-lower="loadMore"
-  waterfall-disabled="disabled"
-  waterfall-offset="400"
->
-  <li v-for="item in list">{{ item }}</li>
-</ul>
-```
-
-```js
-export default {
-  data() {
-    return {
-      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      disabled: false
-    };
-  },
-
-  directives: {
-    WaterfallLower: Waterfall('lower')
-  },
-
-  methods: {
-    loadMore() {
-      this.disabled = true;
-      setTimeout(() => {
-        for (let i = 0; i < 5; i++) {
-          this.list.push(this.list.length);
-        }
-        this.disabled = false;
-      }, 200);
-    }
-  }
-};
-```
-
-### API
-
-| Attribute | Description | Type | Default |
-|------|------|------|------|
-| v-waterfall-lower | Function to trigger when scroll to bottom | `Function` | - |
-| v-waterfall-upper | Function to trigger when scroll to top | `Function` | - |
-| waterfall-disabled | Key of the property to control disable status in instance | `String` | - |
-| waterfall-offset | Offset to trigger callback function | `Number` | `300` |

packages/waterfall/index.js

@@ -1,11 +0,0 @@
-import Waterfall from './directive';
-
-Waterfall.install = function (Vue) {
-  if (process.env.NODE_ENV !== 'production') {
-    console.warn('[Vant] Waterfall is deprecated, please use List component instread');
-  }
-  Vue.directive('WaterfallLower', Waterfall('lower'));
-  Vue.directive('WaterfallUpper', Waterfall('upper'));
-};
-
-export default Waterfall;

packages/waterfall/zh-CN.md

@@ -1,81 +0,0 @@
-## Waterfall 瀑布流
-注意：Waterfall 组件已被废弃且不再维护，请使用 [List](#/zh-CN/list) 组件代替
-
-### 使用指南
-
-#### 全局注册
-
-```js
-import Vue from 'vue';
-import { Waterfall } from 'vant';
-
-Vue.use(Waterfall);
-```
-
-#### 局部注册
-
-如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
-
-```js
-import { Waterfall } from 'vant';
-
-export default {
-  directives: {
-    WaterfallLower: Waterfall('lower'),
-    WaterfallUpper: Waterfall('upper')
-  }
-};
-```
-
-### 代码演示
-
-#### 基础用法
-使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件
-
-注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串
-
-```html
-<ul
-  v-waterfall-lower="loadMore"
-  waterfall-disabled="disabled"
-  waterfall-offset="400"
->
-  <li v-for="item in list">{{ item }}</li>
-</ul>
-```
-
-```js
-export default {
-  data() {
-    return {
-      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
-      disabled: false
-    };
-  },
-
-  directives: {
-    WaterfallLower: Waterfall('lower')
-  },
-
-  methods: {
-    loadMore() {
-      this.disabled = true;
-      setTimeout(() => {
-        for (let i = 0; i < 5; i++) {
-          this.list.push(this.list.length);
-        }
-        this.disabled = false;
-      }, 200);
-    }
-  }
-};
-```
-
-### API
-
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|------|------|------|------|------|
-| v-waterfall-lower | 滚动到底部, 触发执行的函数 | `Function` | - | - |
-| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | `Function` | - | - |
-| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | `String` | - | - |
-| waterfall-offset | 触发瀑布流加载的阈值 | `Number` | `300` | - |

types/index.d.ts

@@ -5,17 +5,16 @@ import { Dialog } from './dialog';
 import { Notify } from './notify';
 import { Locale } from './locale';
 import { Lazyload } from './lazyload';
-import { Waterfall } from './waterfall';
 import { ImagePreview } from './image-preview';
 
 export const version: string;
 export function install (vue: typeof Vue): void
-export class Actionsheet extends VanComponent {}
+export class ActionSheet extends VanComponent {}
 export class AddressEdit extends VanComponent {}
 export class AddressList extends VanComponent {}
 export class Area extends VanComponent {}
-export class Badge extends VanComponent {}
-export class BadgeGroup extends VanComponent {}
+export class Sidebar extends VanComponent {}
+export class SidebarGroup extends VanComponent {}
 export class Button extends VanComponent {}
 export class Card extends VanComponent {}
 export class Cell extends VanComponent {}
@@ -35,8 +34,8 @@ export class CouponList extends VanComponent {}
 export class DatetimePicker extends VanComponent {}
 export class Field extends VanComponent {}
 export class GoodsAction extends VanComponent {}
-export class GoodsActionBigBtn extends VanComponent {}
-export class GoodsActionMiniBtn extends VanComponent {}
+export class GoodsActionButton extends VanComponent {}
+export class GoodsActionIcon extends VanComponent {}
 export class Icon extends VanComponent {}
 export class List extends VanComponent {}
 export class Loading extends VanComponent {}
@@ -78,6 +77,5 @@ export {
   Notify,
   Locale,
   Lazyload,
-  Waterfall,
   ImagePreview
 };

types/waterfall.d.ts

@@ -1,8 +0,0 @@
-import { DirectiveFunction, PluginFunction } from 'vue';
-
-export interface Waterfall {
-  (type: string): DirectiveFunction;
-  install: PluginFunction<void>;
-}
-
-export const Waterfall: Waterfall;