Merge pull request #148 from ming680/feature/input-number

feat(inputNumber): inputNumber
TDesignOteam · Sep 25, 2024 · 3e48d3a · 3e48d3a
2 parents 6415f4a + dd110ea
commit 3e48d3a
Show file tree

Hide file tree

Showing 15 changed files with 1,054 additions and 11 deletions.
diff --git a/site/sidebar.config.ts b/site/sidebar.config.ts
@@ -148,6 +148,12 @@ export default [
         path: '/components/input',
         component: () => import('tdesign-web-components/input/README.md'),
       },
+      {
+        title: 'InputNumber 数字输入框',
+        name: 'input-number',
+        path: '/components/input-number',
+        component: () => import('tdesign-web-components/input-number/README.md'),
+      },
       {
         title: 'RangeInput 范围输入框',
         name: 'range-input',

diff --git a/src/_util/lightDom.ts b/src/_util/lightDom.ts
@@ -65,7 +65,7 @@ const buildLightDomCtor = (nodeCtor: ComponentConstructor) => {
 
       const cssList = getCssList(nodeCtor.css);
       cssList.forEach((style) => {
-        const preStyleSheet = parentElement.adoptedStyleSheets.find((item) => (item as any).styleStr === style);
+        const preStyleSheet = parentElement.adoptedStyleSheets?.find((item) => (item as any).styleStr === style);
         if (preStyleSheet) {
           return;
         }

diff --git a/src/input-number/README.md b/src/input-number/README.md
@@ -0,0 +1,99 @@
+---
+title: InputNumber 数字输入框
+description: 数字输入框由增加、减少按钮、数值输入组成。每次点击增加按钮（或减少按钮），数字增长（或减少）的量是恒定的。
+isComponent: true
+usage: { title: '', description: '' }
+spline: form
+---
+
+### 双侧调整的数字输入框
+
+已输入的值居中展示，用户可直接在输入框内修改数值，还可以使用输入框左右的箭头按钮增大或减小数值。
+
+{{ center }}
+
+### 右侧调整数值的数字输入框
+
+已输入的值居左展示，用户可直接在输入框内修改数值，还可以使用输入框右侧的箭头按钮增大或减小数值。
+
+{{ left }}
+
+### 无按钮的数字输入框
+
+仅有输入框，不能用按钮进行数值调整的数字输入框。
+
+{{ normal }}
+
+### 带小数的数字输入框
+
+可以通过 `decimalPlaces` 来设置小数保留精度，通过 `step` 来设置步进。
+
+{{ step }}
+
+### 可格式化的数字输入框
+
+通过 `format` 属性格式化数值内容。
+
+{{ format }}
+
+### 不同尺寸的数字输入框
+
+提供 大、中（默认）、小 3 种数字输入框。
+
+{{ size }}
+
+### 不同状态的数字输入框
+
+除了禁用 `disabled` 和只读 `readonly` 状态之外，提供 正常（默认）、成功 `success`、警告 `warning`、错误 `error` 4 种状态的输入框设置。
+
+{{ status }}
+
+### 不同对齐方式的输入框
+
+{{ align }}
+
+### 自适应宽度的输入框
+
+{{ auto-width }}
+
+### 大数字输入框
+
+{{ large-number }}
+
+
+## API
+### InputNumber Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式 | N
+align | String | - | 文本内容位置，居左/居中/居右。可选项：left/center/right | N
+allowInputOverLimit | Boolean | true | 是否允许输入超过 `max` `min` 范围外的数字。为保障用户体验，仅在失去焦点时进行数字范围矫正。默认允许超出，数字超出范围时，输入框变红提醒 | N
+autoWidth | Boolean | false | 宽度随内容自适应 | N
+decimalPlaces | Number | undefined | [小数位数](https://en.wiktionary.org/wiki/decimal_place) | N
+disabled | Boolean | - | 禁用组件 | N
+format | Function | - | 格式化输入框展示值。第二个事件参数 `context.fixedNumber` 表示处理过小数位数 `decimalPlaces` 的数字。TS 类型：`(value: InputNumberValue, context?: { fixedNumber?: InputNumberValue }) => InputNumberValue` | N
+inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/input-number/type.ts) | N
+label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+largeNumber | Boolean | false | 是否作为大数使用。JS 支持的最大数字位数是 16 位，超过 16 位的数字需作为字符串大数处理。此时，数据类型必须保持为字符串，否则会丢失数据 | N
+max | String / Number | Infinity | 最大值。如果是大数，请传入字符串。TS 类型：`InputNumberValue` | N
+min | String / Number | -Infinity | 最小值。如果是大数，请传入字符串。TS 类型：`InputNumberValue` | N
+placeholder | String | undefined | 占位符 | N
+readonly | Boolean | false | 只读状态 | N
+size | String | medium | 组件尺寸。可选项：small/medium/large | N
+status | String | default | 文本框状态。可选项：default/success/warning/error | N
+step | String / Number | 1 | 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串。TS 类型：`InputNumberValue` | N
+suffix | TNode | - | 后置内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+theme | String | row | 按钮布局。可选项：column/row/normal | N
+tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/common.ts) | N
+value | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/input-number/type.ts) | N
+defaultValue | String / Number | - | 数字输入框的值。当值为 '' 时，输入框显示为空。非受控属性。TS 类型：`T` `type InputNumberValue = number \| string`。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/input-number/type.ts) | N
+onBlur | Function |  | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>失去焦点时触发 | N
+onChange | Function |  | TS 类型：`(value: T, context: ChangeContext) => void`<br/>值变化时触发，`type` 表示触发本次变化的来源。[详细类型定义](https://github.com/TDesignOteam/tdesign-web-components/tree/main/src/input-number/type.ts)。<br/>`interface ChangeContext { type: ChangeSource; e: InputEvent \| MouseEvent \| FocusEvent \| KeyboardEvent \| CompositionEvent }`<br/><br/>`type ChangeSource = 'add' \| 'reduce' \| 'input' \| 'blur' \| 'enter' \| 'clear' \| 'props'`<br/> | N
+onEnter | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>回车键按下时触发 | N
+onFocus | Function |  | TS 类型：`(value: InputNumberValue, context: { e: FocusEvent }) => void`<br/>获取焦点时触发 | N
+onKeydown | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>键盘按下时触发 | N
+onKeypress | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>按下字符键时触发（keydown -> keypress -> keyup） | N
+onKeyup | Function |  | TS 类型：`(value: InputNumberValue, context: { e: KeyboardEvent }) => void`<br/>释放键盘时触发 | N
+onValidate | Function |  | TS 类型：`(context: { error?: 'exceed-maximum' \| 'below-minimum' }) => void`<br/>最大值或最小值校验结束后触发，`exceed-maximum` 表示超出最大值，`below-minimum` 表示小于最小值 | N
diff --git a/src/input-number/_example/align.tsx b/src/input-number/_example/align.tsx
@@ -0,0 +1,24 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputNumberAlignDemo extends Component {
+  render() {
+    return (
+      <t-space>
+        <t-space direction="vertical">
+          <t-input-number align="left" defaultValue={100} />
+          <t-input-number align="center" defaultValue={200} />
+          <t-input-number align="right" defaultValue={300} />
+        </t-space>
+
+        <t-space direction="vertical">
+          <t-input-number align="left" theme="normal" defaultValue={100} />
+          <t-input-number align="center" theme="normal" defaultValue={200} />
+          <t-input-number align="right" theme="normal" defaultValue={300} />
+        </t-space>
+      </t-space>
+    );
+  }
+}
diff --git a/src/input-number/_example/auto-width.tsx b/src/input-number/_example/auto-width.tsx
@@ -0,0 +1,9 @@
+import 'tdesign-web-components/input-number';
+
+import { Component } from 'omi';
+
+export default class InputNumberAutoWidthDemo extends Component {
+  render() {
+    return <t-input-number autoWidth min={-5} defaultValue={1} />;
+  }
+}
diff --git a/src/input-number/_example/center.tsx b/src/input-number/_example/center.tsx
@@ -0,0 +1,85 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+export default class InputNumberCenterDemo extends Component {
+  value1 = signal('');
+
+  value2 = signal(100);
+
+  decimalValue = signal(3.41);
+
+  error = signal(undefined);
+
+  get tips() {
+    if (this.error.value === 'exceed-maximum') {
+      return 'number can not be exceed maximum';
+    }
+    if (this.error.value === 'below-minimum') {
+      return 'number can not be below minimum';
+    }
+    return undefined;
+  }
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <t-input-number
+          value={this.decimalValue.value}
+          onChange={(value) => {
+            this.decimalValue.value = value;
+          }}
+          max={5}
+          autoWidth
+        />
+
+        <t-input-number
+          value={this.value1.value}
+          onChange={(value) => {
+            console.log('onchange', value);
+            this.value1.value = value;
+          }}
+          step={0.18}
+          max={5}
+          allowInputOverLimit={false}
+          style={{ width: 250 }}
+        />
+
+        <t-input-number
+          value={this.value2.value}
+          onChange={(value, ctx) => {
+            this.value2.value = value;
+            console.info('change', value, ctx);
+          }}
+          max={15}
+          min={-2}
+          inputProps={{ tips: this.tips }}
+          suffix="个"
+          style={{ width: 300 }}
+          onValidate={({ error }) => {
+            this.error.value = error;
+          }}
+          onBlur={(v, ctx) => {
+            console.log('blur', v, ctx);
+          }}
+          onFocus={(v, ctx) => {
+            console.log('focus', v, ctx);
+          }}
+          onEnter={(v, ctx) => {
+            console.log('enter', v, ctx);
+          }}
+          onKeydown={(v, ctx) => {
+            console.info('keydown', v, ctx);
+          }}
+          onKeyup={(v, ctx) => {
+            console.info('keyup', v, ctx);
+          }}
+          onKeypress={(v, ctx) => {
+            console.info('keypress', v, ctx);
+          }}
+        />
+      </t-space>
+    );
+  }
+}
diff --git a/src/input-number/_example/format.tsx b/src/input-number/_example/format.tsx
@@ -0,0 +1,38 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component, signal } from 'omi';
+
+export default class InputNumberFormatDemo extends Component {
+  value = signal(0);
+
+  value1 = signal(0);
+
+  render() {
+    return (
+      <t-space direction="vertical">
+        <t-input-number
+          value={this.value.value}
+          onChange={(value) => {
+            this.value.value = value;
+          }}
+          max={15}
+          min={-12}
+          step={1.2}
+          format={(value) => `${value} %`}
+          style={{ width: 250 }}
+        />
+
+        <t-input-number
+          decimalPlaces={2}
+          format={(_, { fixedNumber }) => `${fixedNumber} %`}
+          value={this.value1.value}
+          onChange={(value) => {
+            this.value1.value = value;
+          }}
+          style={{ width: 250 }}
+        />
+      </t-space>
+    );
+  }
+}
diff --git a/src/input-number/_example/large-number.tsx b/src/input-number/_example/large-number.tsx
@@ -0,0 +1,22 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputNumberCenterDemo extends Component {
+  render() {
+    return (
+      <t-space direction="vertical">
+        <t-input-number
+          defaultValue={'19999999999999999'}
+          largeNumber
+          decimalPlaces={2}
+          step={1}
+          style={{ width: '350px' }}
+        />
+
+        <t-input-number defaultValue={'0.8975527383412673418'} largeNumber step={0.888} style={{ width: '350px' }} />
+      </t-space>
+    );
+  }
+}
diff --git a/src/input-number/_example/left.tsx b/src/input-number/_example/left.tsx
@@ -0,0 +1,9 @@
+import 'tdesign-web-components/input-number';
+
+import { Component } from 'omi';
+
+export default class InputNumberLeftDemo extends Component {
+  render() {
+    return <t-input-number defaultValue={5} theme="column" onChange={(v) => console.log(v)} />;
+  }
+}
diff --git a/src/input-number/_example/normal.tsx b/src/input-number/_example/normal.tsx
@@ -0,0 +1,25 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputNumberNormalDemo extends Component {
+  render() {
+    return (
+      <t-space direction="vertical">
+        <t-input-number defaultValue={10} onChange={console.log} theme="normal" max={15} min={-2} />
+
+        <t-input-number theme="normal" align="right" label="机器：" suffix="台" />
+
+        <t-input-number
+          theme="normal"
+          align="right"
+          defaultValue={10}
+          onChange={console.log}
+          label={<span>金额：</span>}
+          suffix={<span>元</span>}
+        />
+      </t-space>
+    );
+  }
+}
diff --git a/src/input-number/_example/size.tsx b/src/input-number/_example/size.tsx
@@ -0,0 +1,30 @@
+import 'tdesign-web-components/input-number';
+import 'tdesign-web-components/space';
+
+import { Component } from 'omi';
+
+export default class InputNumberSizeDemo extends Component {
+  render() {
+    return (
+      <t-space>
+        <t-space direction="vertical">
+          <t-input-number size="small" max={15} min={-12} defaultValue={3} />
+          <t-input-number max={15} min={-12} defaultValue={6} />
+          <t-input-number size="large" max={15} min={-12} defaultValue={9} />
+        </t-space>
+
+        <t-space direction="vertical">
+          <t-input-number defaultValue={5} size="small" theme="column" onChange={console.log} />
+          <t-input-number defaultValue={5} theme="column" onChange={console.log} />
+          <t-input-number defaultValue={10} size="large" theme="column" onChange={console.log} />
+        </t-space>
+
+        <t-space direction="vertical">
+          <t-input-number defaultValue={5} size="small" theme="normal" onChange={console.log} />
+          <t-input-number defaultValue={5} theme="normal" onChange={console.log} />
+          <t-input-number defaultValue={10} size="large" theme="normal" onChange={console.log} />
+        </t-space>
+      </t-space>
+    );
+  }
+}