重构input组件

src/form/input.js

@@ -4,27 +4,39 @@
  * @date 2023/03/06 15:17:25
  */
 
-import { $, bind, unbind, nextTick, css, html, Component } from '@bd/core'
+import { nextTick, css, html, Component } from '@bd/core'
 import '../icon/index.js'
 
 class Input extends Component {
   static props = {
-    readonly: false,
+    readOnly: false,
     autofocus: false,
     disabled: false,
+    closeable: false,
     icon: '',
     placeholder: '',
-    maxlength: '',
+    maxlength: null,
-    minlength: '',
+    minlength: null,
-    value: '',
+    value: {
+      type: String,
+      default: '',
+      attribute: false,
+      observer(val) {
+        if (this.$refs) {
+          this.$refs.input.value = val
+        }
+      }
+    },
     lazy: 0 // 并发拦截时间, 单位毫秒
   }
 
-  static styles = css`
+  static styles = [
+    css`
       :host {
         overflow: hidden;
         display: inline-flex;
         min-width: 228px;
+        height: 36px;
         user-select: none;
         -moz-user-select: none;
         color: var(--color-dark-1);
@@ -38,7 +50,7 @@ class Input extends Component {
         display: flex;
         justify-content: center;
         align-items: center;
-      height: 36px;
+        height: 100%;
         font-size: 14px;
         border: 1px solid var(--color-grey-2);
         border-radius: inherit;
@@ -72,19 +84,9 @@ class Input extends Component {
           justify-content: center;
           align-items: center;
           width: auto;
-        height: 34px;
-        padding: 0 10px;
-        line-height: 1;
           white-space: nowrap;
         }
-      .prepend {
+
-        border-right: 1px solid var(--color-grey-a);
-        border-radius: 6px 0 0 6px;
-      }
-      .append {
-        border-left: 1px solid var(--color-grey-a);
-        border-radius: 0 6px 6px 0;
-      }
         &[prepend] .prepend,
         &[append] .append {
           display: flex;
@@ -95,8 +97,7 @@ class Input extends Component {
         }
         /* ----- */
         .close {
-        display: none;
+          --size: 18px;
-        --size: 16px;
           margin: 0 8px 0 4px;
           padding: 4px;
           border-radius: 50%;
@@ -107,10 +108,6 @@ class Input extends Component {
           &:hover {
             background: var(--color-plain-1);
           }
-
-        &.show {
-          display: block;
-        }
         }
       }
 
@@ -160,26 +157,13 @@ class Input extends Component {
 
         .label input {
           padding: 0 10px;
-        margin: 0 18px;
+          // margin: 0 18px;
         }
 
         .label[prepend] input,
         .label[append] input {
           padding: 0 5px;
         }
-      .label[prepend] input {
-        margin-left: 0;
-      }
-      .label[append] input {
-        margin-right: 0;
-      }
-
-      .prepend {
-        border-radius: 26px 0 0 26px;
-      }
-      .append {
-        border-radius: 0 26px 26px 0;
-      }
       }
 
       :host([size='large']) {
@@ -246,33 +230,9 @@ class Input extends Component {
         }
       }
 
-    /* ----- 类型(颜色) ----- */
-    $colors: (
-      primary: 'teal',
-      info: 'blue',
-      success: 'green',
-      warning: 'orange',
-      danger: 'red',
-      secondary: 'dark',
-      help: 'grey'
-    );
       :host(:focus-within) {
         box-shadow: 0 0 0 2px var(--color-plain-a);
       }
-    @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);
-        }
-      }
-    }
-
       /* --- */
       :host([disabled]) {
         pointer-events: none;
@@ -305,63 +265,126 @@ class Input extends Component {
           border: 0;
         }
       }
+    `,
+    //尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        m: (
+          w: 82px,
+          h: 24px,
+          f: 12px
+        ),
+        l: (
+          w: 108px,
+          h: 32px,
+          f: 14px
+        ),
+        xl: (
+          w: 132px,
+          h: 36px,
+          f: 14px
+        ),
+        xxl: (
+          w: 160px,
+          h: 44px,
+          f: 14px
+        ),
+        xxxl: (
+          w: 192px,
+          h: 52px,
+          f: 16px
+        )
+      );
+
+      @loop $s, $v in $sizes {
+        :host([size='#{$s}']) {
+          min-width: map.get($v, 'w');
+          height: map.get($v, 'h');
+          font-size: map.get($v, 'f');
+          .label {
+            height: map.get($v, 'h');
+            font-size: map.get($v, 'f');
+          }
+          .icon {
+            --size: #{map.get($v, 'f')};
+          }
+        }
+        :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);
+          }
+        }
+      }
     `
+  ]
+  renderClose() {
+    return html`<wc-icon
+      class="close"
+      is="close"
+      @click=${this.onClickClose}
+    />`
+  }
 
   render() {
     return html`
       <div class="label">
         <slot class="prepend" name="prepend"></slot>
         <input
+          ref="input"
+          @input=${this.onInput}
           placeholder=${this.placeholder}
           maxlength=${this.maxlength}
           minlength=${this.minlength}
-          value=${this.value}
+          disabled=${this.disabled}
+          readonly=${this.readOnly}
+          autofocus=${this.autofocus}
         />
-        <slot class="append" name="append">
+        ${this.closeable && this.value ? this.renderClose() : ''}
-          <wc-icon style="--size: 16px" is=${this.icon}></wc-icon>
+        ${this.icon
-        </slot>
+          ? html`<wc-icon class="icon" is=${this.icon} />`
+          : html`<slot class="append" name="append" />`}
       </div>
     `
   }
-  #formatSlot() {
+  onInput(e) {
-    const label = this.root.children[0]
+    this.value = e.currentTarget.value
-    const prepend = label.children.prepend.assignedNodes()
-    const append = label.children.append.assignedNodes()
-
-    if (prepend.length) {
-      while (prepend.length > 1) {
-        this.removeChild(prepend.pop())
   }
-      label.setAttribute('prepend', '')
+  onClickClose() {
-    } else {
+    this.$refs.input.value = ''
-      label.removeChild(label.children.prepend)
+    this.value = ''
   }
-
-    if (append.length) {
-      while (append.length > 1) {
-        this.removeChild(append.pop())
-      }
-      label.setAttribute('append', '')
-    } else {
-      !this.icon && label.removeChild(label.children.append)
-    }
-  }
-
   mounted() {
-    this.#formatSlot()
-
-    let $input = $('input', this.root)
     if (this.autofocus) {
-      $input.setAttribute('autofocus', '')
+      // 火狐浏览器需要手动focus()才能聚焦成功
-      // 需要focus()才能聚焦成功
+      nextTick(_ => this.$refs.input.focus())
-      nextTick(() => $input.focus())
     }
-
-    bind($input, 'input', e => {
-      e.stopPropagation()
-      this.value = e.target.value
-      this.$emit('input')
-    })
   }
 }