优化star组件

src/form/star.js

@@ -9,7 +9,7 @@ import '../icon/index.js'
 
 class Star extends Component {
   static props = {
-    value: 0,
+    value: 'num!0',
     text: [],
     allowHalf: false,
     showValue: false,
@@ -23,9 +23,10 @@ class Star extends Component {
         display: flex;
         font-size: 14px;
         cursor: pointer;
+        -webkit-user-select: none;
         user-select: none;
       }
-      label {
+      main {
         display: flex;
         align-items: center;
         line-height: 1;
@@ -44,7 +45,7 @@ class Star extends Component {
             &:nth-child(#{$i}) {
               &[name='star-full'],
               &[name='star-half'] {
-                color: var(--star-active-#{$i}, var(--color-teal-1));
+                color: var(--wc-star-active-#{$i}, var(--color-teal-1));
               }
             }
           }
@@ -82,6 +83,13 @@ class Star extends Component {
           font-size: map.get($v, 'f');
         }
       }
+    `,
+    // 状态
+    css`
+      :host([disabled]) {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
     `
   ]
 
@@ -134,7 +142,7 @@ class Star extends Component {
     this.#value = { i, f }
   }
 
-  handleMove(ev) {
+  #handleMove(ev) {
     if (this.disabled) {
       return
     }
@@ -145,14 +153,14 @@ class Star extends Component {
     }
   }
 
-  handleLeave() {
+  #handleLeave() {
     if (this.disabled) {
       return
     }
     this.#updateDraw(-1)
   }
 
-  handleClick(ev) {
+  #handleClick(ev) {
     let tmp = this.#value
     if (this.disabled) {
       return
@@ -184,11 +192,11 @@ class Star extends Component {
       val = val || ''
     }
     return html`
-      <label
+      <main
         ref="box"
-        @mousemove=${this.handleMove}
+        @mousemove=${this.#handleMove}
-        @mouseleave=${this.handleLeave}
+        @mouseleave=${this.#handleLeave}
-        @click=${this.handleClick}
+        @click=${this.#handleClick}
       >
         <wc-icon data-idx="0" name="star"></wc-icon>
         <wc-icon data-idx="1" name="star"></wc-icon>
@@ -196,7 +204,7 @@ class Star extends Component {
         <wc-icon data-idx="3" name="star"></wc-icon>
         <wc-icon data-idx="4" name="star"></wc-icon>
         <span class="text">${this.showValue ? val : ''}</span>
-      </label>
+      </main>
     `
   }
 }