Merge branch 'dev'

CHANGELOG.en-US.md

@@ -3,6 +3,18 @@ title: Change Log
 toc: hidden
 ---
 
+### 2.5.13
+
+`2020-09-17`
+
+- Feat
+  - `TextareaItem` support formation[#699](https://github.com/didi/mand-mobile/issues/699)
+
+- Fix
+  - Fix spelling errors in the document[#690](https://github.com/didi/mand-mobile/issues/690)
+  - Fix the bug of `DatePicker` unit test
+  - Fix the type check of `RadioGroup` to `value`[#693](https://github.com/didi/mand-mobile/issues/693)
+
 ### 2.5.12
 
 `2020-07-24`

CHANGELOG.md

@@ -3,6 +3,18 @@ title: 更新日志
 toc: hidden
 ---
 
+### 2.5.13
+
+`2020-09-17`
+
+- Feat
+  - `TextareaItem`支持格式化[#699](https://github.com/didi/mand-mobile/issues/699)
+
+- Fix
+  - 修复文档中的拼写错误[#690](https://github.com/didi/mand-mobile/issues/690)
+  - 修复`DatePicker`单元测试的错误
+  - 修复`RadioGroup`对`value`的类型校验[#693](https://github.com/didi/mand-mobile/issues/693)
+
 ### 2.5.12
 
 `2020-07-24`

components/date-picker/README.en-US.md

@@ -28,15 +28,15 @@ Vue.component(DatePicker.name, DatePicker)
 |default-date|initial selected date|Date|-|-|
 |minute-step|increasing steps of minutes|Number|`1`|-|
 |unit-text|element unit for text displaying|Array|`['y', 'M', 'd', 'h', 'm']`|`text-render` for complex logic|
-|text-render|customized option for text displaying|Function(typeFormat, column0Value, column1Value, ...): String|-|`unit-text` is invalid when using `text-render`, refer to `Appendix`|              
-|today-text|displaying text of today|String|`today`|use `&` to take placeholder date, like `&(today)`| 
-|line-height|line height of options|Number|`45`|unit `px`| 
-|keep-index <sup class="version-after">2.5.2+</sup>|keep last stop position when the column data changes|Boolean|`false`|-|          
-|is-view|inline-display in page, otherwise it shows as `Popup`|Boolean|`false`|-| 
+|text-render|customized option for text displaying|Function(typeFormat, column0Value, column1Value, ...): String|-|`unit-text` is invalid when using `text-render`, refer to `Appendix`|
+|today-text|displaying text of today|String|`today`|use `&` to take placeholder date, like `&(today)`|
+|line-height|line height of options|Number|`45`|unit `px`|
+|keep-index <sup class="version-after">2.5.2+</sup>|keep last stop position when the column data changes|Boolean|`false`|-|
+|is-view|inline-display in page, otherwise it shows as `Popup`|Boolean|`false`|-|
 |title|title of date-picker|String|-|-|
 |describe|description of date-picker|String|-|-|
-|ok-text|confirmation text|String|`confirm`|-| 
-|cancel-text|cancellation text|String|`cancel`|-| 
+|ok-text|confirmation text|String|`confirm`|-|
+|cancel-text|cancellation text|String|`cancel`|-|
 |large-radius <sup class="version-after">2.4.0+</sup>|large radius of title bar|Boolean|`false`|-|
 |mask-closable|picker will be closed when clicking mask|String|`true`|-|
 
@@ -68,7 +68,7 @@ Returns
 
 |Props | Description | Type|
 |----|-----|------|
-|activeItemValue|value of selected item|Object: {value, lable, ...}|
+|activeItemValue|value of selected item|Object: {value, label, ...}|
 
 ##### getColumnValues(): columnsValue
 Get all values of currently seleted items, which is called after `initialed` event is invoked or asynchronously called
@@ -77,7 +77,7 @@ Returns
 
 |Props | Description | Type|
 |----|-----|------|
-|columnsValue|values of all selected items in the column|Array<{value, lable, ...}>|
+|columnsValue|values of all selected items in the column|Array<{value, label, ...}>|
 
 ##### getColumnIndex(index): activeItemIndex
 Get the index of the currently selected item in the column, which is called after `initialed` event is invoked or asynchronously called
@@ -113,18 +113,18 @@ Change selections of date picker
 |----|-----|------|
 |columnIndex|change the index of column|Number|
 |itemIndex|change the index of selected item|Number|
-|value|change the value of selected item|Object: {value, lable, ...}|
+|value|change the value of selected item|Object: {value, label, ...}|
 
 ##### @confirm(columnsValue)
 Confirm the selection of date picker(only when `is-view` is `false`）
 
 |Parameters | Description | Type|
 |----|-----|------|
-|columnsValue|values of selected items in the column|Array<{value, lable, ...}>|
+|columnsValue|values of selected items in the column|Array<{value, label, ...}>|
 
 #### Appendix
 
-* columnData  
+* columnData
 
 ```javascript
 

components/date-picker/test/index.spec.js

@@ -15,7 +15,7 @@ describe('DatePicker - Operation', () => {
       propsData: {
         isView: true,
         minDate: new Date('2013/9/9'),
-        maxDate: new Date('2020/9/9'),
+        maxDate: new Date(`${date.getFullYear() + 1}/9/9`),
         defaultDate: date,
         todayText: '今天',
       },

components/landscape/README.md

@@ -1,5 +1,5 @@
 ---
-title: Landscape 输入框
+title: Landscape 压屏窗
 preview: https://didi.github.io/mand-mobile/examples/#/landscape
 ---
 

components/picker/README.md

@@ -22,15 +22,15 @@ Vue.component(Picker.name, Picker)
 |属性 | 说明 | 类型 | 默认值 | 备注|
 |----|-----|------|------|------|
 |v-model|选择器是否可见|Boolean|`false`|-|
-|data|数据源|Array<{value, lable, ...}>[]|`[]`|-|
+|data|数据源|Array<{value, label, ...}>[]|`[]`|-|
 |cols|数据列数|Number|`1`|-|
 |default-index|选择器各列初始选中项索引|Array|`[]`|-|
 |default-value|选择器各列初始选中项值|Array|`[]`|可用字段`text/label/value`|
 |invalid-index|选择器各列不可用选项索引|Array|`[]`|某列多个不可用项使用数组，单个使用数字, 如`[[1,2], 2]`|
 |line-height|选择器选项行高|Number|`45`|单位`px`|
 |is-view|是否内嵌在页面内展示，否则以弹层形式|Boolean|`false`|-|
 |is-cascade|各列数据是否级联|Boolean|`false`|级联数据格式见附录|
-|keep-index <sup class="version-after">2.5.2+</sup>|当列数据变化时保持上次停留的位置|Boolean|`false`|仅用于级联数据|  
+|keep-index <sup class="version-after">2.5.2+</sup>|当列数据变化时保持上次停留的位置|Boolean|`false`|仅用于级联数据|
 |title|选择器标题|String|-|-|
 |describe|选择器描述|String|-|-|
 |ok-text|选择器确认文案|String|`确认`|-|

components/radio/group.vue

@@ -9,7 +9,6 @@
 
   props: {
     value: {
-      type: String,
       default: '',
     },
     max: {

components/textarea-item/README.en-US.md

@@ -33,6 +33,7 @@ Vue.component(TextareaItem.name, TextareaItem)
 | clearable <sup class="version-after">2.5.3+</sup> | clearable                                       | Boolean       | `false` | -                  |
 | rows                                              | rows                                            | String/Number | `'3'`   | -                  |
 | error                                             | error message                                   | String        | -       | -                  |
+|formation <sup class="version-after">2.5.13+</sup>  |input text formatting callback function|Function(name, curValue, curPos): {value: curValue, range: curPos}|-|passing parameter `name` is the name of input, `curValue` is input value, `curPos` is the current position of input cursor, and returned `value` is formatted value. `range` is the position of input cursor after formatting|
 
 #### TextareaItem Slots
 

components/textarea-item/README.md

@@ -33,6 +33,7 @@ Vue.component(TextareaItem.name, TextareaItem)
 | clearable <sup class="version-after">2.5.3+</sup> | 是否有删除图标                                   | Boolean       | `false` | -              |
 | rows                                              | 开始显示的行数                                   | String/Number | `'3'`   | -              |
 | error                                             | 是否显示错误, 如果有内容就认定是出错, 并显示出来 | String        | -       | -              |
+| formation <sup class="version-after">2.5.13+</sup> |表单文本格式化回调方法                         |Function(name, curValue, curPos): {value: curValue, range: curPos}|-|传入参数`name`为表单名称，`curValue`为表单值，`curPos`为表单光标当前所在位置<br/>返回参数`value`格式化值, `range`表单光标格式化后所在位置|
 
 #### TextareaItem Slots
 

components/textarea-item/demo/cases/demo0.vue

@@ -49,6 +49,15 @@
         :max-height="150"
         readonly
       />
+      <md-textarea-item
+        ref="demo0"
+        title="格式化"
+        autosize
+        class="example"
+        v-model="value3"
+        :formation="format"
+        placeholder="去掉所有数字"
+      />
     </md-field>
   </div>
 </template>
@@ -64,6 +73,7 @@ export default {
     return {
       value: '',
       value2: '',
+      value3: '',
     }
   },
   components: {
@@ -75,5 +85,13 @@ export default {
       this.value2 = '异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应'
     }, 1000)
   },
+  methods: {
+    format(name, curValue, curPos) {
+      return {
+        value: curValue.replace(/\d/g, ''),
+        range: curPos,
+      }
+    },
+  },
 }
 </script>

components/textarea-item/index.vue

@@ -44,6 +44,8 @@
 </template>
 <script>import FieldItem from '../field-item'
 import Icon from '../icon'
+import {noop, randomId} from '../_util'
+import {getCursorsPosition, setCursorsPosition} from '../input-item/cursor'
 
 export default {
   name: 'md-textarea-item',
@@ -56,6 +58,12 @@ export default {
       type: String,
       default: '',
     },
+    name: {
+      type: [String, Number],
+      default() {
+        return randomId('input-item')
+      },
+    },
     placeholder: {
       type: String,
       default: '',
@@ -100,6 +108,10 @@ export default {
       type: String,
       defalut: '',
     },
+    formation: {
+      type: Function,
+      default: noop,
+    },
   },
   data() {
     return {
@@ -140,12 +152,26 @@ export default {
   },
   methods: {
     $_onInput(event) {
-      this.inputValue = event.target.value
+      const formateValue = this.$_formateValue(event.target.value, getCursorsPosition(event.target))
+
+      this.inputValue = formateValue.value
 
       this.$nextTick(() => {
+        setCursorsPosition(event.target, formateValue.range)
         this.resizeTextarea()
       })
     },
+    $_formateValue(curValue, curPos = 0) {
+      // custom format by user
+      const customValue = this.formation(name, curValue, curPos)
+
+      if (customValue) {
+        return customValue
+      }
+
+      // no format
+      return {value: curValue, range: curPos}
+    },
     $_clearInput() {
       this.inputValue = ''
       this.$nextTick(() => {

components/textarea-item/test/index.spec.js

@@ -117,6 +117,33 @@ describe('TextareaItem - Operation', () => {
     wrapper.vm.focus()
   })
 
+  test('formation', done => {
+    wrapper = mount(TextareaItem, {
+      propsData: {
+        maxHeight: 300,
+        maxLength: 10,
+        autosize: true,
+        formation(name, curValue, curPos) {
+          return {
+            value: curValue.replace(/\d/g, ''),
+            range: curPos,
+          }
+        },
+        value: 'abc',
+      },
+    })
+    const textarea = wrapper.vm.$refs.textarea
+
+    expect(wrapper.vm.getValue()).toBe('abc')
+    triggerEvent(textarea, 'input', 0, 0, 'efg1')
+
+    setTimeout(() => {
+      expect(wrapper.vm.getValue()).toBe('abcefg')
+      done()
+    }, 100)
+    wrapper.vm.focus()
+  })
+
   test('input with delete icon', () => {
     wrapper = mount(TextareaItem, {
       propsData: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mand-mobile",
-  "version": "2.5.12",
+  "version": "2.5.13",
   "description": "A Vue.js 2.0 Mobile UI Toolkit",
   "homepage": "https://didi.github.io/mand-mobile",
   "main": "lib/mand-mobile.umd.js",