fix: review price rate avatar 组件 (#397)

* fix: 优化

* fix: review price组件，优化input组件

* fix: 优化rate avatar 组件

Co-authored-by: guoxiaoxiao8 <guoxiao158@126.com>
Co-authored-by: richard1015 <51844712@qq.com>

package.json

@@ -36,7 +36,7 @@
     "CHANGELOG.md"
   ],
   "scripts": {
-    "checked":"npm run generate:file && rm -rf dist/ && tsc",
+    "checked": "npm run generate:file && rm -rf dist/ && tsc",
     "dev": "npm run checked && vite --open",
     "build:site": "npm run checked && vite build",
     "build": "npm run checked && vite build --config vite.config.build.ts && npm run generate:types",

src/packages/avatar/demo.vue

@@ -20,6 +20,12 @@
         bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
       ></nut-avatar>
     </nut-cell>
+    <h2>修改形状</h2>
+    <!-- <p>内置"small","normal","large"三种尺寸规格</p> -->
+    <nut-cell>
+      <nut-avatar shape="square"></nut-avatar>
+      <nut-avatar shape="round"></nut-avatar>
+    </nut-cell>
     <h2>修改背景色</h2>
     <nut-cell>
       <nut-avatar bg-color="#FA2C19"></nut-avatar>

src/packages/avatar/doc.md

@@ -22,17 +22,29 @@ app.use(Avatar);
 内置 smal / normal / large 三种尺寸规格
 
 ``` html
-<nut-avatar size="large"></nut-avatar>
-<nut-avatar size="normal"></nut-avatar>
-<nut-avatar size="small"></nut-avatar>
+  <nut-avatar
+    size="80"
+    bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="large"
+    bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="normal"
+    bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>
+  <nut-avatar
+    size="small"
+    bg-image="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+  ></nut-avatar>  
 ```
 
 ### 修改形状类型
 
 ``` html
-<nut-avatar size="large" shape="square"></nut-avatar>
-<nut-avatar size="normal" shape="square"></nut-avatar>
-<nut-avatar size="small" shape="square"></nut-avatar>
+  <nut-avatar  shape="square"></nut-avatar>
+  <nut-avatar  shape="round"></nut-avatar>
 ```
 
 ### 修改背景色
@@ -41,28 +53,20 @@ app.use(Avatar);
 <nut-avatar bg-color="#f0250f"></nut-avatar>
 ```
 
-### 设置头像的文本内容
+### 修改背景icon
 
 ``` html
-<nut-avatar size="large" bg-icon>U</nut-avatar>
+  <nut-avatar
+    bg-icon="https://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+  ></nut-avatar>
 ```
 
-### 设置背景图片
+### 设置头像的文本内容
 
 ``` html
-<nut-avatar
-  bg-icon
-  bg-image="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
-></nut-avatar>
+<nut-avatar bg-icon>N</nut-avatar>
 ```
 
-### 设置头像ICON图标
-
-``` html
-<nut-avatar
-  bg-icon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
-></nut-avatar>
-```
 
 ### 点击头像，触发事件
 
@@ -75,7 +79,7 @@ app.use(Avatar);
 | 字段 |说明|类型|默认值|
 |--|--|--|--|
 |bg-color|设置头像背景色|String|#eee
-|size|设置头像的大小，提供三种：large/normal/small|String|normal
+|size|设置头像的大小，提供三种：large/normal/small，支持直接输入数字|String|normal
 |shape|设置头像的形状，默认是圆形，可以设置为square方形|String|round
 |bg-image|设置头像的背景图片|String|''
 |bg-icon|设置头像的icon图标, 优先级低于bg-image,类似Icon组件的name属性，支持名称和链接|String|''

src/packages/input/index.vue

@@ -52,8 +52,10 @@
 <script lang="ts">
 import { ref, toRefs, reactive, computed } from 'vue';
 import { createComponent } from '@/utils/create';
-const { create } = createComponent('input');
 import { formatNumber } from './util';
+
+const { create } = createComponent('input');
+
 export default create({
   props: {
     type: {
@@ -76,14 +78,26 @@ export default create({
       type: Boolean,
       default: false
     },
-    rows: String,
-    label: String,
+    rows: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
     placeholder: {
       type: String,
       default: '请输入信息'
     },
-    readonly: Boolean,
-    disabled: Boolean,
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     autosize: {
       type: Boolean,
       default: false
@@ -97,11 +111,18 @@ export default create({
       default: false
     }
   },
-  emits: ['change', 'update:value', 'blur', 'focus', 'clear'],
+
+  emits: ['change', 'update:value', 'blur', 'focus', 'clear', 'error'],
 
   setup(props, { emit }) {
     interface Events {
-      eventName: 'change' | 'focus' | 'blur';
+      eventName:
+        | 'change'
+        | 'focus'
+        | 'blur'
+        | 'clear'
+        | 'update:value'
+        | 'error';
       params: (string | number | Event)[];
     }
 
@@ -130,9 +151,9 @@ export default create({
         rize
       };
     });
-    const emitChange = envs => {
-      envs.forEach(item => {
-        emit(item.eventName, ...item.params);
+    const emitChange = (envs: Array<Events>) => {
+      envs.forEach((item: Events) => {
+        return emit(item.eventName, ...item.params);
       });
     };
     const valueChange = (e: Event) => {

src/packages/price/doc.md

@@ -54,5 +54,6 @@ app.use(Price);
 |--|--|--|--|
 |price|价格数量|Number|0|
 |need-symbol|是否需要加上人民币符号|Boolean|true|
+|symbol|符号类型|String|"$"|
 |decimal-digits|小数位位数|Number|2|
 |thousands|是否按照千分号形式显示|Boolean|false|

src/packages/price/index.vue

@@ -17,6 +17,10 @@ export default create({
       type: Boolean,
       default: true
     },
+    symbol: {
+      type: String,
+      default: '$'
+    },
     decimalDigits: {
       type: Number,
       default: 2
@@ -30,7 +34,7 @@ export default create({
   setup(props) {
     const priceShow = computed(() => {
       const symbol = props.needSymbol
-        ? '<view class="price-symbol">￥</view>'
+        ? `<view class="price-symbol">${props.symbol}</view>`
         : '';
       return symbol + formatToHump(props.price);
     });
@@ -68,7 +72,7 @@ export default create({
 
     const formatToHump = (price: string | number) => {
       if (Number(price) == 0) {
-        return [0];
+        return 0;
       }
       if (checkPoint(price)) {
         price = Number(price).toFixed(props.decimalDigits);

src/packages/rate/demo.vue

@@ -5,7 +5,7 @@
       <nut-rate v-model:value="state.val"></nut-rate>
     </div>
 
-    <h2>自定义图标</h2>
+    <h2>自定义 icon </h2>
     <div>
       <nut-rate
         checked-icon="heart-fill1"
@@ -34,10 +34,14 @@
       <nut-rate :value="2" :read-only="true"></nut-rate>
     </div>
 
-    <h2>监听 change 事件,{{ state.result }}</h2>
+    <h2>绑定事件,{{ state.result }}</h2>
     <div>
       <nut-rate @click="onClick"></nut-rate>
     </div>
+    <h2>自定义尺寸</h2>
+    <div>
+      <nut-rate :size="35"></nut-rate>
+    </div>
   </div>
 </template>
 

src/packages/rate/doc.md

@@ -19,10 +19,51 @@ app.use(Rate);
 ### 基础用法
 
 ```html
-<nut-rate 
-    v-model:value="state.val"
->
-</nut-rate>
+    <nut-rate 
+        v-model:value="state.val"
+    >
+    </nut-rate>
+```
+
+### 自定义icon
+
+```html
+    <nut-rate
+        checked-icon="heart-fill1"
+        unchecked-icon="heart"
+        v-model:value="state.val3"
+    >
+    </nut-rate>
+```
+
+### 自定义数量
+
+```html
+    <nut-rate 
+        :total="6" 
+        v-model:value="state.val4"
+    >
+    </nut-rate>
+```
+
+### 自定义颜色
+
+```html
+    <nut-rate 
+        active-color="#FFC800" 
+        v-model:value="state.val5"
+    >
+    </nut-rate>
+```
+
+### 禁用状态
+
+```html
+    <nut-rate 
+        :disabled="true" 
+        v-model:value="state.val6"
+    >
+    </nut-rate>
 ```
 
 ### 只读
@@ -54,14 +95,7 @@ app.use(Rate);
 </nut-rate>
 ```
 
-### 自定义ICON
 
-```html
-<nut-rate
-    :checkedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM6.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm2.16 3H4.34a6 6 0 0 0 11.32 0z'/%3E%3C/svg%3E")`"
-    :uncheckedIcon="`url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='rgb(255,0,0)' d='M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM6.5 9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm7 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 13h6a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2z'/%3E%3C/svg%3E")`"
-></nut-rate>
-```
 
 ## Prop
 

tsconfig.json

@@ -8,7 +8,7 @@
     "strict": true,
     "jsx": "preserve",
     "sourceMap": false,
-    "declaration": true,
+    "declaration": false,
     "removeComments":true,
     "resolveJsonModule": true,
     "esModuleInterop": true,