Merge branch 'master' of ssh://github.com/bd-js/wcui

src/form/passwd.js

@@ -32,6 +32,7 @@ class Passwd extends Component {
       :host {
         overflow: hidden;
         display: inline-flex;
+        min-width: 108px;
         user-select: none;
         -moz-user-select: none;
         color: var(--color-dark-1);
@@ -45,10 +46,11 @@ class Passwd extends Component {
         display: flex;
         justify-content: center;
         align-items: center;
+        height: 32px;
         font-size: 14px;
         border: 1px solid var(--color-grey-2);
         border-radius: inherit;
-        background: var(--bg-color, #fff);
+        background: var(--input-bg-color, #fff);
         color: inherit;
         cursor: inherit;
 
@@ -75,29 +77,8 @@ class Passwd extends Component {
     `,
     css`
       .label {
-        .prepend {
-          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;
-        }
-
-        &[prepend] .prepend {
-          display: flex;
-        }
-        &[prepend] input {
-          min-width: 64px;
-        }
-        /* ----- */
         .icon {
-          --size: 18px;
+          --size: 16px;
           margin: 0 8px 0 4px;
           color: var(--color-grey-2);
           cursor: pointer;
@@ -140,20 +121,21 @@ class Passwd extends Component {
           min-width: map.get($v, 'w');
           .label {
             height: map.get($v, 'h');
-
-            input {
-              padding: 0 6px 0 10px;
-            }
           }
-          .prepend,
+
-          .append {
+          @if $s == 'xxl' {
-            height: map.get($v, 'h');
+            .icon {
+              --size: 18px;
+            }
           }
 
           @if $s == 'xxxl' {
+            .label input {
+              padding: 0 6px 0 10px;
+            }
             .icon {
-              --size: 24px;
+              --size: 22px;
-              margin: 0 16px 0 4px;
+              margin: 0 12px 0 4px;
             }
           }
         }
@@ -181,15 +163,18 @@ class Passwd extends Component {
 
         :host([type='#{$t}']) .label {
           border-color: var(--color-#{$c}-2);
-          .prepend,
-          .append {
-            border-color: var(--color-#{$c}-a);
-          }
         }
       }
     `,
 
     css`
+      :host([disabled]),
+      :host([readonly]) {
+        cursor: default;
+        .icon {
+          cursor: default;
+        }
+      }
       :host([disabled]) {
         cursor: not-allowed;
 
@@ -199,24 +184,11 @@ class Passwd extends Component {
           opacity: 0.6;
         }
       }
-      :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 {
-          border: 0;
         }
       }
     `
@@ -231,7 +203,7 @@ class Passwd extends Component {
   }
 
   iconClick(ev) {
-    if (this.readonly || this.disabled) {
+    if (this.readOnly || this.disabled) {
       return
     }
     this._type = this._type === 'password' ? '' : 'password'
@@ -249,7 +221,7 @@ class Passwd extends Component {
           spellcheck="false"
           ref="input"
           @input=${this.handleInput}
-          :readonly=${this.readOnly}
+          :readOnly=${this.readOnly}
           :disabled=${this.disabled}
           :type=${this._type}
           :value=${this.value}
@@ -257,7 +229,7 @@ class Passwd extends Component {
         <wc-icon
           class="icon"
           @click=${this.iconClick}
-          :is=${this._type === 'password' ? 'eye-off' : 'eye'}
+          :is=${this._type === 'password' ? 'eye' : 'eye-off'}
         ></wc-icon>
       </div>
     `