优化单选和多选

src/form/checkbox.js

@@ -64,11 +64,7 @@ class Checkbox extends Component {
 
 class CheckboxItem extends Component {
   static props = {
-    value: {
+    value: 'str!',
-      type: String,
-      default: '',
-      attribute: false
-    },
     checked: false,
     disabled: false,
     readonly: false
@@ -79,22 +75,20 @@ class CheckboxItem extends Component {
       :host {
         display: inline-flex;
         align-items: center;
-        font-size: 14px;
         cursor: pointer;
 
         label {
           display: flex;
-          justify-content: center;
           align-items: center;
-          min-width: 32px;
           padding-right: 16px;
           line-height: 1;
-          -moz-user-select: none;
+          font-size: 14px;
-          user-select: none;
           white-space: nowrap;
+          color: var(--color-dark-1);
           cursor: inherit;
           outline: none;
-          color: var(--color-dark-1);
+          -webkit-user-select: none;
+          user-select: none;
         }
 
         .dot {
@@ -134,36 +128,27 @@ class CheckboxItem extends Component {
     css`
       @use 'sass:map';
       $sizes: (
+        s: (
+          h: 20px,
+          f: 12px
+        ),
         m: (
-          w: 72px,
           h: 24px,
           f: 12px
         ),
-        l: (
-          w: 108px,
-          h: 32px,
-          f: 14px
-        ),
         xl: (
-          w: 132px,
           h: 36px,
-          f: 14px
+          f: 16px
-        ),
-        xxl: (
-          w: 160px,
-          h: 44px,
-          f: 14px
         )
       );
 
       @loop $s, $v in $sizes {
         :host([size='#{$s}']) {
           height: map.get($v, 'h');
-          font-size: map.get($v, 'f');
 
           .dot {
-            width: #{map.get($v, 'f')};
+            width: map.get($v, 'f');
-            height: #{map.get($v, 'f')};
+            height: map.get($v, 'f');
           }
         }
       }
@@ -175,9 +160,7 @@ class CheckboxItem extends Component {
         info: 'blue',
         success: 'green',
         warning: 'orange',
-        danger: 'red',
+        danger: 'red'
-        secondary: 'dark',
-        help: 'grey'
       );
 
       @loop $t, $c in $colors {
@@ -188,10 +171,6 @@ class CheckboxItem extends Component {
 
           .dot {
             border-color: var(--color-#{$c}-2);
-
-            &::after {
-              background: var(--color-#{$c}-2);
-            }
           }
 
           &:host(:focus-within) .dot {
@@ -202,12 +181,12 @@ class CheckboxItem extends Component {
     `,
     // 状态
     css`
+      :host([readonly]),
       :host([disabled]) {
-        cursor: not-allowed;
         opacity: 0.6;
       }
-      :host([readonly]) {
+      :host([disabled]) {
-        cursor: default;
+        cursor: not-allowed;
       }
     `
   ]

src/form/link.js

@@ -22,8 +22,6 @@ class Link extends Component {
         position: relative;
         display: inline-flex;
         border-radius: 2px;
-        user-select: none;
-        -moz-user-select: none;
         font-size: inherit;
         cursor: pointer;
         transition: box-shadow 0.15s linear;
@@ -42,6 +40,8 @@ class Link extends Component {
           cursor: inherit;
           text-decoration: none;
           transition: color 0.15s linear;
+          -webkit-user-select: none;
+          user-select: none;
 
           &::-moz-focus-inner {
             border: none;

src/form/radio.js

@@ -167,9 +167,7 @@ class RadioItem extends Component {
         info: 'blue',
         success: 'green',
         warning: 'orange',
-        danger: 'red',
+        danger: 'red'
-        secondary: 'dark',
-        help: 'grey'
       );
 
       @loop $t, $c in $colors {