调整input组件

src/form/input.js

@@ -22,16 +22,11 @@ class Input extends Component {
     disabled: false,
     clearable: false,
     icon: '',
-    size: 'l',
     placeholder: '',
     maxlength: { type: Number, default: null },
     minlength: { type: Number, default: null },
-    value: {
+    value: 'str!',
-      type: String,
+    lazy: 'num!0' // 并发拦截时间, 单位毫秒
-      default: '',
-      attribute: false
-    },
-    lazy: 0 // 并发拦截时间, 单位毫秒
   }
   #list = []
   #selectIndex = -1
@@ -43,8 +38,8 @@ class Input extends Component {
       :host {
         position: relative;
         display: inline-flex;
-        min-width: 228px;
+        min-width: 188px;
-        height: 36px;
+        height: 32px;
         user-select: none;
         -moz-user-select: none;
         color: var(--color-dark-1);
@@ -60,7 +55,7 @@ class Input extends Component {
         align-items: center;
         height: 100%;
         font-size: 14px;
-        border: 1px solid var(--color-grey-2);
+        border: 1px solid var(--wc-input-border-color, var(--color-dark-1));
         border-radius: inherit;
         background: var(--bg-color, #fff);
         color: inherit;
@@ -86,23 +81,6 @@ class Input extends Component {
           }
         }
 
-        .prepend,
-        .append {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: auto;
-          white-space: nowrap;
-        }
-
-        &[prepend] .prepend,
-        &[append] .append {
-          display: flex;
-        }
-        &[prepend] input,
-        &[append] input {
-          min-width: 64px;
-        }
         /* ----- */
         .close {
           --wc-icon-size: 18px;
@@ -168,75 +146,6 @@ class Input extends Component {
         .label input {
           padding: 0 10px;
         }
-
-        .label[prepend] input,
-        .label[append] input {
-          padding: 0 5px;
-        }
-      }
-
-      :host([size='large']) {
-        min-width: 234px;
-        .label {
-          height: 52px;
-          font-size: 18px;
-
-          input {
-            padding: 0 16px;
-          }
-        }
-        .prepend,
-        .append {
-          height: 48px;
-          padding: 0 16px;
-        }
-
-        .icon {
-          --wc-icon-size: 24px;
-          margin: 0 20px 0 4px;
-        }
-      }
-      :host([size='medium']) {
-        min-width: 160px;
-        .label {
-          height: 44px;
-
-          input {
-            padding: 0 10px;
-          }
-        }
-        .prepend,
-        .append {
-          height: 40px;
-        }
-      }
-      :host([size='small']) {
-        min-width: 96px;
-        .label {
-          height: 32px;
-
-          input {
-            padding: 0 6px;
-          }
-        }
-        .prepend,
-        .append {
-          height: 28px;
-        }
-      }
-      :host([size='mini']) {
-        min-width: 72px;
-        .label {
-          height: 26px;
-          font-size: 12px;
-        }
-        .icon {
-          --wc-icon-size: 14px;
-        }
-        .prepend,
-        .append {
-          height: 22px;
-        }
       }
 
       :host(:focus-within) {
@@ -256,46 +165,25 @@ class Input extends Component {
       :host([readonly]) {
         cursor: default;
       }
-
-      :host([no-border]),
-      :host(:focus-within[no-border]) {
-        .label {
-          border: 0;
-
-          &[prepend] input {
-            padding-left: 2px;
-          }
-          &[append] input {
-            padding-right: 2px;
-          }
-        }
-        .prepend,
-        .append {
-          border: 0;
-        }
-      }
     `,
     //尺寸
     css`
       @use 'sass:map';
       $sizes: (
         m: (
-          w: 82px,
+          w: 128px,
           h: 24px,
           f: 12px
         ),
-        l: (
+        // l default
-          w: 108px,
+        xl:
-          h: 32px,
+          (
-          f: 14px
+            w: 224px,
-        ),
+            h: 36px,
-        xl: (
+            f: 14px
-          w: 132px,
+          ),
-          h: 36px,
-          f: 14px
-        ),
         xxl: (
-          w: 160px,
+          w: 288px,
           h: 44px,
           f: 14px
         )
@@ -313,45 +201,12 @@ class Input extends Component {
           .icon {
             --wc-icon-size: #{map.get($v, 'f')};
           }
-          @if $s == 'xxxl' {
-            .icon {
-              --wc-icon-size: 22px;
-              margin: 0 12px 0 4px;
-            }
-          }
         }
         :host([size='#{$s}'][circle]) {
           width: map.get($v, 'h');
           height: map.get($v, 'h');
         }
       }
-    `,
-
-    /* ----- 类型(颜色) ----- */
-    css`
-      $colors: (
-        primary: 'teal',
-        info: 'blue',
-        success: 'green',
-        warning: 'orange',
-        danger: 'red',
-        secondary: 'dark',
-        help: 'grey'
-      );
-
-      @loop $t, $c in $colors {
-        :host([type='#{$t}']:focus-within) {
-          box-shadow: 0 0 0 2px var(--color-#{$c}-a);
-        }
-
-        :host([type='#{$t}']) .label {
-          border-color: var(--color-#{$c}-2);
-          .prepend,
-          .append {
-            border-color: var(--color-#{$c}-a);
-          }
-        }
-      }
     `
   ]
   renderClear() {
@@ -366,7 +221,9 @@ class Input extends Component {
 
     return html`
       <div class="label">
-        <slot class="prepend" name="prepend"></slot>
+        <slot name="prepend">
+          <wc-icon class="icon" name=${this.icon}></wc-icon>
+        </slot>
         <input
           ref="input"
           @input=${this.handleInput}
@@ -382,9 +239,7 @@ class Input extends Component {
           :value=${this.value}
         />
         ${this.clearable && this.value ? this.renderClear() : ''}
-        ${this.icon
+        <slot name="append"></slot>
-          ? html`<wc-icon class="icon" name=${this.icon} />`
-          : html`<slot class="append" name="append" />`}
         <div class=${classes} ref="suggestion" #animation=${ANIMATION}>
           <div ref="scroller" class="scroller">
             <ul class="list" @click=${this.handleClickItem} ref="list">

src/form/passwd.js

@@ -21,7 +21,7 @@ class Passwd extends Component {
       :host {
         overflow: hidden;
         display: inline-flex;
-        min-width: 108px;
+        min-width: 188px;
         user-select: none;
         -moz-user-select: none;
         color: var(--color-dark-1);
@@ -37,7 +37,7 @@ class Passwd extends Component {
         align-items: center;
         height: 32px;
         font-size: 14px;
-        border: 1px solid var(--wc-passwd-border-color, var(--color-dark-2));
+        border: 1px solid var(--wc-passwd-border-color, var(--color-dark-1));
         border-radius: inherit;
         background: var(--wc-passwd-background, #fff);
         color: inherit;
@@ -85,19 +85,19 @@ class Passwd extends Component {
       @use 'sass:map';
       $sizes: (
         m: (
-          w: 72px,
+          w: 128px,
           h: 24px,
           f: 12px
         ),
         // l default
         xl:
           (
-            w: 132px,
+            w: 224px,
             h: 36px,
             f: 14px
           ),
         xxl: (
-          w: 160px,
+          w: 288px,
           h: 44px,
           f: 14px
         )