feat(Input): enrich attributes

Tencent · Nov 28, 2022 · 9e65166 · 9e65166
1 parent b0a059e
commit 9e65166
Show file tree

Hide file tree

Showing 39 changed files with 556 additions and 287 deletions.
diff --git 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
@@ -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
@@ -24,11 +24,70 @@ exports[`Input Input base demo works fine 1`] = `
   <t-input
     label="标签文字"
     placeholder="请输入文字"
-    value=""
+  />
+  <t-input
+    placeholder="请输入文字"
+  >
+    <wx-text
+      slot="label"
+    >
+      标签文字
+      <wx-text
+        style="color: #e34d59"
+      >
+         *
+      </wx-text>
+    </wx-text>
+  </t-input>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字(选填)"
+  />
+  <t-input
+    placeholder="请输入文字"
+  />
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    tips="辅助说明"
+  />
+  <t-input
+    label="标签超长时自动换行"
+    placeholder="请输入文字"
+  />
+  <t-input
+    disabled="{{true}}"
+    value="不可编辑文字"
   />
 </base>
 `;
 
+exports[`Input Input bordered demo works fine 1`] = `
+<bordered>
+  <t-input
+    bordered="{{true}}"
+    placeholder="请输入文字"
+  />
+  <t-input
+    bordered="{{true}}"
+    placeholder="请输入文字"
+    status="success"
+  />
+  <t-input
+    bordered="{{true}}"
+    placeholder="请输入文字"
+    status="warning"
+  />
+  <t-input
+    bordered="{{true}}"
+    placeholder="请输入文字"
+    status="error"
+    suffixIcon="error-circle-filled"
+    tips="错误提示文字"
+  />
+</bordered>
+`;
+
 exports[`Input Input custom demo works fine 1`] = `
 <custom>
   <wx-view
@@ -37,12 +96,31 @@ exports[`Input Input custom demo works fine 1`] = `
     <t-input
       label="标签文字"
       placeholder="请输入文字"
-      value=""
+    />
+  </wx-view>
+  <wx-view
+    class="margin"
+  >
+    <t-input
+      customStyle="border-radius: 12rpx;"
+      label="标签文字"
+      placeholder="请输入文字"
     />
   </wx-view>
 </custom>
 `;
 
+exports[`Input Input layout demo works fine 1`] = `
+<layout>
+  <t-input
+    label="标签文字"
+    layout="vertical"
+    placeholder="请输入文字"
+    suffixIcon="error-circle-filled"
+  />
+</layout>
+`;
+
 exports[`Input Input maxlength demo works fine 1`] = `
 <maxlength>
   <t-input
@@ -56,40 +134,30 @@ exports[`Input Input maxlength demo works fine 1`] = `
 </maxlength>
 `;
 
-exports[`Input Input require demo works fine 1`] = `
-<require>
+exports[`Input Input prefix demo works fine 1`] = `
+<prefix>
   <t-input
-    label="slot"
+    label="标签文字"
     placeholder="请输入文字"
-  >
-    <wx-text
-      slot="label"
-    >
-      标签文字
-      <wx-text
-        style="color: #e34d59"
-      >
-         *
-      </wx-text>
-    </wx-text>
-  </t-input>
+    prefixIcon="app"
+  />
   <t-input
-    label="标签文字"
-    placeholder="请输入文字(选填)"
+    placeholder="请输入文字"
+    prefixIcon="app"
   />
-</require>
+</prefix>
 `;
 
 exports[`Input Input size demo works fine 1`] = `
 <size>
   <t-input
     label="小规格H48"
     placeholder="请输入文字"
+    size="small"
   />
   <t-input
     label="中规格H56"
     placeholder="请输入文字"
-    size="medium"
   />
 </size>
 `;
@@ -104,42 +172,56 @@ exports[`Input Input special demo works fine 1`] = `
   />
   <t-input
     label="验证码"
-    placeholder="请输入验证码"
+    placeholder="输入验证码"
   >
     <wx-view
+      class="suffix"
       slot="suffix"
     >
+      <wx-view
+        class="suffix--line"
+      />
       <wx-image
+        class="image"
         mode="heightFix"
         src="https://wwcdn.weixin.qq.com/node/wework/images/202010241547.ac6876be9c.png"
-        style="width: 72px; height: 36px; display: block; margin-top: -6px; margin-bottom: -6px"
       />
     </wx-view>
   </t-input>
   <t-input
-    errorMessage=""
-    placeholder="请输入手机号码"
+    label="手机号"
+    placeholder="输入手机号码"
+    tips=""
     type="number"
     value="17600600600"
     bind:change="onPhoneInput"
   >
     <wx-view
-      class="verify"
       slot="suffix"
+      style="display: flex; align-items: center"
     >
-       发送验证码 
+      <wx-view
+        class="suffix--line"
+      />
+      <wx-view
+        class="verify"
+      >
+         发送验证码 
+      </wx-view>
     </wx-view>
   </t-input>
   <t-input
-    errorMessage=""
+    align="right"
     label="价格"
     placeholder="0.00"
     suffix="元"
-    tClassErrorMsg="error-msg"
+    tClassTips="tips"
+    tips=""
     value="10.2"
     bind:change="onPriceInput"
   />
   <t-input
+    align="right"
     label="数量"
     placeholder="填写个数"
     suffix="个"
@@ -153,13 +235,10 @@ exports[`Input Input status demo works fine 1`] = `
   <t-input
     label="标签文字"
     placeholder="请输入文字"
+    status="error"
+    tips="辅助说明"
     value="已输入文字"
   />
-  <t-input
-    errorMessage="提示信息"
-    label="标签文字"
-    value="一段错误填写的内容"
-  />
   <t-input
     disabled="{{true}}"
     label="标签文字"
@@ -175,5 +254,21 @@ exports[`Input Input suffix demo works fine 1`] = `
     placeholder="请输入文字"
     suffixIcon="error-circle-filled"
   />
+  <t-input
+    placeholder="请输入手机号码"
+  >
+    <t-button
+      slot="suffix"
+      tClass="custom-button"
+      theme="primary"
+    >
+       操作按钮 
+    </t-button>
+  </t-input>
+  <t-input
+    label="标签文字"
+    placeholder="请输入文字"
+    suffixIcon="user-avatar"
+  />
 </suffix>
 `;