feat(inputNumber): inputNumber

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',

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;
  }

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

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>
+ );
+ }
+}

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} />;
+ }
+}

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>
+ );
+ }
+}

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>
+ );
+ }
+}

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>
+ );
+ }
+}

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)} />;
+ }
+}

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>
+ );
+ }
+}

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>
+ );
+ }
+}