From 2616885a97659a7d7ee93650c75fb53fd7122d38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent.io@gmail.com>
Date: Thu, 11 Mar 2021 20:02:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=AF=84=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/form/star.wc  | 89 +++++++++++++++++++++++------------------------
 src/icon/index.wc | 36 +++++--------------
 2 files changed, 52 insertions(+), 73 deletions(-)

diff --git a/src/form/star.wc b/src/form/star.wc
index c42c4c4..68063cb 100644
--- a/src/form/star.wc
+++ b/src/form/star.wc
@@ -1,35 +1,41 @@
 <template>
   <label>
-    <wc-icon data-idx="0" is="star" color="grey"></wc-icon>
-    <wc-icon data-idx="1" is="star" color="grey"></wc-icon>
-    <wc-icon data-idx="2" is="star" color="grey"></wc-icon>
-    <wc-icon data-idx="3" is="star" color="grey"></wc-icon>
-    <wc-icon data-idx="4" is="star" color="grey"></wc-icon>
-    <span class="text"></span>
+    <wc-icon data-idx="0" is="star"></wc-icon>
+    <wc-icon data-idx="1" is="star"></wc-icon>
+    <wc-icon data-idx="2" is="star"></wc-icon>
+    <wc-icon data-idx="3" is="star"></wc-icon>
+    <wc-icon data-idx="4" is="star"></wc-icon>
+    <span class="text">5分</span>
   </label>
 </template>
 
 <style lang="scss">
 :host {
   display: flex;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
+  font-size: 18px;
   cursor: pointer;
-  font-size: 14px;
-  --size: 24px;
+  --size: 36px;
 }
 
 label {
   display: flex;
   align-items: center;
   line-height: 1;
+  color: var(--color-grey-1);
   cursor: inherit;
 
   wc-icon {
     margin: 0 3px;
-    transition: transform 0.1s easein-out;
+    transition: transform 0.15s linear, color 0.15s linear;
+
+    &[is='star'] {
+      color: var(--default-color, inherit);
+    }
+
+    &[is='star-full'],
+    &[is='star-half'] {
+      color: var(--color-teal-1);
+    }
 
     &:hover {
       transform: scale(1.05);
@@ -37,43 +43,26 @@ label {
   }
 
   span {
-    padding: 0 8px;
-    margin: 0 3px;
+    padding: 2px 8px 0;
+    margin: 0 6px;
   }
 }
 
 :host([size='large']) {
-  font-size: 16px;
-  --size: 36px;
+  font-size: 26px;
+  --size: 52px;
 }
 :host([size='medium']) {
-  --size: 30px;
+  font-size: 22px;
+  --size: 44px;
+}
+:host([size='small']) {
+  font-size: 16px;
+  --size: 32px;
 }
 :host([size='mini']) {
-  font-size: 12px;
-  --size: 20px;
-}
-
-:host([type='danger']) label span {
-  color: var(--color-red-1);
-}
-:host([type='primary']) label span {
-  color: var(--color-teal-1);
-}
-:host([type='success']) label span {
-  color: var(--color-green-1);
-}
-:host([type='default']) label span {
-  color: var(--color-grey-1);
-}
-:host([type='info']) label span {
-  color: var(--color-blue-1);
-}
-:host([color='purple']) label span {
-  color: var(--color-purple-1);
-}
-:host([type='warning']) label span {
-  color: var(--color-orange-1);
+  font-size: 14px;
+  --size: 26px;
 }
 
 :host([disabled]) {
@@ -94,7 +83,8 @@ export default class Star {
     value: 0,
     text: [],
     size: '',
-    color: '',
+    'default-color': null,
+    colors: '',
     'allow-half': false,
     'show-value': false,
     starSize: 32, // 星星的宽度, 用于实现半星
@@ -227,9 +217,18 @@ export default class Star {
         this.props[name] = true
         break
 
-      case 'color':
+      case 'default-color':
         if (val) {
-          this.props.color = val
+          this.__BOX__.style.cssText += `--default-color:${val}`
+        } else {
+          this.__BOX__.style = ''
+        }
+        break
+      case 'colors':
+        if (val === null) {
+          this.props.colors = ['#48c9b0']
+        } else {
+          this.props.colors = val.split(',').map(s => s.trim())
         }
         break
 
diff --git a/src/icon/index.wc b/src/icon/index.wc
index f23d94b..87a42e8 100644
--- a/src/icon/index.wc
+++ b/src/icon/index.wc
@@ -5,8 +5,8 @@
 <style lang="scss">
 :host {
   display: inline-flex;
-  width: var(--size, 32px);
-  height: var(--size, 32px);
+  width: var(--size, 36px);
+  height: var(--size, 36px);
   color: inherit;
 }
 :host(:not([is])) {
@@ -31,38 +31,18 @@
   height: 52px;
 }
 :host([size='medium']) {
-  width: 36px;
-  height: 36px;
+  width: 44px;
+  height: 44px;
+}
+:host([size='small']) {
+  width: 32px;
+  height: 32px;
 }
 :host([size='mini']) {
   width: 26px;
   height: 26px;
 }
 
-:host([red]) {
-  color: var(--color-red-1);
-}
-
-:host([blue]) {
-  color: var(--color-blue-1);
-}
-
-:host([green]) {
-  color: var(--color-green-1);
-}
-
-:host([orange]) {
-  color: var(--color-orange-1);
-}
-
-:host([grey]) {
-  color: var(--color-grey-1);
-}
-
-:host([dark]) {
-  color: var(--color-dark-1);
-}
-
 @keyframes circle {
   0% {
     stroke-dasharray: 0, 3812px;