重构passwd组件

src/css/reset-basic.css

@@ -78,4 +78,9 @@ code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
   --color-dark-1: #64748B;
   --color-dark-2: #475569;
   --color-dark-3: #2c3441;
+
+
+  --color-drag-background: #fdf6ec;
+  --color-readonly-background: #f7f8fb;
+  --color-disabled-background: #fef0f0;
 }

src/form/passwd.js

@@ -22,15 +22,15 @@ class Passwd extends Component {
         overflow: hidden;
         display: inline-flex;
         min-width: 188px;
-        user-select: none;
-        -moz-user-select: none;
         color: var(--color-dark-1);
         border-radius: 3px;
         cursor: text;
         transition: box-shadow 0.15s linear;
+        -webkit-user-select: none;
+        user-select: none;
       }
 
-      .label {
+      .container {
         flex: 1;
         display: flex;
         justify-content: center;
@@ -52,7 +52,8 @@ class Passwd extends Component {
           border: 0;
           border-radius: inherit;
           color: inherit;
-          font: inherit;
+          font-family: inherit;
+          font-size: inherit;
           background: none;
           outline: none;
           box-shadow: none;
@@ -63,7 +64,7 @@ class Passwd extends Component {
           }
         }
       }
-      :host([round]) .label input {
+      :host([round]) .container input {
         padding: 0 6px 0 20px;
       }
       :host(:focus-within) {
@@ -71,7 +72,7 @@ class Passwd extends Component {
       }
     `,
     css`
-      .label {
+      .container {
         .icon {
           --wc-icon-size: 16px;
           margin: 0 8px 0 4px;
@@ -82,39 +83,10 @@ class Passwd extends Component {
     `,
     // 尺寸
     css`
-      @use 'sass:map';
-      $sizes: (
-        m: (
-          w: 128px,
-          h: 24px,
-          f: 12px
-        ),
-        // l default
-        xl:
-          (
-            w: 224px,
-            h: 36px,
-            f: 14px
-          ),
-        xxl: (
-          w: 288px,
-          h: 44px,
-          f: 14px
-        )
-      );
-
-      @loop $s, $v in $sizes {
-        :host([size='#{$s}']) {
-          min-width: map.get($v, 'w');
-          .label {
-            height: map.get($v, 'h');
-          }
-
-          @if $s == 'xxl' {
-            .icon {
-              --wc-icon-size: 18px;
-            }
-          }
+      :host([size='small']) {
+        min-width: 128px;
+        .container {
+          height: 24px;
         }
       }
     `,
@@ -122,56 +94,67 @@ class Passwd extends Component {
       :host([disabled]),
       :host([readonly]) {
         cursor: default;
+
         .icon {
-          cursor: default;
+          cursor: inherit;
+        }
+
+        .container {
+          background: var(--color-readonly-background);
+          opacity: 0.6;
         }
       }
       :host([disabled]) {
         cursor: not-allowed;
 
-        .label {
-          border-color: var(--color-grey-1);
-          background: var(--color-plain-1);
-          opacity: 0.6;
+        .container {
+          background: var(--color-disabled-background);
         }
       }
     `
   ]
 
   #type = 'password'
+  #stamp = 0
 
   mounted() {
     if (this.autofocus) {
-      nextTick(_ => this.$refs.input.focus())
+      this.$refs.input.focus()
     }
   }
 
-  iconClick(ev) {
+  #toggleView(ev) {
     if (this.readOnly || this.disabled) {
       return
     }
-    this.#type = this.#type === 'password' ? '' : 'password'
+    this.#type = this.#type === 'password' ? 'text' : 'password'
     this.$requestUpdate()
   }
 
-  handleInput(ev) {
+  #fetch(ev) {
+    let now = Date.now()
+    let { lazy } = this
     this.value = ev.target.value
-  }
 
-  handleChange() {
-    this.$emit('change')
+    // 并发拦截
+    if (lazy && now - this.#stamp < lazy) {
+      return
+    }
+
+    this.#stamp = now
+    this.$emit(ev.type)
   }
 
   render() {
     return html`
-      <div class="label">
+      <main class="container">
         <slot class="prepend" name="prepend"></slot>
         <input
           spellcheck="false"
           ref="input"
           placeholder=${this.placeholder}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
+          @input.stop=${this.#fetch}
+          @change=${this.#fetch}
           :readOnly=${this.readOnly}
           :disabled=${this.disabled}
           :type=${this.#type}
@@ -179,10 +162,10 @@ class Passwd extends Component {
         />
         <wc-icon
           class="icon"
-          @click=${this.iconClick}
+          @click=${this.#toggleView}
           :name=${this.#type === 'password' ? 'eye' : 'eye-off'}
         ></wc-icon>
-      </div>
+      </main>
     `
   }
 }