Skip to content

Commit dab9d9a

Browse files
moyusmoyus
committed
feat(field,field-item): code refactor
BREAKING CHANGE: remove unnecessary code and rename some slots
1 parent 39049ff commit dab9d9a

12 files changed

Lines changed: 374 additions & 592 deletions

File tree

‎components/_style/mixin/theme.components.styl‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -162,35 +162,24 @@ drop-menu-disabled-opacity = opacity-disabled
162162
field-padding-h = h-gap-sl
163163
field-padding-v = v-gap-sl
164164
field-bg-color = color-bg-inverse
165+
field-header-gap = v-gap-lg
166+
field-footer-gap = v-gap-md
165167
field-title-color = color-text-base
166168
field-title-font-size = font-caption-large
167169
field-title-font-weight = font-weight-normal
168-
field-title-operator-color = color-text-minor
169-
field-title-operator-font-size = font-body-large
170-
field-title-margin = 36px
171-
field-item-padding-v = v-gap-lg
172-
field-item-bg-tap-color = color-bg-tap
173-
field-item-label-color = color-text-base
174-
field-item-label-font-size = font-caption-normal
175-
field-item-label-font-weight = font-weight-normal
176-
field-item-content-color = color-text-base
177-
field-item-content-font-size = font-caption-normal
178-
field-item-content-font-weight = font-weight-medium
179-
field-item-icon-color = #ccc
170+
field-describe-color = color-text-caption
171+
field-describe-font-size = font-body-large
172+
field-action-color = color-text-minor
173+
field-action-font-size = font-body-large
174+
175+
// field-item
176+
field-item-min-height = 108px
177+
field-item-padding-v = 30px
178+
field-item-color = color-text-base
179+
field-item-font-size = font-caption-normal
180+
field-item-after-color = color-text-caption
181+
field-item-after-font-size = font-body-large
180182
field-item-border-color = color-border-base
181-
field-item-color-disabled = opacity-disabled
182-
field-item-brief-font-size = font-body-normal
183-
field-item-brief-color = color-text-caption
184-
field-title-plain-color = color-text-body
185-
field-title-plain-font-size = font-body-large
186-
field-padding-plain-h = h-gap-lg
187-
field-padding-plain-v = v-gap-lg
188-
field-bg-plain-color = color-bg-base
189-
field-item-padding-plain-v = h-gap-md
190-
field-item-label-plain-color = color-text-caption
191-
field-item-label-plain-font-size = font-body-large
192-
field-item-content-plain-color = color-text-body
193-
field-item-content-plain-font-size = font-body-large
194183

195184
// icon
196185
icon-size-xs = 20px
@@ -205,6 +194,7 @@ image-viewer-index-bottom = 100px
205194

206195
// input-item
207196
input-item-height = 100px
197+
input-item-border-color = color-border-base
208198
input-item-title-width = 170px
209199
input-item-title-gap = 22px
210200
input-item-font-size = font-caption-normal

‎components/_style/mixin/theme.variable.styl‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -105,23 +105,27 @@ tag-small-font-size = var(--tag-small-font-size)
105105
tag-tiny-font-size = var(--tag-tiny-font-size)
106106

107107
// field
108-
field-padding = var(--field-padding)
109108
field-padding-h = var(--field-padding-h)
110109
field-padding-v = var(--field-padding-v)
111-
field-title-font-size = var(--field-title-font-size)
110+
field-bg-color = var(--field-bg-color)
111+
field-header-gap = var(--field-header-gap)
112+
field-footer-gap = var(--field-footer-gap)
112113
field-title-color = var(--field-title-color)
114+
field-title-font-size = var(--field-title-font-size)
113115
field-title-font-weight = var(--field-title-font-weight)
114-
field-title-margin = var(--field-title-margin)
116+
field-describe-color = var(--field-describe-color)
117+
field-describe-font-size = var(--field-describe-font-size)
118+
field-action-color = var(--field-action-color)
119+
field-action-font-size = var(--field-action-font-size)
120+
121+
// field-item
122+
field-item-min-height = var(--field-item-min-height)
115123
field-item-padding-v = var(--field-item-padding-v)
116-
field-item-bg-color = var(--field-item-bg-color)
117-
field-item-bg-tap-color = var(--field-item-bg-tap-color)
118124
field-item-color = var(--field-item-color)
119125
field-item-font-size = var(--field-item-font-size)
120-
field-item-icon-color = var(--field-item-icon-color)
126+
field-item-after-color = var(--field-item-after-color)
127+
field-item-after-font-size = var(--field-item-after-font-size)
121128
field-item-border-color = var(--field-item-border-color)
122-
field-item-color-disabled = var(--field-item-color-disabled)
123-
field-item-brief-font-size = var(--field-item-brief-font-size)
124-
field-item-brief-color = var(--field-item-brief-color)
125129

126130
// input-item
127131
input-item-height = var(--input-item-height)

‎components/field-item/test/index.spec.js‎

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -19,69 +19,43 @@ describe('FieldItem', () => {
1919
expect(wrapper.vm.title).to.equal('field item title')
2020
})
2121

22-
it('create a simple field-item with brief', () => {
22+
it('create a simple field-item with describe', () => {
2323
wrapper = mount(FieldItem, {
2424
propsData: {
2525
title: 'field item title',
26-
brief: 'field item brief',
26+
describe: 'field item describe',
2727
},
2828
})
2929

30-
expect(wrapper.find('.md-field-item-brief').length).to.equal(1)
30+
expect(wrapper.find('.md-field-item-describe').length).to.equal(1)
3131
})
3232

3333
it('create a simple field-item with arrow', () => {
3434
wrapper = mount(FieldItem, {
3535
propsData: {
3636
title: 'field item title',
37-
brief: 'field item brief',
38-
arrow: 'arrow-right',
37+
describe: 'field item describe',
38+
arrow: true,
3939
},
4040
})
4141

42-
expect(wrapper.hasClass('has-arrow')).to.be.true
42+
expect(wrapper.contains('.md-icon-arrow-right')).to.be.true
4343

4444
const eventStub = sinon.stub(wrapper.vm, '$emit')
4545
wrapper.trigger('click')
4646
expect(eventStub.calledWith('click')).to.be.true
4747
})
4848

49-
it('create a field-item with solid title', () => {
50-
wrapper = mount(FieldItem, {
51-
propsData: {
52-
title: 'field item title',
53-
brief: 'field item brief',
54-
arrow: 'arrow-right',
55-
solid: true,
56-
},
57-
})
58-
59-
expect(wrapper.find('.solid').length).to.equal(1)
60-
})
61-
62-
it('create a field-item with customized value align right', () => {
63-
wrapper = mount(FieldItem, {
64-
propsData: {
65-
title: 'field item title',
66-
brief: 'field item brief',
67-
customized: true,
68-
align: 'right',
69-
},
70-
})
71-
72-
expect(wrapper.vm.customized).to.be.true
73-
})
74-
7549
it('create a disabled field-item', () => {
7650
wrapper = mount(FieldItem, {
7751
propsData: {
7852
title: 'field item title',
79-
brief: 'field item brief',
80-
arrow: 'arrow-right',
53+
describe: 'field item describe',
54+
arrow: true,
8155
disabled: true,
8256
},
8357
})
8458

85-
expect(wrapper.hasClass('disabled')).to.be.true
59+
expect(wrapper.hasClass('is-disabled')).to.be.true
8660
})
8761
})

‎components/field/README.en-US.md‎

Lines changed: 55 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -23,37 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
2323
|Props | Description | Type | Default | Note|
2424
|----|-----|------|------|------|
2525
|title|title|String|-|-|
26+
|describe|description|String|-|-|
27+
|disabled|disable content operation|Boolean|false|-|
28+
|plain|plain style|Boolean|false|-|
2629

27-
#### FieldItem Props
28-
|Props | Description | Type | Default | Note|
29-
|----|-----|------|------|------|
30-
|name|name|Number/String|-1|-|
31-
|title|title|Number/String|-|-|
32-
|brief|subtitle|String|-|-|
33-
|disabled|whether to disable it or not|Boolean|true|-|
34-
|arrow|the name of arrow|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
35-
|customized|the content is customized or not|Boolean|have `slot` or not|-|
36-
|align|the position of customized contents|String|left|`left`, `right`, `center`|
37-
|value|content|String|-|-|
38-
|solid|the width of title is fixed or not|Boolean|false|-|
30+
When use `disabled` prop, its descendants can use [inject](https://vuejs.org/v2/api/#provide-inject)to have access of `Field` ancestor.
3931

40-
#### FieldItem Slots
32+
```javascript
33+
export default {
34+
name: 'your-component',
35+
36+
inject: {
37+
rootField: {
38+
from: 'rootField',
39+
default: () => ({})
40+
}
41+
},
42+
43+
computed: {
44+
disabled() {
45+
return this.rootField.disabled
46+
}
47+
},
48+
}
49+
```
50+
51+
#### Field Slots
4152

4253
##### default
43-
Default slot of content
54+
default content slot
55+
56+
##### header
57+
header content slot
4458

45-
##### left
46-
Left slot of title <sup class="version-after">1.4.0+</sup>
59+
##### action
60+
header action slot
4761

48-
##### right
49-
Right slot of content <sup class="version-after">1.4.0+</sup>
62+
##### footer
63+
footer content slot
64+
65+
---
66+
67+
#### FieldItem Props
68+
|Props | Description | Type | Default | Note|
69+
|----|-----|------|------|------|
70+
|title|title|String|-|-|
71+
|describe|description|String|-|-|
72+
|disabled|disable item operation|Boolean|false|-|
73+
|arrow|arrow indicator|Boolean|false|-|
5074

5175
#### FieldItem Events
76+
##### @click(event)
77+
click event when not disabled
78+
79+
#### FieldItem Slots
80+
81+
##### default
82+
default content slot
5283

53-
##### @click(name)
84+
##### start
85+
start content slot
5486

55-
Click event
87+
##### after
88+
after content slot
5689

57-
|Props | Description | Type |
58-
|----|-----|------|
59-
|name|the name of fieldItem|Number/String|
90+
##### children
91+
extra children slot

‎components/field/README.md‎

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Field 区域列表组合
33
preview: https://didi.github.io/mand-mobile/examples/#/field
44
---
55

6-
区域列表垂直排列，显示当前的内容、状态和可进行的操作
6+
区域列表垂直排列，显示当前的内容、状态和可进行的操作。
77

88
### 引入
99

@@ -23,36 +23,69 @@ Vue.component(FieldItem.name, FieldItem)
2323
|属性 | 说明 | 类型 | 默认值|备注|
2424
|----|-----|------|------|------|
2525
|title|标题|String|-|-|
26+
|describe|描述内容|String|-|-|
27+
|disabled|是否禁用区域|Boolean|false|-|
28+
|plain|镂空样式|Boolean|false|-|
29+
30+
当使用了`disabled`选项时，其后代内容可以通过[inject](https://vuejs.org/v2/api/#provide-inject)的方式获取祖先`Field`的实例属性。
31+
32+
```javascript
33+
export default {
34+
name: 'your-component',
35+
36+
inject: {
37+
rootField: {
38+
from: 'rootField',
39+
default: () => ({})
40+
}
41+
},
42+
43+
computed: {
44+
disabled() {
45+
return this.rootField.disabled
46+
}
47+
},
48+
}
49+
```
50+
51+
#### Field Slots
52+
53+
##### default
54+
内容默认插槽
55+
56+
##### header
57+
页眉内容插槽
58+
59+
##### action
60+
页眉操作区域插槽
61+
62+
##### footer
63+
页脚内容插槽
64+
65+
---
2666

2767
#### FieldItem Props
28-
|属性 | 说明 | 类型 | 默认值 |备注|
68+
|属性 | 说明 | 类型 | 默认值|备注|
2969
|----|-----|------|------|------|
30-
|name|标识|Number/String| `-1`|-|
3170
|title|标题|String|-|-|
32-
|brief|子标题|String|-|-|
33-
|disabled|是否禁用|Boolean|`true`|-|
34-
|arrow|箭头名称|String|-|`arrow-up`, `arrow-right`, `arrow-down`, `arrow-left`|
35-
|customized|内容是否自定义|Boolean|是否有`slot`|-|
36-
|align|自定义内容时，内容位置|String|`left`|`left`, `right`, `center`|
37-
|value|内容|String|-|-|
38-
|solid|是否固定标题宽度，超出会自动换行|Boolean|`false`|-|
71+
|describe|描述内容|String|-|-|
72+
|disabled|是否禁用项目|Boolean|false|-|
73+
|arrow|动作箭头标识|Boolean|false|-|
74+
75+
#### FieldItem Events
76+
##### @click(event)
77+
非禁用状态下的点击事件
3978

4079
#### FieldItem Slots
4180

4281
##### default
4382
内容默认插槽
4483

45-
##### left
46-
标题左侧插槽 <sup class="version-after">1.4.0+</sup>
47-
48-
##### right
49-
内容右侧插槽 <sup class="version-after">1.4.0+</sup>
50-
51-
#### FieldItem Events
84+
##### start
85+
头部区域插槽
5286

53-
##### @click(name)
54-
点击事件
87+
##### after
88+
末尾预期插槽
5589

56-
|属性 | 说明 | 类型|
57-
|----|-----|------|
58-
|name|fieldItem标识|Number/String|
90+
##### children
91+
额外内容插槽

0 commit comments

Comments
 (0)