diff --git a/Readme.md b/Readme.md index b9086cf..3633f93 100644 --- a/Readme.md +++ b/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`表单组件-单选框 diff --git a/src/form/button.js b/src/form/button.js index ec63169..a974b2d 100644 --- a/src/form/button.js +++ b/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 { - } } } diff --git a/src/form/passwd.js b/src/form/passwd.js new file mode 100644 index 0000000..7d95aad --- /dev/null +++ b/src/form/passwd.js @@ -0,0 +1,260 @@ +/** + * {} + * @author yutent + * @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` +
+ + + +
+ ` + } +} + +customElements.define('wc-passwd', Passwd)