[Improvement] Rate: rename component (#1002)

docs/demos/index.js

@@ -57,9 +57,9 @@ export default {
   'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/progress'), 'progress')), 'progress')),
   'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh')),
   'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/radio'), 'radio')), 'radio')),
+  'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/rate'), 'rate')), 'rate')),
   'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/search'), 'search')), 'search')),
   'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/sku'), 'sku')), 'sku')),
-  'star-rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/star-rate'), 'star-rate')), 'star-rate')),
   'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/slider'), 'slider')), 'slider')),
   'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/stepper'), 'stepper')), 'stepper')),
   'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/steps'), 'steps')), 'steps')),

docs/demos/views/rate.vue

@@ -0,0 +1,52 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-rate v-model="valueA" />
+    </demo-block>
+
+    <demo-block :title="$t('customColor')">
+      <van-rate
+        v-model="valueB"
+        :size="25"
+        :todal="6"
+        :color="'#2ba'"
+        :default-color="'#ceefe8'"
+      />
+    </demo-block>
+
+     <demo-block :title="$t('disabled')">
+      <van-rate disabled v-model="valueC" />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      disabled: '禁用状态',
+      customColor: '自定义颜色'
+    },
+    'en-US': {
+      disabled: 'Disabled',
+      customColor: 'Custom Color'
+    }
+  },
+
+  data() {
+    return {
+      valueA: 3,
+      valueB: 4,
+      valueC: 2
+    };
+  }
+};
+</script>
+
+<style lang="postcss">
+.demo-rate {
+  .van-rate {
+    margin-left: 15px;
+  }
+}
+</style>

docs/demos/views/star-rate.vue

@@ -1,83 +0,0 @@
-<template>
-  <demo-section>
-    <demo-block :title="$t('basicUsage')">
-      <div class="padding-15">
-        <van-star-rate
-          :total="totalA"
-          v-model="valueA"
-          :size="size"
-        />
-      </div>
-    </demo-block>
-
-    <demo-block :title="$t('customColor')">
-      <div class="padding-15">
-        <van-star-rate
-          :total="totalB"
-          v-model="valueB"
-          :size="24"
-          :color="'#2ba'"
-          :default-color="'#ceefe8'"
-        />
-      </div>
-    </demo-block>
-
-     <demo-block :title="$t('disabled')">
-      <div class="padding-15">
-        <van-star-rate
-          disabled
-          :total="totalC"
-          v-model="valueC"
-        />
-      </div>
-    </demo-block>
-
-  </demo-section>
-</template>
-
-<script>
-export default {
-  i18n: {
-    'zh-CN': {
-      disabled: '不可操作状态',
-      customColor: '自定义颜色'
-    },
-    'en-US': {
-      disabled: 'Disabled Component',
-      customColor: 'Custom Color'
-    }
-  },
-
-  data() {
-    return {
-      size: 30,
-      totalA: 7,
-      valueA: 5,
-      totalB: 6,
-      valueB: 4,
-      totalC: 8,
-      valueC: 2
-    };
-  },
-
-  methods: {
-    onSearch() {
-      Toast(this.value);
-    },
-    onCancel() {
-      Toast(this.$t('cancel'));
-    }
-  }
-};
-</script>
-
-<style lang="postcss">
-.demo-search {
-  .van-search__action div {
-    padding: 0 10px;
-  }
-}
-.padding-15 {
-  padding: 0 15px;
-}
-</style>

docs/markdown/index.js

@@ -54,6 +54,7 @@ export default {
   'zh-CN/pull-refresh': wrapper(r => require.ensure([], () => r(require('./zh-CN/pull-refresh.md')), 'zh-CN/pull-refresh')),
   'zh-CN/quickstart': wrapper(r => require.ensure([], () => r(require('./zh-CN/quickstart.md')), 'zh-CN/quickstart')),
   'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
+  'zh-CN/rate': wrapper(r => require.ensure([], () => r(require('./zh-CN/rate.md')), 'zh-CN/rate')),
   'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
   'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
   'zh-CN/slider': wrapper(r => require.ensure([], () => r(require('./zh-CN/slider.md')), 'zh-CN/slider')),

docs/markdown/zh-CN/rate.md

@@ -0,0 +1,56 @@
+## Rate 评分
+
+### 使用指南
+``` javascript
+import { Rate } from 'vant';
+
+Vue.use(Rate);
+```
+
+### 代码演示
+
+#### 基础用法
+
+```html
+<van-rate v-model="value" />
+```
+
+```javascript
+export default {
+  data() {
+    return {
+      value: 3
+    };
+  }
+}
+```
+
+#### 自定义颜色
+
+```html
+<van-rate
+  v-model="value"
+  :size="25"
+  :todal="6"
+  :color="color",
+  :defaultColor="defaultColor"
+/>
+```
+
+#### 禁用状态
+
+```html
+ <van-rate v-model="value" disabled />
+```
+
+### Rate API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| v-model | 当前分数 | `Number` | - |
+| size | 星标大小，单位为`px` | `Number` | `20` |
+| total | 总分 | `Number` | `5` |
+| color | 选中时的星标颜色 | `String` | `#ffd21e`  |
+| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` |
+| disabled-color | 不可选时的星标颜色 | `String` | `#bdbdbd` | 
+| disabled | 是否禁用评分 | `Boolean` | `false` |

docs/markdown/zh-CN/star-rate.md

@@ -1,92 +0,0 @@
-## StarRate 评分
-
-### 使用指南
-``` javascript
-import { StarRate } from 'vant';
-
-Vue.use(StarRate);
-```
-
-### 代码演示
-
-#### 基础用法
-
-```html
-<van-star-rate
-  :total="total"
-  v-model="value"
-  :size="30"
-/>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      size: 30,
-      value: 3,
-      total: 6
-    };
-  }
-}
-```
-
-#### 自定义颜色
-
-```html
-<van-star-rate
-  :total="total"
-  v-model="value"
-  :size="size",
-  :color="color",
-  :defaultColor="defaultColor"
-/>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      size: 24,
-      value: 5,
-      total: 7,
-      color: '#2ba',
-      defaultColor: '#ceefe8'
-    };
-  }
-}
-```
-
-
-#### 竖向步骤条
-```html
- <van-star-rate
-  disabled
-  :total="total"
-  v-model="value"
-/>
-```
-
-```javascript
-export default {
-  data() {
-    return {
-      value: 2,
-      total: 6
-    };
-  }
-}
-```
-
-### StarRate API
-
-| 参数 | 说明 | 类型 | 默认值 | 可选值 |
-|-----------|-----------|-----------|-------------|-------------|
-| size | 星标大小，单位为`px` | `Number` | 20 | - |
-| total | 总分，默认为5 | `Number` | 5 | - |
-| value | 分数 | `Number` | 0 | - |
-| color | 选中时的星标颜色 | `String` | `#ffd21e`  | - |
-| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` | - |
-| disabled-color | 不可选时的星标颜色 | `String` | `bdbdbd` | - |
-| disabled | 是否可修改 | `Boolean` | false | - |
-

docs/src/doc.config.js

@@ -137,8 +137,8 @@ module.exports = {
                 title: 'Progress - 进度条'
               },
               {
-                path: '/star-rate',
+                path: '/rate',
-                title: 'StarRate - 评分'
+                title: 'Rate - 评分'
               },
               {
                 path: '/slider',

packages/index.js

@@ -45,10 +45,10 @@ import Progress from './progress';
 import PullRefresh from './pull-refresh';
 import Radio from './radio';
 import RadioGroup from './radio-group';
+import Rate from './rate';
 import Row from './row';
 import Search from './search';
 import Sku from './sku';
-import StarRate from './star-rate';
 import Slider from './slider';
 import Step from './step';
 import Stepper from './stepper';
@@ -115,10 +115,10 @@ const components = [
   PullRefresh,
   Radio,
   RadioGroup,
+  Rate,
   Row,
   Search,
   Sku,
-  StarRate,
   Slider,
   Step,
   Stepper,
@@ -197,10 +197,10 @@ export {
   PullRefresh,
   Radio,
   RadioGroup,
+  Rate,
   Row,
   Search,
   Sku,
-  StarRate,
   Slider,
   Step,
   Stepper,

packages/rate/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="van-star">
+  <div :class="b()">
     <div
-      class="van-star-item van-star--full"
+      :class="b('item')"
       v-for="(isFull, index) in starList"
       :key="index"
       :style="{
@@ -12,17 +12,17 @@
       <svg
         v-if="isFull"
         :fill="disabled ? defaultColor : color"
-        xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 32 32"
         width="100%"
-        height="100%">
+        height="100%"
+      >
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"/>
       </svg>
       <svg
         v-else
         :fill="defaultColor"
-        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 32 32"
-        viewBox="0 0 32 32" >
+      >
         <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"/>
       </svg>
     </div>
@@ -34,7 +34,7 @@
 import create from '../utils/create';
 
 export default create({
-  name: 'star-rate',
+  name: 'rate',
 
   props: {
     size: {
@@ -75,9 +75,10 @@ export default create({
 
   methods: {
     selectRate(index) {
-      if (this.disabled) return;
+      if (!this.disabled) {
         this.$emit('input', index + 1);
       }
     }
+  }
 });
 </script>

packages/tab/index.vue

@@ -1,8 +1,6 @@
 <template>
   <div :class="b('pane')" v-show="isSelected">
-    <keep-alive>
+    <slot v-if="slotInited" />
-      <slot v-if="isSelected || slotInited" />
-    </keep-alive>
   </div>
 </template>
 

packages/vant-css/src/index.css

@@ -18,13 +18,13 @@
 @import './search.css';
 @import './pagination.css';
 @import './panel.css';
+@import './rate.css';
 @import './steps.css';
 @import './tag.css';
 @import './tab.css';
 @import './tabbar.css';
 @import './image-preview.css';
 @import './stepper.css';
-@import './star-rate.css';
 @import './progress.css';
 @import './swipe.css';
 @import './slider.css';

packages/vant-css/src/rate.css

@@ -0,0 +1,10 @@
+@import "./common/var.css";
+
+.van-rate {
+  user-select: none;
+
+  &__item {
+    margin: 0 2px;
+    display: inline-block;
+  }
+}

packages/vant-css/src/star-rate.css

@@ -1,8 +0,0 @@
-.van-star {
-  user-select: none;
-}
-
-.van-star-item {
-  margin: 0 2px;
-  display: inline-block;
-}