feat(input): add input component and its examples (#78)

* feat(input): add input component and its examples

* feat(input): fix the name error

* Update input-group.tsx

fix name error

* Update input.tsx

fix name error

* feat(input): delete the anotation; delete clearable and password example

* feat(input): fix the bugs of the input component

* feat(input): unify the classnames

* feat(input): fix bugs

site/sidebar.config.ts

@@ -111,6 +111,12 @@ export default [
  name: 'Forms',
  type: 'component', // 组件文档
  children: [
+ {
+ title: 'Input 输入框',
+ name: 'input',
+ path: '/components/input',
+ component: () => import('tdesign-web-components/input/README.md'),
+ },
  {
  title: 'Select 选择器',
  name: 'select',

src/input/README.md

@@ -0,0 +1,82 @@
+---
+title: Input 输入框
+description: 用于承载用户信息录入的文本框，常用于表单、对话框等场景，对不同内容的信息录入，可拓展形成多种信息录入形式。
+isComponent: true
+usage: { title: "", description: "" }
+spline: form
+---
+
+### 基础输入框
+
+最基础的单行输入框，按状态可分为正常、禁用、错误、带额外提示。通常在需要输入少量内容（20 个字以内）的场景下使用。
+
+{{ base }}
+
+### 前后置标签输入框
+
+在输入框前后加入一些特定的纯展示标签，通常在需要提高辨识效率时使用。
+
+{{ addon }}
+
+### 组合输入框
+
+多个输入框相组合，或与其他控件（如下拉）相组合，以方便识别。用于一些固定组合或者固定格式输入的场景，如输入电话号码。
+
+{{ group }}
+
+### 可清空内容输入框
+
+带清空操作的输入框，可快捷清空输入过的内容。
+
+{{ clearable }}
+
+### 密码输入框
+
+由符号代替输入内容的输入框，并可通过操作展示原文信息。用于强安全信息输入的场景。
+
+{{ password }}
+
+### 不同状态的输入框
+
+输入框状态可分为：正常、禁用、异常（带提示）、带额外内容提示、带状态图标提示。
+
+{{ status }}
+
+### 不同尺寸的输入框
+
+有大中小三种不同高度、宽度的输入框，以适应不同尺寸布局。设置 `size = large | medium | small` 实现不同的尺寸。
+
+{{ size }}
+
+### 不同对齐方式的输入框
+
+输入框共有三种对齐方式：左对齐、局中对齐和右对齐。设置 `align = left | center | right` 实现不同的对齐方式。
+
+{{ align }}
+
+### 自适应宽度的输入框
+
+输入框支持宽度随输入内容变化而变化，设置属性 `autoWidth` 即可。
+
+{{ auto-width }}
+
+### 带长度限制的输入框
+
+- 使用 `maxlength` 设置输入框的长度限度，一个中文等于一个计数长度。
+- 使用 `maxcharacter` 设置输入框的长度限度，一个中文汉字表示两个字符长度。
+- 使用 `allowInputOverMax` 设置是否允许在输入内容已经超出限制时继续输入。
+- 使用 `showLimitNumber` 设置是否显示输入框右侧的字数统计。
+
+{{ max-length-count }}
+
+### 可格式化数据的输入框
+
+可以使用 `format` 设置输入框在失焦和聚焦时的不同内容呈现。
+
+{{ format }}
+
+### 无边框模式的输入框
+
+可以使用 `borderless` 来开启无边框模式。
+
+{{ borderless }}

src/input/_example/align.tsx

@@ -0,0 +1,18 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputAlign extends Component {
+ inputValue = '';
+
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: '100%' }}>
+ <t-input defaultValue="居左对齐" align="left" />
+ <t-input defaultValue="居中对齐" align="center" />
+ <t-input defaultValue="居右对齐" align="right" />
+ </t-space>
+ );
+ }
+}

src/input/_example/auto-width.tsx

@@ -0,0 +1,21 @@
+import 'tdesign-web-components/input';
+
+import { Component } from 'omi';
+
+export default class InputAutowidth extends Component {
+ inputValue = 'Hello TDesign';
+
+ render() {
+ return (
+ <div>
+ <t-input
+ autoWidth
+ defaultValue="宽度自适应"
+ onChange={(value) => {
+ this.inputValue = value;
+ }}
+ />
+ </div>
+ );
+ }
+}

src/input/_example/base.tsx

@@ -0,0 +1,35 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputBase extends Component {
+ value1 = '';
+
+ value2 = 'Welcome to TDesign';
+
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: 500 }}>
+ <t-input
+ placeholder="请输入内容（无默认值）"
+ onChange={(value) => {
+ this.value1 = value;
+ console.log(value);
+ }}
+ />
+ <t-input
+ value={this.value2}
+ placeholder="请输入内容（有默认值）"
+ onChange={(value) => {
+ console.log(value);
+ this.value2 = value;
+ }}
+ onEnter={(value) => {
+ console.log(value);
+ }}
+ />
+ </t-space>
+ );
+ }
+}

src/input/_example/borderless.tsx

@@ -0,0 +1,36 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputBase extends Component {
+ value1 = '';
+
+ value2 = 'Welcome to TDesign';
+
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: 500 }}>
+ <t-input
+ placeholder="请输入内容（无默认值）"
+ onChange={(value) => {
+ this.value1 = value;
+ console.log(value);
+ }}
+ />
+ <t-input
+ value={this.value2}
+ placeholder="请输入内容（无边框）"
+ onChange={(value) => {
+ console.log(value);
+ this.value2 = value;
+ }}
+ onEnter={(value) => {
+ console.log(value);
+ }}
+ borderless={true}
+ />
+ </t-space>
+ );
+ }
+}

src/input/_example/format.tsx

@@ -0,0 +1,31 @@
+import 'tdesign-web-components/input';
+
+import { Component } from 'omi';
+
+export default class InputForMat extends Component {
+ inputValue = '';
+
+ render() {
+ function format(val) {
+ const reg = /(\d)(?=(?:\d{3})+$)/g;
+ const str = val.replace(reg, '$1,');
+ return str;
+ }
+
+ const inputStatus = isNaN(+this.inputValue) ? 'error' : '';
+ const tips = inputStatus ? '请输入数字' : '';
+
+ return (
+ <t-input
+ placeholder="请输入数字"
+ value={this.inputValue}
+ onChange={(value) => {
+ this.inputValue = value;
+ }}
+ status={inputStatus}
+ format={format}
+ tips={tips}
+ />
+ );
+ }
+}

src/input/_example/group.tsx

@@ -0,0 +1,28 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputGroup extends Component {
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: '100%' }}>
+ <t-input-group separate>
+ <t-input defaultValue="0731" style={{ width: 100 }} />
+ <t-input defaultValue="12345677" />
+ </t-input-group>
+ <t-input-group separate style={{ width: '100%' }}>
+ <t-input />
+ <t-input />
+ </t-input-group>
+ <t-input-group separate>
+ <t-input style={{ width: 100 }} defaultValue="0731" />
+ <span style={{ lineHeight: '32px' }}>&nbsp;-&nbsp;</span>
+ <t-input style={{ width: 100 }} defaultValue="12345" />
+ <t-input style={{ width: 100 }} defaultValue="678901" />
+ <t-input style={{ width: 100 }} />
+ </t-input-group>
+ </t-space>
+ );
+ }
+}

src/input/_example/max-length-count.tsx

@@ -0,0 +1,74 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputLenlimit extends Component {
+ value1 = '';
+
+ value2 = '';
+
+ value3 = '';
+
+ value4 = '';
+
+ tips = '';
+
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: '100%' }}>
+ <t-input
+ value={this.value1}
+ onChange={(value) => {
+ this.value1 = value;
+ this.update();
+ }}
+ maxlength={5}
+ showLimitNumber
+ placeholder="内置字数限制，最大文本长度，一个中文字等于一个长度"
+ />
+
+ <t-input
+ value={this.value2}
+ onChange={(value) => {
+ this.value2 = value;
+ this.update();
+ }}
+ maxcharacter={10}
+ showLimitNumber
+ placeholder="内置字数限制，最大字符数量限制，一个中文字等于两个字符"
+ />
+
+ <t-input
+ value={this.value3}
+ onChange={(value) => {
+ this.value3 = value;
+ this.update();
+ }}
+ maxlength={5}
+ allowInputOverMax
+ showLimitNumber
+ placeholder="内置字数限制，字数超出时允许继续输入"
+ tips={this.tips}
+ status={this.tips ? 'error' : 'default'}
+ onValidate={({ error }) => {
+ console.log(error);
+ this.tips = error ? '输入内容长度不允许超过 5 个字' : '';
+ this.update();
+ }}
+ />
+
+ <t-input
+ value={this.value4}
+ onChange={(value) => {
+ this.value4 = value;
+ this.update();
+ }}
+ maxlength={5}
+ suffix={`${this.value4.length}/5`}
+ placeholder="自定义字数限制文本"
+ />
+ </t-space>
+ );
+ }
+}

src/input/_example/size.tsx

@@ -0,0 +1,41 @@
+import 'tdesign-web-components/input';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputSize extends Component {
+ inputValue = '';
+
+ render() {
+ return (
+ <t-space direction="vertical" style={{ width: 500 }}>
+ <t-input
+ placeholder="请输入内容"
+ value={this.inputValue}
+ onChange={(value) => {
+ this.inputValue = value;
+ this.update();
+ }}
+ size="small"
+ />
+ <t-input
+ placeholder="请输入内容"
+ value={this.inputValue}
+ onChange={(value) => {
+ this.inputValue = value;
+ this.update();
+ }}
+ />
+ <t-input
+ placeholder="请输入内容"
+ value={this.inputValue}
+ onChange={(value) => {
+ this.inputValue = value;
+ this.update();
+ }}
+ size="large"
+ />
+ </t-space>
+ );
+ }
+}