chore(rate): props add size、color

package.json

@@ -77,7 +77,7 @@
     }
   },
   "dependencies": {
-    "@nutui/icons-vue": "^0.0.23",
+    "@nutui/icons-vue": "^0.0.24",
     "@nutui/icons-vue-taro": "^0.0.8",
     "@tarojs/components": "3.5.6",
     "sass": "^1.50.0",

publish/nutui/package.json

@@ -36,7 +36,7 @@
     "publish:beta": "npm publish --tag=beta"
   },
   "dependencies": {
-    "@nutui/icons-vue": "^0.0.23",
+    "@nutui/icons-vue": "^0.0.24",
     "sass": "^1.50.0"
   },
   "devDependencies": {},

src/packages/__VUE/rate/demo.vue

@@ -9,10 +9,13 @@
     <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>{{ translate('title2') }}</h2>
-    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate :custom-icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>{{ translate('title3') }}</h2>
-    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate count="10" v-model="state.val3"></nut-rate></nut-cell>
+
+    <h2>{{ translate('title4') }}</h2>
+    <nut-cell class="cell"><nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate></nut-cell>
 
     <h2>{{ translate('title5') }}</h2>
     <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
@@ -22,6 +25,9 @@
 
     <h2>{{ translate('title7') }}</h2>
     <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+
+    <h2>{{ translate('title8') }}</h2>
+    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
   </div>
 </template>
 

src/packages/__VUE/rate/doc.en-US.md

@@ -41,7 +41,7 @@ export default {
 <template>
      <nut-cell class="cell">
          <nut-rate allow-half v-model="value"></nut-rate>
-     </<nut-cell>
+     <nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -61,7 +61,7 @@ export default {
 ```html
 <template>
      <nut-cell class="cell">
-         <nut-rate :icon="HeartFill" v-model="value" />
+         <nut-rate :custom-icon="HeartFill" v-model="value" />
      </nut-cell>
 </template>
 <script lang="ts">
@@ -84,7 +84,7 @@ export default {
 ```html
 <template>
      <nut-cell class="cell">
-         <nut-rate :count="6" v-model="value" />
+         <nut-rate count="10" v-model="value" />
      </nut-cell>
 </template>
 <script lang="ts">
@@ -166,20 +166,44 @@ export default {
 ```
 :::
 
+### Custom Size 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
+
 ## API
 ### Props
 
-| Attribute    | Description                                                                      | Type    | Default |
-|--------------|----------------------------------------------------------------------------------|---------|---------|
-| v-model      | The current number of stars, you can use v-model to bind data in both directions | number  | -       |
-| count        | Total number of stars                                                            | number  | `5`       |
-| active-color | Icon selection color                                                             | string  | `#fa200c` |
-| void-color   | Icon unselected color                                                            | string  | `#ccc`    |
-| allow-half   | half star                                                                        | boolean | `false`   |
-| readonly     | read-only                                                                        | boolean | `false`   |
-| disabled     | whether to disable                                                               | boolean | `false`   |
-| spacing      | spacing                                                                          | number  | `20`      |
-| touchable    | Whether to allow select rate by touch gesture                                    | boolean | `true`    |
+| Attribute    | Description                                                                                     | Type             | Default     |
+|--------------|-------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | The current number of stars, you can use v-model to bind data in both directions                | number \| string | -           |
+| count        | Total number \| string of stars                                                                 | number \| string | `5`         |
+| active-color | Icon selection color                                                                            | string           | `#fa200c`   |
+| void-color   | Icon unselected color                                                                           | string           | `#ccc`      |
+| allow-half   | half star                                                                                       | boolean          | `false`     |
+| readonly     | read-only                                                                                       | boolean          | `false`     |
+| disabled     | whether to disable                                                                              | boolean          | `false`     |
+| spacing      | spacing                                                                                         | number \| string | `20`        |
+| touchable    | Whether to allow select rate by touch gesture                                                   | boolean          | `true`      |
+| size         | `Icon` custom size , eg `20px` `2em` `2rem`                                                     | number \| string | -           |
+| custom-icon  | custom `Icon`, set [VNode](https://vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode \| h       | `StarFillN` |
 
 
 ### Events

src/packages/__VUE/rate/doc.md

@@ -20,7 +20,7 @@ app.use(Rate);
 ```html
 <template>
     <nut-cell class="cell">
-      <nut-rate v-model="state.val" />
+      <nut-rate v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -42,7 +42,7 @@ export default {
 <template>
     <nut-cell class="cell">
         <nut-rate allow-half v-model="value"></nut-rate>
-    </<nut-cell>
+    <nut-cell>
 </template>
 <script lang="ts">
 import { ref } from 'vue';
@@ -62,7 +62,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :icon="HeartFill" v-model="value" />
+        <nut-rate :custom-icon="HeartFill" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -85,7 +85,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :count="6" v-model="value" />
+        <nut-rate count="10" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -166,26 +166,48 @@ export default {
 </script>
 ```
 :::
+### 自定义尺寸 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
 
 
 
 ## API
 ### Props
 
-| 参数         | 说明                                      | 类型    | 默认值  |
-|--------------|-------------------------------------------|---------|---------|
-| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据 | number  | -       |
-| count        | `star` 总数                                 | number  | `5`       |
-| active-color | 图标选中颜色                              | string  | `#fa200c` |
-| void-color   | 图标未选中颜色                            | string  | `#ccc`    |
-| allow-half   | 是否半星                                  | boolean | `false`   |
-| readonly     | 是否只读                                  | boolean | `false`   |
-| disabled     | 是否禁用                                  | boolean | `false`   |
-| spacing      | 间距                                      | number  | `20`      |
-| touchable    | 是否可以通过滑动手势选择评分              | boolean | `true`    |
+| 参数         | 说明                                                                                                | 类型             | 默认值      |
+|--------------|-----------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
+| count        | `star` 总数                                                                                         | number \| string | `5`         |
+| active-color | 图标选中颜色                                                                                        | string           | `#fa200c`   |
+| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
+| allow-half   | 是否半星                                                                                            | boolean          | `false`     |
+| readonly     | 是否只读                                                                                            | boolean          | `false`     |
+| disabled     | 是否禁用                                                                                            | boolean          | `false`     |
+| spacing      | 间距                                                                                                | number \| string | `20`        |
+| touchable    | 是否可以通过滑动手势选择评分                                                                        | boolean          | `true`      |
+| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
+| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
 
 ### Events
-| 事件名   | 说明                       | 回调参数 |
+| 事件名 | 说明                       | 回调参数 |
 |--------|----------------------------|----------|
 | change | 当前分值修改时时触发的事件 | 当前值   |
 

src/packages/__VUE/rate/doc.taro.md

@@ -62,7 +62,7 @@ export default {
 ```html
 <template>
     <nut-cell class="cell">
-        <nut-rate :icon="HeartFill" v-model="value" />
+        <nut-rate :custom-icon="HeartFill" v-model="value" />
     </nut-cell>
 </template>
 <script lang="ts">
@@ -166,27 +166,45 @@ export default {
 :::
 
 
+### 自定义尺寸 35px
+
+:::demo
+```html
+<template>
+    <nut-cell class="cell">
+        <nut-rate v-model="value" size="35" />
+    </nut-cell>
+</template>
+<script lang="ts">
+import { ref } from 'vue';
+export default {
+    setup() {
+        const value = ref(3);
+        return { value }
+    }
+}
+</script>
+```
+:::
+
 ## API
 ### Props
 
-| 参数            | 说明                                               | 类型    | 默认值           |
-|-----------------|----------------------------------------------------|---------|------------------|
-| v-model         | 当前 `star` 数，可使用 `v-model` 双向绑定数据          | number  | -                |
-| count           | `star` 总数                                          | number  | `5`                |
-| icon-size       | `star` 大小                                          | number  | `18`               |
-| active-color    | 图标选中颜色                                       | string  | `#fa200c `         |
-| void-color      | 图标未选中颜色                                     | string  | `#ccc`             |
-| unchecked-icon  | 使用图标(未选中)[图标名称](#/zh-CN/component/icon) | string  | `star-n`           |
-| checked-icon    | 使用图标(选中)[图标名称](#/zh-CN/component/icon)   | string  | `star-fill-n`      |
-| font-class-name | 自定义icon 字体基础类名                            | string  | `nutui-iconfont` |
-| class-prefix    | 自定义icon 类名前缀，用于使用自定义图标            | string  | `nut-icon`       |
-| allow-half      | 是否半星                                           | Boolean | `false`            |
-| readonly        | 是否只读                                           | Boolean | `false`            |
-| disabled        | 是否禁用                                           | Boolean | `false`            |
-| spacing         | 间距                                               | number  | `20`               |
+| 参数         | 说明                                                                                                | 类型             | 默认值      |
+|--------------|-----------------------------------------------------------------------------------------------------|------------------|-------------|
+| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
+| count        | `star` 总数                                                                                         | number \| string | `5`         |
+| active-color | 图标选中颜色                                                                                        | string           | `#fa200c `  |
+| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
+| allow-half   | 是否半星                                                                                            | Boolean          | `false`     |
+| readonly     | 是否只读                                                                                            | Boolean          | `false`     |
+| disabled     | 是否禁用                                                                                            | Boolean          | `false`     |
+| spacing      | 间距                                                                                                | number \| string | `20`        |
+| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
+| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
 
 ### Events
-| 事件名   | 说明                       | 回调参数 |
+| 事件名 | 说明                       | 回调参数 |
 |--------|----------------------------|----------|
 | change | 当前分值修改时时触发的事件 | 当前值   |
 

src/packages/__VUE/rate/index.taro.vue

@@ -1,10 +1,9 @@
 <template src="./template.html"></template>
 <script lang="ts">
-import { StarN } from '@nutui/icons-vue-taro';
-import { computed, h, Ref, ref } from 'vue';
+import { StarFillN } from '@nutui/icons-vue-taro';
+import { computed, ref } from 'vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
-import { useTouch } from '@/packages/utils/useTouch';
 const { create, componentName } = createComponent('rate');
 export default create({
   props: {
@@ -16,12 +15,16 @@ export default create({
       type: [String, Number],
       default: 0
     },
-    icon: {
+    customIcon: {
       type: Object,
       default: () => {
-        return StarN;
+        return StarFillN;
       }
     },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
     activeColor: {
       type: String,
       default: ''
@@ -42,16 +45,12 @@ export default create({
       type: Boolean,
       default: false
     },
-    touchable: {
-      type: Boolean,
-      default: true
-    },
     spacing: {
       type: [String, Number],
       default: 14
     }
   },
-  components: { StarN },
+  components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props: any, { emit, slots }: any) {
     const rateRefs = ref<HTMLElement[]>([]);
@@ -77,42 +76,9 @@ export default create({
       }
       updateVal(value);
     };
-    const getScoreByPosition = (x: number, rateRefs: Ref<HTMLElement[]>, allowHalf: boolean) => {
-      let v = 0;
-      for (let index = rateRefs.value.length - 1; index >= 0; index--) {
-        const item = rateRefs.value[index];
-        if (x > item.offsetLeft) {
-          if (allowHalf) {
-            v = index + (x > item.offsetLeft + item.clientWidth / 2 ? 1 : 0.5);
-          } else {
-            v = index + 1;
-          }
-          break;
-        }
-      }
-      return v;
-    };
-    const touch = useTouch();
-    const touchMethods = {
-      onTouchStart(event: Event) {
-        if (!props.touchable) return;
-        touch.start(event);
-      },
-      onTouchMove(event: Event) {
-        if (!props.touchable || !false) return;
-        touch.move(event);
-        if (touch.isHorizontal()) {
-          if (rateRefs.value) {
-            event.preventDefault();
-            updateVal(getScoreByPosition(touch.moveX.value, rateRefs, props.allowHalf));
-          }
-        }
-      }
-    };
     const refRandomId = Math.random().toString(36).slice(-8);
     return {
       classes,
-      ...touchMethods,
       onClick,
       pxCheck,
       rateRefs,

src/packages/__VUE/rate/index.vue

@@ -1,7 +1,7 @@
 <template src="./template.html"></template>
 <script lang="ts">
 import { computed, h, Ref, ref } from 'vue';
-import { StarN } from '@nutui/icons-vue';
+import { StarFillN } from '@nutui/icons-vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { useTouch } from '@/packages/utils/useTouch';
@@ -16,12 +16,16 @@ export default create({
       type: [String, Number],
       default: 0
     },
-    icon: {
+    customIcon: {
       type: Object,
       default: () => {
-        return h(StarN, { width: 18, height: 18 });
+        return StarFillN;
       }
     },
+    size: {
+      type: [String, Number],
+      default: undefined
+    },
     activeColor: {
       type: String,
       default: ''
@@ -51,7 +55,7 @@ export default create({
       default: 14
     }
   },
-  components: { StarN },
+  components: { StarFillN },
   emits: ['update:modelValue', 'change'],
   setup(props: any, { emit, slots }: any) {
     const rateRefs = ref<HTMLElement[]>([]);
@@ -95,11 +99,11 @@ export default create({
     const touch = useTouch();
     const touchMethods = {
       onTouchStart(event: Event) {
-        if (!props.touchable) return;
+        if (!props.touchable || props.readonly) return;
         touch.start(event);
       },
       onTouchMove(event: Event) {
-        if (!props.touchable || !true) return;
+        if (!props.touchable) return;
         touch.move(event);
         if (touch.isHorizontal()) {
           if (rateRefs.value) {

src/packages/__VUE/rate/template.html

@@ -1,36 +1,20 @@
 <view :class="classes" @touchstart="onTouchStart" @touchmove="onTouchMove">
-    <view
-      class="nut-rate-item"
-      v-for="n in Number(count)"
-      :key="n"
-      ref="rateRefs"
-      :id="'rateRefs-' + refRandomId + n"
-      :style="{ marginRight: pxCheck(spacing) }"
-    >
+  <view class="nut-rate-item" v-for="n in Number(count)" :key="n" ref="rateRefs" :id="'rateRefs-' + refRandomId + n"
+    :style="{ marginRight: pxCheck(spacing) }">
     <view>
       <component
-        :is="renderIcon(icon)"
-        class="nut-rate-item__icon"
-        :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
-        :color="n <= modelValue ? activeColor : voidColor"
-        @click="onClick(1, n)"
-      ></component>
+        :is="renderIcon(customIcon,{width:size,height:size,size,color:n <= modelValue ? activeColor : voidColor})"
+        class="nut-rate-item__icon" :class="{ 'nut-rate-item__icon--disabled': disabled || n > modelValue }"
+        @click="onClick(1, n)"></component>
     </view>
-      <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
-        <component
-          :is="renderIcon(icon)"
-          class="nut-rate-item__icon"
-          :color="n <= Number(modelValue) + 1 ? activeColor : voidColor"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
-      <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
-        <component
-          :is="renderIcon(icon)"
-          class="nut-rate-item__icon nut-rate-item__icon--disabled"
-          :color="voidColor"
-          @click="onClick(2, n)"
-        ></component>
-      </view>
+    <view class="nut-rate-item__icon--half" v-if="allowHalf && Number(modelValue) + 1 > n">
+      <component
+        :is="renderIcon(customIcon,{width:size,height:size,size,color:n <= Number(modelValue) + 1 ? activeColor : voidColor})"
+        class="nut-rate-item__icon" @click="onClick(2, n)"></component>
+    </view>
+    <view class="nut-rate-item__icon--half" v-else-if="allowHalf && Number(modelValue) + 1 < n">
+      <component :is="renderIcon(customIcon,{width:size,height:size,size,color:voidColor})"
+        class="nut-rate-item__icon nut-rate-item__icon--disabled" @click="onClick(2, n)"></component>
     </view>
-  </view>
+  </view>
+</view>

src/sites/mobile-taro/vue/src/dentry/pages/rate/index.vue

@@ -10,10 +10,13 @@
     <nut-cell class="cell"><nut-rate allow-half v-model="state.val1"></nut-rate></nut-cell>
 
     <h2>自定义 icon </h2>
-    <nut-cell class="cell"><nut-rate :icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate :custom-icon="HeartFill" v-model="state.val2"></nut-rate></nut-cell>
 
     <h2>自定义数量</h2>
-    <nut-cell class="cell"><nut-rate :count="6" v-model="state.val3"></nut-rate></nut-cell>
+    <nut-cell class="cell"><nut-rate count="10" v-model="state.val3"></nut-rate></nut-cell>
+
+    <h2>自定义颜色</h2>
+    <nut-cell class="cell"><nut-rate active-color="#FFC800" v-model="state.val4"></nut-rate></nut-cell>
 
     <h2>禁用状态</h2>
     <nut-cell class="cell"><nut-rate disabled v-model="state.val5"></nut-rate></nut-cell>
@@ -23,6 +26,9 @@
 
     <h2>绑定事件</h2>
     <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+
+    <h2>自定义尺寸 35px</h2>
+    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
   </div>
 </template>
 
@@ -36,7 +42,6 @@ export default {
   components: { HeartFill, StarFillN, Header },
   setup() {
     const env = Taro.getEnv();
-    let { proxy } = getCurrentInstance();
 
     const state = reactive({
       val: 3,
@@ -50,7 +55,7 @@ export default {
       val8: 3
     });
     const onChange = (val) => {
-      // proxy.$toast.text(val);
+      console.log(val);
     };
     return {
       state,