移除button无用代码;增加passwd组件

Readme.md

@@ -23,8 +23,10 @@
 - [ ] `wc-counter`倒计时组件
 - [ ] `wc-drag`拖拽组件 
 - [x] `wc-button`表单组件-按钮
+- [x] `wc-button`表单组件-链接按钮
 - [ ] `wc-checkbox`表单组件-复选框
 - [ ] `wc-input`表单组件-文本输入框
+- [ ] `wc-passwd`表单组件-文本输入框
 - [ ] `wc-number`表单组件-步进数字输入
 - [ ] `wc-star`表单组件-评分
 - [ ] `wc-radio`表单组件-单选框

src/form/button.js

@@ -132,9 +132,6 @@ class Button extends Component {
         :host([size='#{$s}'][circle]) {
           width: map.get($v, 'h');
           height: map.get($v, 'h');
-
-          button {
-          }
         }
       }
 

src/form/passwd.js

@@ -0,0 +1,260 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/16 18:05:43
+ */
+import { css, html, Component, $, bind, unbind, nextTick } from '@bd/core'
+import '../icon/index.js'
+
+class Passwd extends Component {
+  static props = {
+    type: 'primary',
+    icon: '',
+    size: 'l',
+    value: {
+      type: String,
+      default: '',
+      attribute: false
+    },
+    _type: {
+      type: String,
+      default: 'password',
+      attribute: false
+    },
+    autofocus: false,
+    readonly: false,
+    disabled: false,
+    lazy: 0 // 并发拦截时间, 单位毫秒
+  }
+
+  static styles = [
+    css`
+      :host {
+        overflow: hidden;
+        display: inline-flex;
+        user-select: none;
+        -moz-user-select: none;
+        color: var(--color-dark-1);
+        border-radius: 3px;
+        cursor: text;
+        transition: box-shadow 0.15s linear;
+      }
+
+      .label {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 14px;
+        border: 1px solid var(--color-grey-2);
+        border-radius: inherit;
+        background: var(--bg-color, #fff);
+        color: inherit;
+        cursor: inherit;
+
+        input {
+          flex: 1;
+          min-width: 36px;
+          width: 0;
+          height: 100%;
+          padding: 0 4px 0 8px;
+          border: 0;
+          border-radius: inherit;
+          color: inherit;
+          font: inherit;
+          background: none;
+          outline: none;
+          box-shadow: none;
+          cursor: inherit;
+
+          &::placeholder {
+            color: var(--color-grey-1);
+          }
+        }
+      }
+    `,
+    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;
+          margin: 0 8px 0 4px;
+          color: var(--color-grey-2);
+          cursor: pointer;
+        }
+      }
+    `,
+    // 尺寸
+    css`
+      @use 'sass:map';
+      $sizes: (
+        m: (
+          w: 72px,
+          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');
+          .label {
+            height: map.get($v, 'h');
+
+            input {
+              padding: 0 6px 0 10px;
+            }
+          }
+          .prepend,
+          .append {
+            height: map.get($v, 'h');
+          }
+
+          @if $s == 'xxxl' {
+            .icon {
+              --size: 24px;
+              margin: 0 16px 0 4px;
+            }
+          }
+        }
+        :host([round][size='#{$s}']) .label input {
+          padding: 0 6px 0 20px;
+        }
+      }
+    `,
+    // 配色
+    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);
+          }
+        }
+      }
+    `,
+
+    css`
+      :host([disabled]) {
+        cursor: not-allowed;
+
+        .label {
+          border-color: var(--color-grey-1);
+          background: var(--color-plain-1);
+          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;
+        }
+      }
+    `
+  ]
+
+  mounted() {
+    let $input = $('input', this.root)
+    let $icon = $('.icon', this.root)
+
+    if (this.autofocus) {
+      $input.setAttribute('autofocus', '')
+      // 需要focus()才能聚焦成功
+      nextTick(_ => $input.focus())
+    }
+
+    bind($icon, 'click', ev => {
+      this._type = this._type === 'password' ? '' : 'password'
+    })
+
+    bind($input, 'input', ev => {
+      ev.stopPropagation()
+      this.value = ev.target.value
+      this.$emit('input', { data: this.value })
+    })
+  }
+
+  render() {
+    return html`
+      <div class="label">
+        <slot class="prepend" name="prepend"></slot>
+        <input spellcheck="false" :type=${this._type} :value=${this.value} />
+        <wc-icon
+          class="icon"
+          :is=${this._type === 'password' ? 'eye-off' : 'eye'}
+        ></wc-icon>
+      </div>
+    `
+  }
+}
+
+customElements.define('wc-passwd', Passwd)