From 138790b3e38a4e51e1152def990bef56d12a3e62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 29 Apr 2019 16:40:50 +0800 Subject: [PATCH] [breaking change] GoodsAction: rename component --- .../index.less | 2 +- .../index.tsx | 14 +++---- .../index.less | 2 +- .../index.tsx | 14 +++---- packages/goods-action/demo/index.vue | 40 +++++++++--------- packages/goods-action/en-US.md | 42 +++++++++---------- .../test/__snapshots__/demo.spec.js.snap | 24 +++++------ .../test/__snapshots__/index.spec.js.snap | 8 ++-- packages/goods-action/test/index.spec.js | 20 ++++----- packages/goods-action/zh-CN.md | 42 +++++++++---------- packages/index.less | 4 +- packages/index.ts | 12 +++--- types/index.d.ts | 4 +- 13 files changed, 114 insertions(+), 114 deletions(-) rename packages/{goods-action-big-btn => goods-action-button}/index.less (79%) rename packages/{goods-action-big-btn => goods-action-button}/index.tsx (75%) rename packages/{goods-action-mini-btn => goods-action-icon}/index.less (93%) rename packages/{goods-action-mini-btn => goods-action-icon}/index.tsx (75%) diff --git a/packages/goods-action-big-btn/index.less b/packages/goods-action-button/index.less similarity index 79% rename from packages/goods-action-big-btn/index.less rename to packages/goods-action-button/index.less index 3b69930be..1dd8cad84 100644 --- a/packages/goods-action-big-btn/index.less +++ b/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; diff --git a/packages/goods-action-big-btn/index.tsx b/packages/goods-action-button/index.tsx similarity index 75% rename from packages/goods-action-big-btn/index.tsx rename to packages/goods-action-button/index.tsx index 99a5835b4..4b198acf9 100644 --- a/packages/goods-action-big-btn/index.tsx +++ b/packages/goods-action-button/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 GoodsActionBigBtnProps = RouteProps & { +export type GoodsActionButtonProps = RouteProps & { text?: string; 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 + ctx: RenderContext ) { const onClick = (event: Event) => { emit(ctx, 'click', event); @@ -43,7 +43,7 @@ function GoodsActionBigBtn( ); } -GoodsActionBigBtn.props = { +GoodsActionButton.props = { ...routeProps, text: String, primary: Boolean, @@ -51,4 +51,4 @@ GoodsActionBigBtn.props = { disabled: Boolean }; -export default sfc(GoodsActionBigBtn); +export default sfc(GoodsActionButton); diff --git a/packages/goods-action-mini-btn/index.less b/packages/goods-action-icon/index.less similarity index 93% rename from packages/goods-action-mini-btn/index.less rename to packages/goods-action-icon/index.less index c1ae8dff8..22c458369 100644 --- a/packages/goods-action-mini-btn/index.less +++ b/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; diff --git a/packages/goods-action-mini-btn/index.tsx b/packages/goods-action-icon/index.tsx similarity index 75% rename from packages/goods-action-mini-btn/index.tsx rename to packages/goods-action-icon/index.tsx index f5904ba94..8b2e1dc20 100644 --- a/packages/goods-action-mini-btn/index.tsx +++ b/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 + ctx: RenderContext ) { 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(GoodsActionMiniBtn); +export default sfc(GoodsActionIcon); diff --git a/packages/goods-action/demo/index.vue b/packages/goods-action/demo/index.vue index 069c19ae5..3fe2c6d32 100644 --- a/packages/goods-action/demo/index.vue +++ b/packages/goods-action/demo/index.vue @@ -2,54 +2,54 @@ - - - - - - - - - @@ -82,11 +82,11 @@ export default { }, methods: { - onClickMiniBtn() { + onClickIcon() { this.$toast(this.$t('clickIcon')); }, - onClickBigBtn() { + onClickButton() { this.$toast(this.$t('clickButton')); } } diff --git a/packages/goods-action/en-US.md b/packages/goods-action/en-US.md index e17c0e443..30e891cc5 100644 --- a/packages/goods-action/en-US.md +++ b/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,24 @@ Vue ```html - - - - ``` @@ -44,10 +44,10 @@ Vue ```javascript export default { methods: { - onClickMiniBtn() { + onClickIcon() { Toast('Click Icon'); }, - onClickBigBtn() { + onClickButton() { Toast('Click Button'); } } @@ -60,21 +60,21 @@ Use `info` prop to show messages in upper right corner of icon ```html - - - - - + @@ -88,7 +88,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,7 +100,7 @@ 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 | |------|------|------|------| diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap index bf5d774c2..831b6cf0a 100644 --- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap +++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap @@ -4,35 +4,35 @@ exports[`renders demo correctly 1`] = `
-
-
+
+
客服
-
-
+
+
购物车 -
+
-
-
+
+
客服
-
-
+
+
5
购物车
-
-
+
+
店铺 -
+
diff --git a/packages/goods-action/test/__snapshots__/index.spec.js.snap b/packages/goods-action/test/__snapshots__/index.spec.js.snap index f0ea9fd75..c56f2e1f2 100644 --- a/packages/goods-action/test/__snapshots__/index.spec.js.snap +++ b/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`] = ``; +exports[`Button render default slot 1`] = ``; -exports[`Mini render default slot 1`] = ` -
-
+exports[`Icon render default slot 1`] = ` +
+
Default Content
diff --git a/packages/goods-action/test/index.spec.js b/packages/goods-action/test/index.spec.js index db7d97116..9724e408a 100644 --- a/packages/goods-action/test/index.spec.js +++ b/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']); } }); diff --git a/packages/goods-action/zh-CN.md b/packages/goods-action/zh-CN.md index cc050782b..1a86ecebb 100644 --- a/packages/goods-action/zh-CN.md +++ b/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,24 @@ Vue ```html - - - - ``` @@ -44,10 +44,10 @@ Vue ```javascript export default { methods: { - onClickMiniBtn() { + onClickIcon() { Toast('点击图标'); }, - onClickBigBtn() { + onClickButton() { Toast('点击按钮'); } } @@ -59,21 +59,21 @@ export default { ```html - - - - - + @@ -88,7 +88,7 @@ export default { |------|------|------|------|------| | safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 | -#### GoodsActionMiniBtn +#### GoodsActionIcon | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| @@ -100,7 +100,7 @@ export default { | to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - | | replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - | -#### GoodsActionBigBtn +#### GoodsActionButton | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| diff --git a/packages/index.less b/packages/index.less index f7043691c..b54ab34d7 100644 --- a/packages/index.less +++ b/packages/index.less @@ -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'; diff --git a/packages/index.ts b/packages/index.ts index df025e938..cb9e5c116 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -27,8 +27,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'; @@ -108,8 +108,8 @@ const components = [ Dialog, Field, GoodsAction, - GoodsActionBigBtn, - GoodsActionMiniBtn, + GoodsActionButton, + GoodsActionIcon, Icon, ImagePreview, Info, @@ -193,8 +193,8 @@ export { Dialog, Field, GoodsAction, - GoodsActionBigBtn, - GoodsActionMiniBtn, + GoodsActionButton, + GoodsActionIcon, Icon, ImagePreview, Info, diff --git a/types/index.d.ts b/types/index.d.ts index b84ae7f21..56ad1de66 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -35,8 +35,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 {}