diff --git a/src/form/input.js b/src/form/input.js index e9bce9f..5dbfe36 100644 --- a/src/form/input.js +++ b/src/form/input.js @@ -22,16 +22,11 @@ class Input extends Component { disabled: false, clearable: false, icon: '', - size: 'l', placeholder: '', maxlength: { type: Number, default: null }, minlength: { type: Number, default: null }, - value: { - type: String, - default: '', - attribute: false - }, - lazy: 0 // 并发拦截时间, 单位毫秒 + value: 'str!', + lazy: 'num!0' // 并发拦截时间, 单位毫秒 } #list = [] #selectIndex = -1 @@ -43,8 +38,8 @@ class Input extends Component { :host { position: relative; display: inline-flex; - min-width: 228px; - height: 36px; + min-width: 188px; + height: 32px; user-select: none; -moz-user-select: none; color: var(--color-dark-1); @@ -60,7 +55,7 @@ class Input extends Component { align-items: center; height: 100%; font-size: 14px; - border: 1px solid var(--color-grey-2); + border: 1px solid var(--wc-input-border-color, var(--color-dark-1)); border-radius: inherit; background: var(--bg-color, #fff); color: inherit; @@ -86,23 +81,6 @@ class Input extends Component { } } - .prepend, - .append { - display: flex; - justify-content: center; - align-items: center; - width: auto; - white-space: nowrap; - } - - &[prepend] .prepend, - &[append] .append { - display: flex; - } - &[prepend] input, - &[append] input { - min-width: 64px; - } /* ----- */ .close { --wc-icon-size: 18px; @@ -168,75 +146,6 @@ class Input extends Component { .label input { padding: 0 10px; } - - .label[prepend] input, - .label[append] input { - padding: 0 5px; - } - } - - :host([size='large']) { - min-width: 234px; - .label { - height: 52px; - font-size: 18px; - - input { - padding: 0 16px; - } - } - .prepend, - .append { - height: 48px; - padding: 0 16px; - } - - .icon { - --wc-icon-size: 24px; - margin: 0 20px 0 4px; - } - } - :host([size='medium']) { - min-width: 160px; - .label { - height: 44px; - - input { - padding: 0 10px; - } - } - .prepend, - .append { - height: 40px; - } - } - :host([size='small']) { - min-width: 96px; - .label { - height: 32px; - - input { - padding: 0 6px; - } - } - .prepend, - .append { - height: 28px; - } - } - :host([size='mini']) { - min-width: 72px; - .label { - height: 26px; - font-size: 12px; - } - .icon { - --wc-icon-size: 14px; - } - .prepend, - .append { - height: 22px; - } } :host(:focus-within) { @@ -256,46 +165,25 @@ class Input extends Component { :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, - .append { - border: 0; - } - } `, //尺寸 css` @use 'sass:map'; $sizes: ( m: ( - w: 82px, + w: 128px, h: 24px, f: 12px ), - l: ( - w: 108px, - h: 32px, - f: 14px - ), - xl: ( - w: 132px, - h: 36px, - f: 14px - ), + // l default + xl: + ( + w: 224px, + h: 36px, + f: 14px + ), xxl: ( - w: 160px, + w: 288px, h: 44px, f: 14px ) @@ -313,45 +201,12 @@ class Input extends Component { .icon { --wc-icon-size: #{map.get($v, 'f')}; } - @if $s == 'xxxl' { - .icon { - --wc-icon-size: 22px; - margin: 0 12px 0 4px; - } - } } :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); - } - } - } ` ] renderClear() { @@ -366,7 +221,9 @@ class Input extends Component { return html`
- + + + ${this.clearable && this.value ? this.renderClear() : ''} - ${this.icon - ? html`` - : html``} +
    diff --git a/src/form/passwd.js b/src/form/passwd.js index 0980c06..3cb4919 100644 --- a/src/form/passwd.js +++ b/src/form/passwd.js @@ -21,7 +21,7 @@ class Passwd extends Component { :host { overflow: hidden; display: inline-flex; - min-width: 108px; + min-width: 188px; user-select: none; -moz-user-select: none; color: var(--color-dark-1); @@ -37,7 +37,7 @@ class Passwd extends Component { align-items: center; height: 32px; font-size: 14px; - border: 1px solid var(--wc-passwd-border-color, var(--color-dark-2)); + border: 1px solid var(--wc-passwd-border-color, var(--color-dark-1)); border-radius: inherit; background: var(--wc-passwd-background, #fff); color: inherit; @@ -85,19 +85,19 @@ class Passwd extends Component { @use 'sass:map'; $sizes: ( m: ( - w: 72px, + w: 128px, h: 24px, f: 12px ), // l default xl: ( - w: 132px, + w: 224px, h: 36px, f: 14px ), xxl: ( - w: 160px, + w: 288px, h: 44px, f: 14px )