diff --git a/src/input/README.en-US.md b/src/input/README.en-US.md index 18ba15347..af9ab6f05 100644 --- a/src/input/README.en-US.md +++ b/src/input/README.en-US.md @@ -7,6 +7,7 @@ name | type | default | description | required -- | -- | -- | -- | -- align | String | left | options：left/center/right | N +layout | String | horizontal | options：vertical/horizontal | N borderless | Boolean | true | \- | N clearable | Boolean | false | \- | N custom-style `v0.25.0` | String | - | \- | N diff --git a/src/input/README.md b/src/input/README.md index 21dc12ff3..3c04d6944 100644 --- a/src/input/README.md +++ b/src/input/README.md @@ -15,18 +15,6 @@ isComponent: true "t-input": "tdesign-miniprogram/input/input" } ``` -### 主题定制 -CSS 变量名|说明 ---|-- ---td-input-bg-color | 输入框背景颜色 ---td-input-text-color | 输入框文本颜色 ---td-input-placeholder-text-color | 输入框placeholder占位符颜色 ---td-input-error-text-color | 输入错误时文本颜色 ---td-input-disabled-text-color | 禁用输入框颜色 ---td-input-border-color | 输入框边框颜色 ---td-input-error-msg-color | 错误提示文本颜色 ---td-input-icon-color | 图标颜色 ---td-input-suffix-text-color | 后置文本内容颜色 ## 代码演示 @@ -76,25 +64,29 @@ CSS 变量名|说明 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- align | String | left | 文本内容位置，居左/居中/居右。可选项：left/center/right | N -borderless | Boolean | true | 是否开启无边框模式 | N +layout | String | horizontal | 标题输入框布局方式。可选项：vertical/horizontal | N +bordered | Boolean | false | 是否显示外边框 | N clearable | Boolean | false | 是否可清空 | N +clearable-icon-props | Object | {} | 透传至组件清楚图标 `icon` | N custom-style `v0.25.0` | String | - | 自定义组件样式 | N disabled | Boolean | false | 是否禁用输入框 | N error-message | String | - | 已废弃。错误提示文本，值为空不显示（废弃属性，如果需要，请更为使用 status 和 tips） | N -external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class','t-class-icon', 't-class-label', 't-class-input', 't-class-clearable', 't-class-suffix', 't-class-suffix-icon', 't-class-error-msg']` | N +external-classes | Array | - | 组件类名，用于设置组件外层元素、输入框、占位符、错误信息等元素类名。`['t-class','t-class-prefix-icon', 't-class-label', 't-class-input', 't-class-clearable', 't-class-suffix', 't-class-suffix-icon', 't-class-tips']` | N format | Function | - | 【开发中】指定输入框展示值的格式。TS 类型：`InputFormatType` `type InputFormatType = (value: InputValue) => number | string`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N label | String / Slot | - | 左侧文本 | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N maxlength | Number | - | 用户最多可以输入的文本长度，一个中文等于一个计数长度。值为空，则表示不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N placeholder | String | undefined | 占位符 | N prefix-icon | String / Slot | - | 组件前置图标，值为字符串则表示图标名称 | N +prefix-icon-props | Object | {} | 透传至组件前置图标 `prefix-icon` | N readonly | Boolean | false | 【开发中】只读状态 | N -size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N -status | String | - | 【开发中】输入框状态。可选项：success/warning/error | N +size | String | medium | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' \| 'small'` | N +status | String | - | 输入框状态。可选项：success/warning/error | N suffix | String / Slot | - | 后置图标前的后置内容 | N suffix-icon | String / Slot | - | 后置文本内容，值为字符串则表示图标名称 | N -tips | String / Slot | - | 【开发中】输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N -type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password/nickname | N +suffix-icon-props | Object | {} | 透传至组件后缀图标 `suffix-icon` | N +tips | String / Slot | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 | N +type | String | text | 输入框类型。可选项：text/number/idcard/digit/safe-password/password | N value | String / Number | - | 输入框的值。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N default-value | String / Number | undefined | 输入框的值。非受控属性。TS 类型：`InputValue` `type InputValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/input/type.ts) | N password | Boolean | false | 是否是密码类型（已废弃，请更为使用 type 指定输入框类型） | N diff --git a/src/input/__test__/__snapshots__/demo.test.js.snap b/src/input/__test__/__snapshots__/demo.test.js.snap index 66aa5fd32..1aa1f2659 100644 --- a/src/input/__test__/__snapshots__/demo.test.js.snap +++ b/src/input/__test__/__snapshots__/demo.test.js.snap @@ -24,11 +24,70 @@ exports[`Input Input base demo works fine 1`] = ` + + + 标签文字 + + * + + + + + + + + `; +exports[`Input Input bordered demo works fine 1`] = ` + + + + + + +`; + exports[`Input Input custom demo works fine 1`] = ` + + + `; +exports[`Input Input layout demo works fine 1`] = ` + + + +`; + exports[`Input Input maxlength demo works fine 1`] = ` `; -exports[`Input Input require demo works fine 1`] = ` - +exports[`Input Input prefix demo works fine 1`] = ` + - - 标签文字 - - * - - - + prefixIcon="app" + /> - + `; exports[`Input Input size demo works fine 1`] = ` @@ -85,11 +153,11 @@ exports[`Input Input size demo works fine 1`] = ` `; @@ -104,42 +172,56 @@ exports[`Input Input special demo works fine 1`] = ` /> + - 发送验证码 + + + 发送验证码 + - + + + 操作按钮 + + + `; diff --git a/src/input/__test__/__snapshots__/index.test.js.snap b/src/input/__test__/__snapshots__/index.test.js.snap index b95f4b7d3..63c9489eb 100644 --- a/src/input/__test__/__snapshots__/index.test.js.snap +++ b/src/input/__test__/__snapshots__/index.test.js.snap @@ -5,29 +5,33 @@ exports[`input props : clearable && label && suffix 1`] = ` class="base" > - - tdesign - + + tdesign + + - - - - - - - - + + + 后置内容 - - 标签文字 - * + 标签文字 + + * + - + + diff --git a/src/input/__test__/demo.test.js b/src/input/__test__/demo.test.js index 7af5dbb74..36c54b517 100644 --- a/src/input/__test__/demo.test.js +++ b/src/input/__test__/demo.test.js @@ -5,7 +5,19 @@ import simulate from 'miniprogram-simulate'; import path from 'path'; -const mapper = ['align', 'base', 'custom', 'maxlength', 'require', 'size', 'special', 'status', 'suffix']; +const mapper = [ + 'align', + 'base', + 'bordered', + 'custom', + 'layout', + 'maxlength', + 'prefix', + 'size', + 'special', + 'status', + 'suffix', +]; describe('Input', () => { mapper.forEach((demoName) => { diff --git a/src/input/__test__/index.test.js b/src/input/__test__/index.test.js index 712402aab..3d9ad3894 100644 --- a/src/input/__test__/index.test.js +++ b/src/input/__test__/index.test.js @@ -63,10 +63,10 @@ describe('input', () => { class="base" align="{{align}}" size="{{size}}" - borderless="{{borderless}}" + bordered="{{bordered}}" >`, data: { - borderless: false, + bordered: true, align: 'center', size: 'small', }, @@ -77,9 +77,12 @@ describe('input', () => { const comp = simulate.render(id); comp.attach(document.createElement('parent-wrapper')); - const component = comp.querySelector('.base >>> .t-input'); - expect(component.dom.getAttribute('class').includes('t-input--bordered')).toBeTruthy(); - expect(component.dom.getAttribute('class').includes('t-input--size-small')).toBeTruthy(); + const component = comp.querySelector('.base >>> .t-input__content'); + expect(component.dom.getAttribute('class').includes('t-is-border')).toBeTruthy(); + + expect( + comp.querySelector('.base >>> .t-input').dom.getAttribute('class').includes('t-input--size-small'), + ).toBeTruthy(); const $input = comp.querySelector('.base >>> .t-input__control'); expect($input.dom.getAttribute('class').includes('t-input__control--center')).toBeTruthy(); @@ -119,7 +122,7 @@ describe('input', () => { const $clearable = comp.querySelector('.base >>> .t-class-clearable'); expect($clearable).toBeDefined(); - const $suffix = comp.querySelector('.base >>> .t-input__wrap--suffix-text'); + const $suffix = comp.querySelector('.base >>> .t-input__wrap--suffix'); expect($suffix.dom.textContent).toBe(component.instance.data.suffix); }); }); @@ -170,7 +173,7 @@ describe('input', () => { const comp = simulate.render(id); comp.attach(document.createElement('parent-wrapper')); - const clearable = comp.querySelector('.base >>> .t-input__wrap--icon'); + const clearable = comp.querySelector('.base >>> .t-input__wrap--clearable-icon'); clearable.dispatchEvent('tap'); await simulate.sleep(0); expect(handleClear.mock.calls[0][0].detail).toStrictEqual({}); diff --git a/src/input/_example/base/index.js b/src/input/_example/base/index.js index d6ebd8e2d..b79c5124b 100644 --- a/src/input/_example/base/index.js +++ b/src/input/_example/base/index.js @@ -1,5 +1 @@ -Component({ - data: { - value: '', - }, -}); +Component({}); diff --git a/src/input/_example/base/index.wxml b/src/input/_example/base/index.wxml index 6be3a63ed..cfe7096a8 100644 --- a/src/input/_example/base/index.wxml +++ b/src/input/_example/base/index.wxml @@ -1 +1,15 @@ - + + + + 标签文字 * + + + + + + + + + + + diff --git a/src/input/_example/require/index.js b/src/input/_example/bordered/index.js similarity index 100% rename from src/input/_example/require/index.js rename to src/input/_example/bordered/index.js diff --git a/src/input/_example/require/index.json b/src/input/_example/bordered/index.json similarity index 100% rename from src/input/_example/require/index.json rename to src/input/_example/bordered/index.json diff --git a/src/input/_example/bordered/index.wxml b/src/input/_example/bordered/index.wxml new file mode 100644 index 000000000..9c3e8ef62 --- /dev/null +++ b/src/input/_example/bordered/index.wxml @@ -0,0 +1,4 @@ + + + + diff --git a/src/input/_example/require/index.wxss b/src/input/_example/bordered/index.wxss similarity index 100% rename from src/input/_example/require/index.wxss rename to src/input/_example/bordered/index.wxss diff --git a/src/input/_example/custom/index.js b/src/input/_example/custom/index.js index d6ebd8e2d..a0f30840f 100644 --- a/src/input/_example/custom/index.js +++ b/src/input/_example/custom/index.js @@ -1,5 +1,5 @@ Component({ data: { - value: '', + customStyle: 'border-radius: 12rpx;', }, }); diff --git a/src/input/_example/custom/index.wxml b/src/input/_example/custom/index.wxml index 38e999da2..73e83f78d 100644 --- a/src/input/_example/custom/index.wxml +++ b/src/input/_example/custom/index.wxml @@ -1,3 +1,7 @@ - + + + + + diff --git a/src/input/_example/custom/index.wxss b/src/input/_example/custom/index.wxss index ec54b3be9..00b26de47 100644 --- a/src/input/_example/custom/index.wxss +++ b/src/input/_example/custom/index.wxss @@ -2,5 +2,9 @@ --td-input-bg-color: #0053d950; --td-input-text-color: white; --td-input-placeholder-text-color: white; - --td-input-label-color: white; + --td-input-label-text-color: white; +} + +.margin { + margin: 0 32rpx; } diff --git a/src/input/_example/input.json b/src/input/_example/input.json index 411d27fee..87cd4a497 100644 --- a/src/input/_example/input.json +++ b/src/input/_example/input.json @@ -3,8 +3,10 @@ "usingComponents": { "t-input": "tdesign-miniprogram/input/input", "base": "./base", - "require": "./require", "suffix": "./suffix", + "prefix": "./prefix", + "layout": "./layout", + "bordered": "./bordered", "size": "./size", "align": "./align", "maxlength": "./maxlength", diff --git a/src/input/_example/input.wxml b/src/input/_example/input.wxml index 8a8eeda14..12656d621 100644 --- a/src/input/_example/input.wxml +++ b/src/input/_example/input.wxml @@ -2,37 +2,36 @@ Input 输入框 用于单行文本信息输入。 - + - - - - - - - + - - + + - - + + - - + + - + - - + + + - - + + + - - + + + + + diff --git a/src/input/_example/layout/index.js b/src/input/_example/layout/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/input/_example/layout/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/input/_example/layout/index.json b/src/input/_example/layout/index.json new file mode 100644 index 000000000..1ca6b827d --- /dev/null +++ b/src/input/_example/layout/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-input": "tdesign-miniprogram/input/input" + } +} diff --git a/src/input/_example/layout/index.wxml b/src/input/_example/layout/index.wxml new file mode 100644 index 000000000..86541a083 --- /dev/null +++ b/src/input/_example/layout/index.wxml @@ -0,0 +1 @@ + diff --git a/src/input/_example/layout/index.wxss b/src/input/_example/layout/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/input/_example/prefix/index.js b/src/input/_example/prefix/index.js new file mode 100644 index 000000000..b79c5124b --- /dev/null +++ b/src/input/_example/prefix/index.js @@ -0,0 +1 @@ +Component({}); diff --git a/src/input/_example/prefix/index.json b/src/input/_example/prefix/index.json new file mode 100644 index 000000000..1ca6b827d --- /dev/null +++ b/src/input/_example/prefix/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "t-input": "tdesign-miniprogram/input/input" + } +} diff --git a/src/input/_example/prefix/index.wxml b/src/input/_example/prefix/index.wxml new file mode 100644 index 000000000..a5d40b01c --- /dev/null +++ b/src/input/_example/prefix/index.wxml @@ -0,0 +1,3 @@ + + + diff --git a/src/input/_example/prefix/index.wxss b/src/input/_example/prefix/index.wxss new file mode 100644 index 000000000..e69de29bb diff --git a/src/input/_example/require/index.wxml b/src/input/_example/require/index.wxml deleted file mode 100644 index 586bfbf47..000000000 --- a/src/input/_example/require/index.wxml +++ /dev/null @@ -1,4 +0,0 @@ - - 标签文字 * - - diff --git a/src/input/_example/size/index.wxml b/src/input/_example/size/index.wxml index 0d746df0a..5274eca58 100644 --- a/src/input/_example/size/index.wxml +++ b/src/input/_example/size/index.wxml @@ -1,2 +1,2 @@ - - + + diff --git a/src/input/_example/special/index.wxml b/src/input/_example/special/index.wxml index 027c58a0f..687e4a203 100644 --- a/src/input/_example/special/index.wxml +++ b/src/input/_example/special/index.wxml @@ -1,29 +1,39 @@ - - + + + + + - 发送验证码 + + + 发送验证码 + + - + + diff --git a/src/input/_example/special/index.wxss b/src/input/_example/special/index.wxss index 3471089c8..6f51980ed 100644 --- a/src/input/_example/special/index.wxss +++ b/src/input/_example/special/index.wxss @@ -1,4 +1,23 @@ -.error-msg { +.suffix { + display: flex; + align-items: center; +} +.suffix--line { + width: 1px; + height: 24px; + background-color: #f6f6f6; + margin-right: 16px; +} + +.image { + width: 72px; + height: 36px; + display: block; + margin-top: -6px; + margin-bottom: -6px; +} + +.tips { text-align: right !important; } diff --git a/src/input/_example/status/index.wxml b/src/input/_example/status/index.wxml index 03701d53e..436e8e771 100644 --- a/src/input/_example/status/index.wxml +++ b/src/input/_example/status/index.wxml @@ -1,3 +1,3 @@ - - + + diff --git a/src/input/_example/suffix/index.json b/src/input/_example/suffix/index.json index 1ca6b827d..21955803f 100644 --- a/src/input/_example/suffix/index.json +++ b/src/input/_example/suffix/index.json @@ -1,6 +1,7 @@ { "component": true, "usingComponents": { + "t-button": "tdesign-miniprogram/button/button", "t-input": "tdesign-miniprogram/input/input" } } diff --git a/src/input/_example/suffix/index.wxml b/src/input/_example/suffix/index.wxml index 7c854e6e5..d92ba346b 100644 --- a/src/input/_example/suffix/index.wxml +++ b/src/input/_example/suffix/index.wxml @@ -1 +1,7 @@ + + + 操作按钮 + + + diff --git a/src/input/_example/suffix/index.wxss b/src/input/_example/suffix/index.wxss index e69de29bb..18d6701c6 100644 --- a/src/input/_example/suffix/index.wxss +++ b/src/input/_example/suffix/index.wxss @@ -0,0 +1,6 @@ +.custom-button { + vertical-align: top; + font-size: 24rpx !important; + width: 144rpx !important; + height: 48rpx !important; +} diff --git a/src/input/input.less b/src/input/input.less index c39836417..13ef372e3 100644 --- a/src/input/input.less +++ b/src/input/input.less @@ -1,88 +1,96 @@ @import '../common/style/index.less'; -@input-text-color: @text-level-1-color; -@input-placeholder-text-color: @text-placeholder-color; -@input-disabled-text-color: @text-level-1-color; -@input-icon-color: @text-level-4-color; -@input-error-text-color: #e34d59; -@input-suffix-text-color: @text-level-1-color; -@input-border-color: #e7e7e7; -@input-label-color: #000; - -@input-font-size: 32rpx; -@input-icon-font-size: 32rpx; -@input-error-msg-font-size: @font-size-s; -@input-vertical-padding: 24rpx; -@input-medium-padding: 32rpx; -@input-small-padding: 24rpx; -@input-horizontal-padding: 32rpx; -@input-name-horizontal-margin: 32rpx; -@input-border-padding-left: 32rpx; -@input-suffix-text-padding-left: 24rpx; - -page { - --td-input-bg-color: @bg-color-block; - --td-input-text-color: @input-text-color; - --td-input-placeholder-text-color: @input-placeholder-text-color; - --td-input-error-msg-color: @input-placeholder-text-color; - --td-input-disabled-text-color: @input-disabled-text-color; - --td-input-label-color: @input-label-color; - --td-input-icon-color: @input-icon-color; - --td-input-error-text-color: @input-error-text-color; - --td-input-suffix-text-color: @input-suffix-text-color; - --td-input-border-color: @input-border-color; -} +@input-medium-vertical-padding: 32rpx; +@input-medium-horizontal-padding: 32rpx; +@input-small-vertical-padding: 24rpx; +@input-small-horizontal-padding: 32rpx; + +@input-default-border-color: var(--td-input-default-border-color, rgba(220, 220, 220, 1)); // 'default' 状态边框颜色 +@input-default-focus-border-color: var( + --td-input-default-focus-border-color, + @primary-color +); // 'default' 状态聚焦时边框颜色，其他状态聚焦与边框颜色保持一致 +@input-success-border-color: var(--td-input-success-border-color, @success-color); // 'success' 状态边框颜色 +@input-warning-border-color: var(--td-input-warning-border-color, @warning-color); // 'warning' 状态边框颜色 +@input-error-border-color: var(--td-input-error-border-color, @error-color); // 'error' 状态边框颜色 + +@input-default-text-color: var(--td-input-default-text-color, @font-gray-1); // 'default' 状态输入框文本颜色 +@input-success-text-color: var(--td-input-success-text-color, @success-color); // 'success' 状态输入框文本颜色 +@input-warning-text-color: var(--td-input-warning-text-color, @warning-color); // 'warning' 状态输入框文本颜色 +@input-error-text-color: var(--td-input-error-text-color, @error-color); // 'error' 状态输入框文本颜色 + +@input-default-tips-color: var(--td-input-default-tips-color, @font-gray-3); // 'default' 状态辅助文本颜色 +@input-success-tips-color: var(--td-input-success-tips-color, @success-color); // 'success' 状态辅助文本颜色 +@input-warning-tips-color: var(--td-input-warning-tips-color, @warning-color); // 'warning' 状态辅助文本颜色 +@input-error-tips-color: var(--td-input-error-tips-color, @error-color); // 'error' 状态辅助文本颜色 + +@input-bg-color: var(--td-input-bg-color, @bg-color-block); // 输入框背景颜色 +@input-placeholder-text-color: var(--td-input-placeholder-text-color, @text-color-placeholder); // 输入框占位符文本颜色 +@input-prefix-icon-color: var(--td-input-prefix-icon-color, @font-gray-1); // // 输入框前缀图标颜色 +@input-suffix-icon-color: var(--td-input-suffix-icon-color, @font-gray-3); // 输入框后缀图标颜色 +@input-label-text-color: var(--td-input-label-text-color, @font-gray-1); // 左侧文本颜色 +@input-suffix-text-color: var(--td-input-suffix-text-color, @font-gray-1); // 后置图标前的后置内容文本颜色 +@input-disabled-text-color: var(--td-input-disabled-text-color, @text-color-disabled); // 输入框禁用态文本颜色 +@input-border-radius: var(--td-input-border-radius, @radius-default); // 边框圆角大小 -.@{prefix}-input--bordered { - &::after { - .hairline-bottom(var(--td-input-border-color, @input-border-color )); - left: @input-border-padding-left; - } -} .@{prefix}-input { position: relative; display: flex; - padding: @input-vertical-padding @input-horizontal-padding; - background: var(--td-input-bg-color, @bg-color-block); - - &__label { - width: 164rpx; - color: var(--td-input-label-color, @input-label-color); - margin-right: @input-name-horizontal-margin; - flex: none; - } + background: @input-bg-color; - &__icon { - &-wrap, - &--prefix, - &--suffix { - display: flex; - align-items: center; + &--layout { + &-vertical { + flex-direction: column; } + } - &--prefix { - margin-right: 8rpx; + &__wrap--prefix { + display: flex; + padding-right: @spacer-2; + } + + &__icon--prefix { + color: @input-prefix-icon-color; + } + + &__label:not(:empty) { + min-width: 96rpx; + max-width: 162rpx; + font-size: @font-size-m; + line-height: 48rpx; + color: @input-label-text-color; + + .@{prefix}-input--layout-vertical & { + font-size: @font-size-base; + padding-bottom: (@spacer / 2); } } - &__content { - display: flex; - align-items: center; - width: 100%; - font-size: @input-font-size; + &__icon--prefix:not(:empty) + &__label:not(:empty) { + padding-left: (@spacer / 2); } &__wrap { display: flex; flex-wrap: wrap; flex: auto; + align-items: center; - &--suffix, - &--icon { + .@{prefix}-input__content { + display: flex; + align-items: center; + width: 100%; + line-height: 48rpx; + font-size: @font-size-m; + } + + &--clearable-icon, + &--suffix-icon, + &--suffix { flex: 0 0 auto; - margin-left: @spacer-1; - color: var(--td-input-icon-color, @input-icon-color); - font-size: @input-icon-font-size; + padding-left: @spacer-1; + color: @input-suffix-icon-color; + font-size: @font-size-m; &:empty { display: none; @@ -90,18 +98,19 @@ page { } &--suffix { - position: relative; - padding-left: @input-suffix-text-padding-left; - - &::after { - .hairline-left(); - } + color: @input-suffix-text-color; } + } - &--suffix-text { - position: relative; - padding-left: @input-suffix-text-padding-left; - color: var(--td-input-suffix-text-color, @input-suffix-text-color); + &__wrap--prefix, + &__icon--prefix, + &__label, + &__tips, + &__wrap--clearable-icon, + &__wrap--suffix-icon, + &__wrap--suffix { + &:empty { + display: none; } } @@ -112,7 +121,7 @@ page { min-width: 0; // for flex-shrink in field__button margin: 0; padding: 0; - color: var(--td-input-text-color, @input-text-color); + color: @input-default-text-color; line-height: inherit; text-align: left; background-color: transparent; @@ -120,12 +129,8 @@ page { resize: none; font-size: inherit; - &::placeholder { - color: var(--td-input-placeholder-text-color, @input-placeholder-text-color); - } - &--disabled { - color: var(--td-input-disabled-text-color, @input-disabled-text-color); + color: @input-disabled-text-color; cursor: not-allowed; opacity: 1; -webkit-text-fill-color: currentColor; // fix disabled color in iOS @@ -145,42 +150,57 @@ page { } &__placeholder { - color: var(--td-input-placeholder-text-color, @input-placeholder-text-color); + color: @input-placeholder-text-color; + font-size: @font-size-m; + } + + &__tips { + font-size: @font-size-s; + color: @input-default-tips-color; + line-height: 40rpx; + padding-top: (@spacer / 2); } } -.@{prefix}-input.@{prefix}-is-error { - align-items: flex-start; +.@{prefix}-is-border { + padding: 24rpx 32rpx; + border-radius: @input-border-radius; + border: 3rpx solid @input-default-border-color; +} - .@{prefix}-input { - &__control { - color: var(--td-input-error-text-color, @input-error-text-color); +&.@{prefix}-is-focus { + border-color: @input-default-focus-border-color; + box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.05), 0 4px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12); +} - &::placeholder { - color: var(--td-input-error-text-color, @input-error-text-color); - } +.input-status(@status) { + .@{prefix}-is-@{status} { + @borderColor: 'input-@{status}-border-color'; + @tipsColor: 'input-@{status}-tips-color'; + + &.@{prefix}-is-border { + border-color: @@borderColor; } - &__placeholder { - color: var(--td-input-error-text-color, @input-error-text-color); + &.@{prefix}-is-focus { + border-color: @@borderColor; } - &__error-msg { - text-align: left; - padding-top: @spacer-1; - font-size: @input-error-msg-font-size; - line-height: 1; - color: var(--td-input-error-msg-color, @input-placeholder-text-color); - width: 100%; + & + .@{prefix}-input__tips { + color: @@borderColor; } } } +// status +.input-status(success); +.input-status(warning); +.input-status(error); + +// size .@{prefix}-input--size-medium { - padding-top: @input-medium-padding; - padding-bottom: @input-medium-padding; + padding: @input-medium-vertical-padding @input-medium-horizontal-padding; } .@{prefix}-input--size-small { - padding-top: @input-small-padding; - padding-bottom: @input-small-padding; + padding: @input-small-vertical-padding @input-small-horizontal-padding; } diff --git a/src/input/input.ts b/src/input/input.ts index 8f7443248..a37849d47 100644 --- a/src/input/input.ts +++ b/src/input/input.ts @@ -22,13 +22,13 @@ export default class Input extends SuperComponent { externalClasses = [ `${prefix}-class`, - `${prefix}-class-icon`, + `${prefix}-class-prefix-icon`, `${prefix}-class-label`, `${prefix}-class-input`, `${prefix}-class-clearable`, `${prefix}-class-suffix`, `${prefix}-class-suffix-icon`, - `${prefix}-class-error-msg`, + `${prefix}-class-tips`, ]; behaviors = ['wx://form-field']; diff --git a/src/input/input.wxml b/src/input/input.wxml index 0bba8d63c..e231ab95a 100644 --- a/src/input/input.wxml +++ b/src/input/input.wxml @@ -1,19 +1,31 @@ - - - - - - - {{label}} + + + + + + + + {{label}} + - + - - - - - - - - {{suffix}} + + + + + {{suffix}} + - - + + + - {{errorMessage}} - + {{tips}} diff --git a/src/input/input.wxs b/src/input/input.wxs index 3d9b7d0b2..e3698125a 100644 --- a/src/input/input.wxs +++ b/src/input/input.wxs @@ -1,11 +1,8 @@ function getInputClass(classPrefix, suffix, align, disabled) { var className = [classPrefix + '__control']; - if (suffix || align === 'right') { - className.push(classPrefix + '__control--right'); - } - if (align === 'center') { - className.push(classPrefix + '__control--center'); + if (align) { + className.push(classPrefix + '__control--' + align); } if (disabled) { diff --git a/src/input/props.ts b/src/input/props.ts index 704d7d156..f9f2bd1df 100644 --- a/src/input/props.ts +++ b/src/input/props.ts @@ -11,8 +11,13 @@ const props: TdInputProps = { type: String, value: 'left', }, - /** 是否开启无边框模式 */ - borderless: { + /** 标题输入框布局方式 */ + layout: { + type: String, + value: 'horizontal', + }, + /** 是否显示外边框 */ + bordered: { type: Boolean, value: false, }, @@ -21,6 +26,11 @@ const props: TdInputProps = { type: Boolean, value: false, }, + /** 透传至组件清楚图标 icon */ + clearableIconProps: { + type: Object, + value: {}, + }, /** 自定义组件样式 */ customStyle: { type: String, @@ -65,6 +75,11 @@ const props: TdInputProps = { prefixIcon: { type: String, }, + /** 透传至组件前缀图标 prefix-icon */ + prefixIconProps: { + type: Object, + value: {}, + }, /** 只读状态 */ readonly: { type: Boolean, @@ -73,7 +88,7 @@ const props: TdInputProps = { /** 输入框尺寸 */ size: { type: String, - value: 'small', + value: 'medium', }, /** 输入框状态 */ status: { @@ -88,6 +103,11 @@ const props: TdInputProps = { suffixIcon: { type: String, }, + /** 透传至组件后缀图标 suffix-icon */ + suffixIconProps: { + type: Object, + value: {}, + }, /** 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */ tips: { type: String, diff --git a/src/input/type.ts b/src/input/type.ts index 2c6dbc036..9eae0a1f1 100644 --- a/src/input/type.ts +++ b/src/input/type.ts @@ -14,10 +14,17 @@ export interface TdInputProps { value?: 'left' | 'center' | 'right'; }; /** - * 【讨论中】是否开启无边框模式 + * 标题输入框布局方式 + * @default horizontal + */ + layout?: { + type: StringConstructor; + value?: 'horizontal' | 'vertical'; + }; + /** 是否显示外边框 * @default false */ - borderless?: { + bordered: { type: BooleanConstructor; value?: boolean; }; @@ -29,6 +36,11 @@ export interface TdInputProps { type: BooleanConstructor; value?: boolean; }; + /** 透传至组件清楚图标 icon */ + clearableIconProps: { + type: ObjectConstructor; + value?: object; + }; /** * 自定义组件样式 * @default '' @@ -103,6 +115,11 @@ export interface TdInputProps { type: StringConstructor; value?: string; }; + /** 透传至组件前缀图标 prefix-icon */ + prefixIconProps: { + type: ObjectConstructor; + value?: object; + }; /** * 只读状态 * @default false @@ -141,6 +158,11 @@ export interface TdInputProps { type: StringConstructor; value?: string; }; + /** 透传至组件后缀图标 suffix-icon */ + suffixIconProps: { + type: ObjectConstructor; + value?: object; + }; /** * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式 */