Support Rate resolve didi#87 (didi#96)

* <feat> support rate component resolve didi#87

* <feat> support rate

* upload bug fix (didi#95)

fix aliyun OSS upload

* <feat> support rate

* <update> change value when touchmove

* <update> delete scoped

* <update> rate

* <update> input

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

@@ -150,7 +150,7 @@ Note: Each item of `options` can be an string, Which means both the `label` and
 
 ### cube-radio Props configuration
 
-| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
 | option | option value | Object/String | - | - |
 | position | icon position | String | left/right | left |

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

@@ -0,0 +1,97 @@
+## Rate
+
+  Rate component. You can customize the rating star numbers, and disable the interaction, you can also customize the style of star through the slot.
+
+### Example
+
+- Basic usage
+
+  You can use the v-model directive to create two-way data bindings.
+
+  ```html
+  <cube-rate v-model="value"></cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    }
+  }
+  ```
+
+- Multiple configurations
+
+  For example, you can use `disabled` to make the rating component read-only and use` max` to customize the number of stars.
+
+  ```html
+  <cube-rate v-model="value" :disabled="disabled" :max="max"></cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        disabled: false,
+        max: 5,
+        value: 3
+      }
+    }
+  }
+  ```
+
+- Custom star style
+
+  You need to use the `cube-rate-item` component, and define two different styles for custom stars, normal and active (under the` .cube-rate-item.active` class).
+
+  ```html
+  <cube-rate v-model="value">
+    <cube-rate-item v-for="n in max" :key="n" :value="value" :index="n">
+      <!-- 定制星星示例 -->
+      <div class="rate-item"></div>
+    </cube-rate-item>
+  </cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    }
+  }
+  ```
+
+  ```css
+  .rate-item
+    width: 100%
+    height: 100%
+    background-size: 100%
+    background-color: grey
+  .cube-rate-item.active
+    .rate-item
+      background-color: orange
+  ```
+
+### Props configuration
+
+| Attribute | Description | Type | Accepted Values | Default |
+| - | - | - | - | - |
+| v-model | bound rate value | Number | - | 0 |
+| max | max star number | Number | - | false |
+| disabled | disabled status | Boolean | true/false | false |
+
+### slot
+
+| Name | Description | Scope parameters |
+| - | - | - |
+| default | a cube-rate-item component | - |
+
+### slot in cube-rate-item
+
+| Name | Description | Scope parameters |
+| - | - | - |
+| default | custom star element | - |

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

@@ -0,0 +1,97 @@
+## Rate
+
+  评分组件。你可以自定义星星个数，可以禁用交互，以用作评价展示，可以通过插槽自定义星星样式。
+
+### 示例
+
+- 基本用法
+
+  使用 v-model 对评分值双向绑定。
+
+  ```html
+  <cube-rate v-model="value"></cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    }
+  }
+  ```
+
+- 多项配置
+
+  例如，使用`disabled`使评分组件只读，使用`max`自定义评分等级。
+
+  ```html
+  <cube-rate v-model="value" :disabled="disabled" :max="max"></cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        disabled: false,
+        max: 5,
+        value: 3
+      }
+    }
+  }
+  ```
+
+- 自定义星星样式
+
+  需要使用`cube-rate-item`组件，并且对自定义的星星元素定义两种样式——普通和活跃（在`.cube-rate-item.active`类之下）。
+
+  ```html
+  <cube-rate v-model="value">
+    <cube-rate-item v-for="n in max" :key="n" :value="value" :index="n">
+      <!-- 定制星星示例 -->
+      <div class="rate-item"></div>
+    </cube-rate-item>
+  </cube-rate>
+  ```
+
+  ```javascript
+  export default {
+    data() {
+      return {
+        value: 3
+      }
+    }
+  }
+  ```
+
+  ```css
+  .rate-item
+    width: 100%
+    height: 100%
+    background-size: 100%
+    background-color: grey
+  .cube-rate-item.active
+    .rate-item
+      background-color: orange
+  ```
+
+### Props 配置
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| - | - | - | - | - |
+| v-model | 绑定的评分值 | Number | - | 0 |
+| max | 星星个数 | Number | - | false |
+| disabled | 禁用状态 | Boolean | true/false | false |
+
+### 插槽
+
+| 名字 | 说明 | 作用域参数 |
+| - | - | - |
+| default | 默认是 cube-rate-item 组件 | - |
+
+### cube-rate-item 的插槽
+
+| 名字 | 说明 | 作用域参数 |
+| - | - | - |
+| default | 自定义星星元素 | - |

document/components/home/home.vue

@@ -26,12 +26,12 @@
     data() {
       return {
         showTabs: false,
-        isDocs: this.$route.path.includes('/docs')
+        isDocs: this.$route.path.indexOf('/docs') > -1
       }
     },
     watch: {
       $route(val) {
-        this.isDocs = val.path.includes('/docs')
+        this.isDocs = val.path.indexOf('/docs') > -1
         this.showTabs = false
       }
     },

example/App.vue

@@ -5,7 +5,7 @@
     </header>
     <section class="cube-content" ref="mfct">
       <ul class="cube-list">
-        <li class="cube-item border-bottom-1px" v-for="component in components">
+        <li class="cube-item border-bottom-1px" v-for="(component, index) in components" :key="index">
           <router-link class="link" :to="component.path">{{component.text}}<i
               class="cubeic-arrow"></i>
           </router-link>
@@ -67,6 +67,10 @@
             path: '/validator',
             text: 'Validator'
           },
+          {
+            path: '/rate',
+            text: 'Rate'
+          },
           {
             path: '/picker',
             text: 'Picker'

example/components/date-picker.vue

@@ -51,7 +51,7 @@
           year.children = range(minMonth, maxMonth, false, '月')
           year.children.forEach(month => {
             let day = 30
-            if ([1, 3, 5, 7, 8, 10, 12].includes(month.value)) {
+            if ([1, 3, 5, 7, 8, 10, 12].indexOf(month.value) > -1) {
               day = 31
             } else {
               if (month.value === 2) {

example/pages/rate.vue

@@ -0,0 +1,92 @@
+<template>
+  <cube-page
+    type="rate-view"
+    title="Rate"
+    class="option-demo">
+    <div slot="content">
+      <div class="rate-wrapper">
+        <cube-rate v-model="value" :disabled="disabled" :max="max">
+          <cube-rate-item v-for="n in max" :key="n" :value="value" :index="n">
+            <div class="rate-item" v-if="customStar"></div>
+          </cube-rate-item>
+        </cube-rate>
+      </div>
+      <div class="options">
+        <div class="title">Options</div>
+        <div class="option-list">
+          <switch-option class="item" name="customStar" :value="customStar"
+                            @update:value="updateRateItem"></switch-option>
+          <switch-option class="item" name="disabled" :value="disabled"
+                            @update:value="updateDisabled"></switch-option>
+          <select-option class="item" name="star numbers" :value="max"
+                            @update:value="updateStarNumbers" :options="options"></select-option>
+        </div>
+      </div>
+    </div>
+  </cube-page>
+</template>
+
+<script type="text/ecmascript-6">
+  import CubePage from '../components/cube-page.vue'
+  import CubeButtonGroup from '../components/cube-button-group.vue'
+  import SwitchOption from '../components/switch-option.vue'
+  import SelectOption from '../components/select-option'
+
+  export default {
+    data() {
+      return {
+        disabled: false,
+        max: 5,
+        value: 3,
+        image: 'https://p3.pstatp.com/large/593c0006340abbabefa0',
+        customStar: false,
+        options: [
+          {
+            text: '5',
+            value: 5
+          },
+          {
+            text: '10',
+            value: 10
+          }
+        ]
+      }
+    },
+    methods: {
+      updateDisabled(val) {
+        this.disabled = val
+      },
+      updateStarNumbers(val) {
+        this.max = val
+      },
+      updateRateItem(val) {
+        this.customStar = val
+      }
+    },
+    components: {
+      CubePage,
+      CubeButtonGroup,
+      SwitchOption,
+      SelectOption
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+  .rate-wrapper
+    margin: 30px 0
+    text-align: center
+    .rate-text
+      text-align: center
+      margin-top: 25px
+      vertical-align: middle
+    .rate-item
+      width: 100%
+      height: 100%
+      background-size: 100%
+      background-color: grey
+  .cube-rate-item.active
+    .rate-item
+      background-color: orange
+
+</style>

example/router/routes.js

@@ -8,6 +8,7 @@ import Tip from '../pages/tip.vue'
 import Popup from '../pages/popup.vue'
 import Toast from '../pages/toast.vue'
 import Input from '../pages/input.vue'
+import Rate from '../pages/rate.vue'
 import Picker from '../pages/picker.vue'
 import CascadePicker from '../pages/cascade-picker.vue'
 import TimePicker from '../pages/time-picker.vue'
@@ -62,6 +63,10 @@ const routes = [
     path: '/toast',
     component: Toast
   },
+  {
+    path: '/rate',
+    component: Rate
+  },
   {
     path: '/picker',
     component: Picker