[new feature] Field: add arrow-direction prop (#3679)

src/button/README.zh-CN.md

@@ -102,9 +102,9 @@ Vue.use(Button);
 | tag | HTML 标签 | `String` | `button` | - |
 | native-type | 原生 button 标签 type 属性 | `String` | - | - |
 | block | 是否为块级元素 | `Boolean` | `false` | - |
-| plain | 是否为朴素按钮 | `Boolean` | `false` | 1.1.13 |
+| plain | 是否为朴素按钮 | `Boolean` | `false` | - |
-| square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |
+| square | 是否为方形按钮 | `Boolean` | `false` | - |
-| round | 是否为圆形按钮 | `Boolean` | `false` | 1.3.4 |
+| round | 是否为圆形按钮 | `Boolean` | `false` | - |
 | disabled | 是否禁用按钮 | `Boolean` | `false` | - |
 | hairline | 是否使用 0.5px 边框 | `Boolean` | `false` | 1.6.11 |
 | loading | 是否显示为加载状态 | `Boolean` | `false` | - |

src/cell/README.zh-CN.md

@@ -115,7 +115,7 @@ Vue.use(Cell).use(CellGroup);
 | title | 左侧标题 | `String | Number` | - | - |
 | value | 右侧内容 | `String | Number` | - | - |
 | label | 标题下方的描述信息 | `String` | - | - |
-| size | 单元格大小，可选值为 `large` | `String` | - | 1.4.4 |
+| size | 单元格大小，可选值为 `large` | `String` | - | - |
 | url | 跳转链接 | `String` | - | - |
 | to | 路由跳转对象，同 vue-router 的 to 属性 | `String | Object` | - | - |
 | border | 是否显示内边框 | `Boolean` | `true` | - |
@@ -123,12 +123,12 @@ Vue.use(Cell).use(CellGroup);
 | clickable | 是否开启点击反馈 | `Boolean` | `false` | - |
 | is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | - |
 | required | 是否显示表单必填星号 | `Boolean` | `false` | - |
-| center | 是否使内容垂直居中 | `Boolean` | `false` | 1.0.3 |
+| center | 是否使内容垂直居中 | `Boolean` | `false` | - |
-| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | 1.1.10 |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | -|
 | title-style | 左侧标题额外样式 | `any` | - | 1.6.17 |
-| title-class | 左侧标题额外类名 | `any` | - | 1.4.8 |
+| title-class | 左侧标题额外类名 | `any` | - | - |
-| value-class | 右侧内容额外类名 | `any` | - | 1.4.8 |
+| value-class | 右侧内容额外类名 | `any` | - | - |
-| label-class | 描述信息额外类名 | `any` | - | 1.4.8 |
+| label-class | 描述信息额外类名 | `any` | - | - |
 
 ### Cell Events
 

src/cell/index.tsx

@@ -9,10 +9,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { ScopedSlot, DefaultSlots } from '../utils/types';
 import { Mods } from '../utils/create/bem';
 
-export type CellProps = RouteProps &
+export type CellProps = RouteProps & SharedCellProps;
-  SharedCellProps & {
-    arrowDirection?: string;
-  };
 
 export type CellSlots = DefaultSlots & {
   icon?: ScopedSlot;
@@ -102,8 +99,7 @@ function Cell(
 
 Cell.props = {
   ...cellProps,
-  ...routeProps,
+  ...routeProps
-  arrowDirection: String
 };
 
 export default createComponent<CellProps, CellEvents, CellSlots>(Cell);

src/cell/shared.ts

@@ -13,6 +13,7 @@ export type SharedCellProps = {
   title?: string | number;
   value?: string | number;
   label?: string | number;
+  arrowDirection?: 'up' | 'down' | 'left' | 'right';
 }
 
 export const cellProps = {
@@ -29,6 +30,7 @@ export const cellProps = {
   title: [String, Number],
   value: [String, Number],
   label: [String, Number],
+  arrowDirection: String,
   border: {
     type: Boolean,
     default: true

src/field/README.md

@@ -134,6 +134,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh
 | clearable | Whether to be clearable | `Boolean` | `false` |
 | clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
 | is-link | Whether to show link icon | `Boolean` | `false` |
+| arrow-direction | Can be set to `left` `up` `down` | `String` | - |
 | error | Whether to show error info | `Boolean` | `false` |
 | error-message | Error message | `String` | `''` |
 | label-class | Label className | `any` | - |

src/field/README.zh-CN.md

@@ -134,17 +134,18 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla
 | disabled | 是否禁用输入框 | `Boolean` | `false` | - |
 | readonly | 是否只读 | `Boolean` | `false` | - |
 | required | 是否显示表单必填星号 | `Boolean` | `false` | - |
-| clearable | 是否启用清除控件 | `Boolean` | `false` | 1.1.9 |
+| clearable | 是否启用清除控件 | `Boolean` | `false` | - |
 | clickable | 是否开启点击反馈 | `Boolean` | `false` | 2.0.0 |
-| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | 1.1.10 |
+| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | - |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | 2.0.4 |
 | error | 是否将输入内容标红 | `Boolean` | `false` | - |
 | error-message | 底部错误提示文案，为空时不展示 | `String` | `''` | - 
 | label-class | 左侧文本额外类名 | `any` | - | 2.0.0 |
 | label-width | 左侧文本宽度，可指定单位，默认为 px | `String | Number` | `90px` | 1.6.17 |
-| label-align | 左侧文本对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
+| label-align | 左侧文本对齐方式，可选值为 `center` `right` | `String` | `left` | - |
-| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | 1.1.10 |
+| input-align | 输入框内容对齐方式，可选值为 `center` `right` | `String` | `left` | - |
 | error-message-align | 错误提示文案对齐方式，可选值为 `center` `right` | `String` | `left` | 1.6.11 |
-| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | 1.0.0 |
+| autosize | 自适应内容高度，只对 textarea 有效，可传入对象,<br>如 { maxHeight: 100, minHeight: 50 }，单位为 px | `Boolean | Object` | `false` | - |
 | left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 |
 | right-icon | 输入框尾部图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 1.5.7 |
 

src/field/index.js

@@ -292,6 +292,7 @@ export default createComponent({
         clickable={this.clickable}
         titleStyle={this.labelStyle}
         titleClass={[bem('label', labelAlign), this.labelClass]}
+        arrowDirection={this.arrowDirection}
         class={bem({
           error: this.error,
           disabled: this.$attrs.disabled,

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

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`arrow-direction prop 1`] = `
+<div class="van-cell van-cell--clickable van-field">
+  <div class="van-cell__value van-cell__value--alone">
+    <div class="van-field__body"><input type="text" class="van-field__control"></div>
+  </div><i class="van-icon van-icon-arrow-up van-cell__right-icon">
+    <!----></i>
+</div>
+`;
+
 exports[`clearable 1`] = `
 <div class="van-cell van-field">
   <div class="van-cell__value van-cell__value--alone">

src/field/test/index.spec.js

@@ -235,3 +235,13 @@ test('label-class prop', () => {
   });
   expect(wrapper).toMatchSnapshot();
 });
+
+test('arrow-direction prop', () => {
+  const wrapper = mount(Field, {
+    propsData: {
+      isLink: true,
+      arrowDirection: 'up'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});