Skip to content

Commit

Permalink
Feat textarea item delete icon (didi#591)
Browse files Browse the repository at this point in the history 
* feat(textarea-item): add delete icon

* feat(test): update textarea-item test

* test(textarea-item):  add textarea-item unit test

* doc(textarea-item): add clearable  doc

* doc(textarea-item):  mark the avaiable version for clearable
  • Loading branch information
@msdlisper @xxyan0205
msdlisper authored and xxyan0205 committed Oct 11, 2019
1 parent 05e721a commit 8608137
Show file tree
Hide file tree
Showing 8 changed files with 119 additions and 37 deletions.
3 changes: 2 additions & 1 deletion components/_style/mixin/theme.components.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,8 +241,9 @@ input-item-icon = color-text-placeholder // delete icon
/// textarea-item
textarea-item-font-size = font-caption-normal
textarea-item-font-weight = font-weight-medium
textarea-item-line-height = 1.4
textarea-item-line-height = 1.5
textarea-item-color = color-text-base
textarea-item-icon = color-text-placeholder // delete icon
textarea-item-color-error = color-text-error
textarea-item-color-disabled = color-text-caption
textarea-item-placeholder-color = color-text-placeholder
Expand Down
27 changes: 14 additions & 13 deletions components/textarea-item/README.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,20 @@ Vue.component(TextareaItem.name, TextareaItem)
### API

#### TextareaItem Props
| Props | Description | Type | Default | Note |
| ----------- | ------------------------------------------------ | ------------- | ------- | ------------------ |
| title | title of textarea | String | - | - |
| placeholder | placeholder of textarea | String | - | - |
| v-model | value of textarea | String | - | |
| max-length | max length of textarea | String/Number | - | - |
| autosize | Dose the Textarea resize with content | Boolean | `false` | - |
| max-height | The max height of textarea with `autosize=true`, | String/Number | `'40'` | rely on `autosize` |
| solid | the width of title is fixed or not | Boolean | `true` | |
| readonly | readonly | Boolean | `false` | - |
| disabled | disabled | Boolean | `false` | - |
| rows | rows | String/Number | `'3'` | - |
| error | error message | String | - | - |
| Props | Description | Type | Default | Note |
| ------------------------------------------------- | ----------------------------------------------- | ------------- | ------- | ------------------ |
| title | title of textarea | String | - | - |
| placeholder | placeholder of textarea | String | - | - |
| v-model | value of textarea | String | - | |
| max-length | max length of textarea | String/Number | - | - |
| autosize | Dose the Textarea resize with content | Boolean | `false` | - |
| max-height | The max height of textarea with `autosize=true` | String/Number | `'40'` | rely on `autosize` |
| solid | the width of title is fixed or not | Boolean | `true` | |
| readonly | readonly | Boolean | `false` | - |
| disabled | disabled | Boolean | `false` | - |
| clearable <sup class="version-after">2.5.3+</sup> | clearable | Boolean | `false` | - |
| rows | rows | String/Number | `'3'` | - |
| error | error message | String | - | - |

#### TextareaItem Slots

Expand Down
27 changes: 14 additions & 13 deletions components/textarea-item/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,20 @@ Vue.component(TextareaItem.name, TextareaItem)
### API

#### TextareaItem Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
| ----------- | ------------------------------------------------ | ------------- | ------- | -------------- |
| title | 标题 | String | - | - |
| placeholder | 占位符 | String | - | - |
| v-model | 输入内容 | String | - | |
| max-length | 可输入的字符长度 | String/Number | - | - |
| autosize | 是否可自动适应高度 | Boolean | `false` | - |
| max-height | 在`autosize=true`的情况, 文本域最长的高度 | String/Number | `'40'` | 依赖`autosize` |
| solid | title的宽度是否固定 | Boolean | `true` | |
| readonly | 是否只读 | Boolean | `false` | - |
| disabled | 是否禁用 | Boolean | `false` | - |
| rows | 开始显示的行数 | String/Number | `'3'` | - |
| error | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String | - | - |
| 属性 | 说明 | 类型 | 默认值 | 备注 |
| ------------------------------------------------- | ------------------------------------------------ | ------------- | ------- | -------------- |
| title | 标题 | String | - | - |
| placeholder | 占位符 | String | - | - |
| v-model | 输入内容 | String | - | |
| max-length | 可输入的字符长度 | String/Number | - | - |
| autosize | 是否可自动适应高度 | Boolean | `false` | - |
| max-height | 在`autosize=true`的情况, 文本域最长的高度 | String/Number | `'40'` | 依赖`autosize` |
| solid | title的宽度是否固定 | Boolean | `true` | |
| readonly | 是否只读 | Boolean | `false` | - |
| disabled | 是否禁用 | Boolean | `false` | - |
| clearable <sup class="version-after">2.5.3+</sup> | 是否有删除图标 | Boolean | `false` | - |
| rows | 开始显示的行数 | String/Number | `'3'` | - |
| error | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String | - | - |

#### TextareaItem Slots

Expand Down
13 changes: 11 additions & 2 deletions components/textarea-item/demo/cases/demo0.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,19 @@
ref="demo0"
title="自动适应"
class="example"
v-model="value"
:autosize="true"
:rows="1"
placeholder="最大高度100px 超过出现滚动条"
placeholder="最大高度150px"
:max-height="150"
/>
<md-textarea-item
ref="demo0"
title="删除图标"
class="example"
:autosize="true"
clearable
:rows="1"
placeholder="输入出现删除图标"
:max-height="150"
/>
<md-textarea-item
Expand Down
34 changes: 34 additions & 0 deletions components/textarea-item/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,17 @@
@keydown="$_onKeydown"
></textarea>
<slot name="footer"></slot>
<template slot="right">
<div
class="md-textarea-item__clear"
v-if="clearable && !isDisabled && !readonly"
v-show="!isInputEmpty"
@click="$_clearInput"
>
<md-icon name="clear"></md-icon>
</div>
<slot name="right"></slot>
</template>
<template slot="children">
<div v-if="errorInfo" class="md-textarea-item-msg">
<p>{{ errorInfo }}</p>
Expand All @@ -32,11 +43,13 @@
</md-field-item>
</template>
<script>import FieldItem from '../field-item'
import Icon from '../icon'
export default {
name: 'md-textarea-item',
components: {
[FieldItem.name]: FieldItem,
[Icon.name]: Icon,
},
props: {
title: {
Expand Down Expand Up @@ -71,6 +84,10 @@ export default {
type: Boolean,
default: false,
},
clearable: {
type: Boolean,
default: false,
},
rows: {
type: [String, Number],
default: '3',
Expand All @@ -97,6 +114,9 @@ export default {
errorInfo() {
return this.error
},
isInputEmpty() {
return !this.inputValue.length
},
},
watch: {
value(val) {
Expand All @@ -123,6 +143,13 @@ export default {
this.resizeTextarea()
})
},
$_clearInput() {
this.inputValue = ''
this.$nextTick(() => {
this.resizeTextarea()
})
this.focus()
},
$_onKeyup(event) {
this.$emit('keyup', event)
},
Expand Down Expand Up @@ -176,6 +203,13 @@ export default {
.md-textarea-item__textarea
-webkit-text-fill-color textarea-item-color-disabled
color textarea-item-color-disabled
.md-field-item-right
align-items start
&__clear
padding 6px 0
color textarea-item-icon
.md-icon
display flex
&__textarea
color textarea-item-color
font-weight textarea-item-font-weight
Expand Down
13 changes: 12 additions & 1 deletion components/textarea-item/test/__snapshots__/deme.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,22 @@ exports[`TextareaItem - Demo Basic 1`] = `
<div class="md-field-item md-textarea-item example is-solid is-browser">
<div class="md-field-item-content"><label class="md-field-item-title">自动适应</label>
<!---->
<div class="md-field-item-control"><textarea maxlength="10" placeholder="最大高度100px 超过出现滚动条" rows="1" class="md-textarea-item__textarea"></textarea> </div>
<div class="md-field-item-control"><textarea maxlength="" placeholder="最大高度150px" rows="1" class="md-textarea-item__textarea"></textarea> </div>
<!---->
</div>
<!---->
</div>
<div class="md-field-item md-textarea-item example is-solid is-browser">
<div class="md-field-item-content"><label class="md-field-item-title">删除图标</label>
<!---->
<div class="md-field-item-control"><textarea maxlength="" placeholder="输入出现删除图标" rows="1" class="md-textarea-item__textarea"></textarea> </div>
<div class="md-field-item-right">
<div class="md-textarea-item__clear" style="display:none;"><i class="md-icon icon-font md-icon-clear clear md" style="color:;"></i></div>
<!---->
</div>
</div>
<!---->
</div>
<div class="md-field-item md-textarea-item example is-solid is-browser is-disabled">
<div class="md-field-item-content"><label class="md-field-item-title">禁用</label>
<!---->
Expand Down
23 changes: 16 additions & 7 deletions components/textarea-item/test/cases/demo0.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,20 @@
ref="demo0"
title="自动适应"
class="example"
v-model="value"
:autosize="true"
:rows="1"
maxLength="10"
placeholder="最大高度100px 超过出现滚动条"
:max-height="100"
placeholder="最大高度150px"
:max-height="150"
/>
<md-textarea-item
ref="demo0"
title="删除图标"
class="example"
:autosize="true"
clearable
:rows="1"
placeholder="输入出现删除图标"
:max-height="150"
/>
<md-textarea-item
ref="demo0"
Expand All @@ -27,7 +35,7 @@
:autosize="true"
value="禁用文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
placeholder="500字以内"
:max-height="100"
:max-height="150"
disabled
/>
<md-textarea-item
Expand All @@ -37,7 +45,7 @@
:autosize="true"
value="只读文本域, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述, 理赔报案描述"
placeholder="500字以内"
:max-height="100"
:max-height="150"
readonly
/>
</md-field>
Expand All @@ -48,8 +56,9 @@
export default {
name: 'tips-demo',
/* DELETE */
title: '普通文本域',
titleEnUS: 'basic',
/* DELETE */
data() {
return {
value: '',
Expand Down
16 changes: 16 additions & 0 deletions components/textarea-item/test/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,20 @@ describe('TextareaItem - Operation', () => {
}, 120)
wrapper.vm.focus()
})

test('input with delete icon', () => {
wrapper = mount(TextareaItem, {
propsData: {
maxHeight: 300,
maxLength: 10,
autosize: true,
clearable: true,
value: '1',
},
})
expect(wrapper.contains('.md-textarea-item__clear'))
const clearBtn = wrapper.find('.md-textarea-item__clear')
clearBtn.trigger('click')
expect(wrapper.vm.inputValue).toBe('')
})
})

0 comments on commit 8608137

Please sign in to comment.