[feat] Picker-based: subtitle (#174)

* [feat]picker-based: subtitle

Author: AmyFoxFN

document/components/docs/en-US/cascade-picker.md

@@ -222,9 +222,10 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
-| title | title | String | '' | - |
 | data | the cascading data used to init option items | Array | [] | - |
 | selectedIndex | the index of the selected item, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| title | title | String | '' | - |
+| subtitle<sup>1.8.1</sup> | subtitle | String | '' | - |
 | cancelTxt | the text of the cancel button | String | '取消' | - |
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |

document/components/docs/en-US/date-picker.md

@@ -242,6 +242,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | columnCount | the count of column | Number | - | 3 | 6 |
 | format<sup>1.8.0+</sup> | date format | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
 | title | title | String | - | '' | - |
+| subtitle<sup>1.8.1</sup> | subtitle | String | - | '' | - |
 | cancelTxt | the text of the cancel button | String | - | '取消' | - |
 | confirmTxt | the text of the confirm button | String | - | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | - | 2500 | - |

document/components/docs/en-US/picker.md

@@ -177,13 +177,56 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
   }
   ```
 
+- Subtitle
+
+  You could configure subtitle by the property `subtitle`.
+
+  ```html
+  <cube-button @click="showSubtitlePicker">Use subtitle</cube-button>
+  ```
+  ```js
+  const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
+    { text: '幽鬼', value: '幽鬼' }]
+  export default {
+    mounted () {
+      this.subtitlePicker = this.$createPicker({
+        title: 'Picker',
+        subtitle: 'subtitle',
+        data: [col1Data],
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showSubtitlePicker () {
+        this.subtitlePicker.show()
+      },
+      selectHandle(selectedVal, selectedIndex, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
-| title | title | String | '' | - |
 | data | data that passed into picker, whose length determines the columns of picker | Array | [] | - |
 | selectedIndex | the index of the selected value, corresponding content will be displayed when picker shows | Array | [] | [1] |
+| title | title | String | '' | - |
+| subtitle<sup>1.8.1</sup> | subtitle | String | '' | - |
 | cancelTxt | the text of the cancel button | String | '取消' | - |
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 | - |

document/components/docs/en-US/segment-picker.md

@@ -124,6 +124,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | - | - | - | - | - |
 | data | define the component name and properties of each node picker | Array | [] | - |
 | title | title | String | '' | - |
+| subtitle<sup>1.8.1</sup> | subtitle | String | '' | - |
 | cancelTxt | the text of the cancel button | String | '取消' | - |
 | confirmTxt | the text of the confirm button | String | '确定' | - |
 | nextTxt | the text of the next button | String | '下一步' | - |

document/components/docs/en-US/time-picker.md

@@ -148,6 +148,7 @@ __Notice:__ Cause this component used create-api, so you should read [create-api
 | showNow | whether to display current time | Boolean | true |
 | minuteStep | step of the minute | Number | 10 |
 | title | title | String | '选择时间' |
+| subtitle<sup>1.8.1</sup> | subtitle | String | '' |
 | cancelTxt<sup>1.8.1</sup> | the text of the cancel button | String | '取消' |
 | confirmTxt<sup>1.8.1</sup> | the text of the confirm button | String | '确定' |
 | swipeTime | the duration of the momentum animation when user flicks the wheel of the picker, Unit: ms | Number | 2500 |

document/components/docs/zh-CN/cascade-picker.md

@@ -212,9 +212,10 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
 | 参数 | 说明 | 类型 | 默认值 | 示例 |
 | - | - | - | - | - |
-| title | 标题 | String | '' | - |
 | data | 级联选择器的树形数据，用于初始化选项 | Array | [] | - |
 | selectedIndex | 被选中的索引值，拉起选择器后显示这个索引值对应的内容 | Array | [] | [1] |
+| title | 标题 | String | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

document/components/docs/zh-CN/date-picker.md

@@ -242,6 +242,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | columnCount | 列数 | Number | - | 3 | 6 |
 | format<sup>1.8.0+</sup> | 日期格式 | Object | - | { year: 'YYYY', month: 'M', date: 'D', hour: 'hh', minute: 'mm', second: 'ss' } | { year: 'YY年', month: 'MM月', date: '第 D 日' } |
 | title | 标题 | String | - | '' | '时间选择' |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | - | '' | - |
 | cancelTxt | 取消按钮文案 | String | - | '取消' | '返回' |
 | confirmTxt | 确定按钮文案 | String | - | '确定' | '选择' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | - | 2500 | - |

document/components/docs/zh-CN/picker.md

@@ -177,13 +177,56 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 
   实例方法`setData`可接受2个参数，都为数组类型。第一个参数为滚轴需要显示的数据，第二个参数为选中值的索引。
 
+- 副标题
+
+  通过 `subtitle` 属性，设置副标题。
+
+  ```html
+  <cube-button @click="showSubtitlePicker">Use subtitle</cube-button>
+  ```
+  ```js
+  const col1Data = [{ text: '剧毒', value: '剧毒'}, { text: '蚂蚁', value: '蚂蚁' },
+    { text: '幽鬼', value: '幽鬼' }]
+  export default {
+    mounted () {
+      this.subtitlePicker = this.$createPicker({
+        title: 'Picker',
+        subtitle: 'subtitle',
+        data: [col1Data],
+        onSelect: this.selectHandle,
+        onCancel: this.cancelHandle
+      })
+    },
+    methods: {
+      showSubtitlePicker () {
+        this.subtitlePicker.show()
+      },
+      selectHandle(selectedVal, selectedIndex, selectedText) {
+        this.$createDialog({
+          type: 'warn',
+          content: `Selected Item: <br/> - value: ${selectedVal.join(', ')} <br/> - index: ${selectedIndex.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
+          icon: 'cubeic-alert'
+        }).show()
+      },
+      cancelHandle() {
+        this.$createToast({
+          type: 'correct',
+          txt: 'Picker canceled',
+          time: 1000
+        }).show()
+      }
+    }
+  }
+  ```
+
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 默认值 | 示例 |
 | - | - | - | - | - |
-| title | 标题 | String | '' | - |
 | data | 传入 picker 数据，数组的长度决定了 picker 的列数 | Array | [] | - |
 | selectedIndex | 被选中的索引值，拉起 picker 后显示这个索引值对应的内容 | Array | [] | [1] |
+| title | 标题 | String | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime | 快速滑动 picker 滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

document/components/docs/zh-CN/segment-picker.md

@@ -126,6 +126,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | nextTxt | 下一步按钮文案 | String | '下一步' | - |
 | prevTxt | 上一步按钮文案 | String | '下一步' | - |
 | title | 标题 | String | '' | - |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' | - |
 | cancelTxt | 取消按钮文案 | String | '取消' | - |
 | confirmTxt | 确定按钮文案 | String | '确定' | - |
 | swipeTime<sup>1.8.1</sup> | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 | - |

document/components/docs/zh-CN/time-picker.md

@@ -138,6 +138,7 @@ __注：__ 由于此组件基于 create-api 实现，所以在使用之前，请
 | showNow | 是否显示当前时间 | Boolean | true |
 | minuteStep | 分钟数的步长 | Number | 10 |
 | title | 标题 | String | '选择时间' |
+| subtitle<sup>1.8.1</sup> | 副标题 | String | '' |
 | cancelTxt<sup>1.8.1</sup> | 取消按钮文案 | String | '取消' |
 | confirmTxt<sup>1.8.1</sup> | 确定按钮文案 | String | '确定' |
 | swipeTime | 快速滑动选择器滚轮时，惯性滚动动画的时长，单位：ms | Number | 2500 |