feat(inputNumber): v14 multi-platform adaption

src/packages/inputnumber/demos/h5/demo9.tsx

@@ -12,9 +12,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={1000}
-            min={10}
-            max={15020}
+            defaultValue={5}
+            min={1}
+            max={10}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -25,9 +25,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={100}
+            defaultValue={5}
             min={0}
-            max={100}
+            max={10}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>

src/packages/inputnumber/demos/taro/demo9.tsx

@@ -14,9 +14,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={1000}
-            min={10}
-            max={15020}
+            defaultValue={5}
+            min={1}
+            max={10}
             formatter={(value) =>
               `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
             }
@@ -27,9 +27,9 @@ const Demo9 = () => {
         <ConfigProvider theme={customTheme3}>
           <InputNumber
             className="format-width"
-            defaultValue={100}
+            defaultValue={1}
             min={0}
-            max={100}
+            max={10}
             formatter={(value) => `${value}%`}
           />
         </ConfigProvider>

src/packages/inputnumber/doc.en-US.md

@@ -139,17 +139,15 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default Value |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | The width of the input in the number input box | `40px` |
-| \--nutui-inputnumber-input-height | The height of the input in the number input box | `24px` |
+| \--nutui-inputnumber-input-height | The height of the input in the number input box | `20px` |
 | \--nutui-inputnumber-input-background-color | The background color of the input in the number input box | `$color-background` |
 | \--nutui-inputnumber-input-font-color | The font size color of the input in the number input box | `$color-title` |
-| \--nutui-inputnumber-input-font-size | The font size of the input in the number input box | `14px` |
+| \--nutui-inputnumber-input-font-size | The font size of the input in the number input box | `12px` |
 | \--nutui-inputnumber-input-border | The border value of the input in the number input box | `0` |
-| \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `6px` |
-| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `0` |
-| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `14px` |
-| \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `16px` |
-| \--nutui-inputnumber-button-border-radius | The rounded corners of the left and right buttons of the number input box | `30px` |
+| \--nutui-inputnumber-input-border-radius | The rounded corners of the input in the number input box | `4px` |
+| \--nutui-inputnumber-input-margin | The rounded corners of the input in the number input box | `2px` |
+| \--nutui-inputnumber-button-width | The width of the left and right buttons of the number input box | `20px` |
+| \--nutui-inputnumber-button-height | The height of the left and right buttons of the number input box | `20px` |
 | \--nutui-inputnumber-button-background-color | The background color of the left and right buttons of the number input box | `transparent` |
 | \--nutui-inputnumber-icon-color | The color of the icon in the number input box | `$color-text` |
 | \--nutui-inputnumber-icon-size | The size of the icon in the number input box | `8px` |

src/packages/inputnumber/doc.md

@@ -139,17 +139,15 @@ import { InputNumber } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `40px` |
-| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `24px` |
+| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
 | \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
 | \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
-| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `14px` |
+| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
 | \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
-| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
-| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
-| \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
+| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
+| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
 | \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
 | \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
 | \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |

src/packages/inputnumber/doc.taro.md

@@ -1,148 +1,146 @@
-# InputNumber 数字输入框
-
-通过点击按钮控制数字增减。
-
-## 引入
-
-```tsx
-import { InputNumber } from '@nutui/nutui-react-taro'
-```
-
-## 示例代码
-
-### 基础用法
-
-初始化一个默认值
-
-:::demo
-
-<CodeBlock src='taro/demo1.tsx'></CodeBlock>
-
-:::
-
-### 步长设置
-
-设置步长 `step` 5
-
-:::demo
-
-<CodeBlock src='taro/demo2.tsx'></CodeBlock>
-
-:::
-
-### 限制输入范围
-
-`min` 和 `max` 属性分别表示最小值和最大值
-
-:::demo
-
-<CodeBlock src='taro/demo3.tsx'></CodeBlock>
-
-:::
-
-### 禁用状态
-
-`disabled` 禁用状态下无法点击按钮或修改输入框。
-
-:::demo
-
-<CodeBlock src='taro/demo4.tsx'></CodeBlock>
-
-:::
-
-### 只读禁用输入框
-
-`readOnly` 设置只读禁用输入框输入行为
-
-:::demo
-
-<CodeBlock src='taro/demo5.tsx'></CodeBlock>
-
-:::
-
-### 设置按钮样式
-
-可使用`ConfigProvider`组件来设置按钮样式。
-
-:::demo
-
-<CodeBlock src='taro/demo6.tsx'></CodeBlock>
-
-:::
-
-### 支持小数点
-
-设置步长 `step` 0.1 `decimal-places` 小数保留1位
-
-:::demo
-
-<CodeBlock src='taro/demo7.tsx'></CodeBlock>
-
-:::
-
-### 支持异步修改
-
-通过 `change` 事件和 `model-value` 进行异步修改
-
-:::demo
-
-<CodeBlock src='taro/demo8.tsx'></CodeBlock>
-
-:::
-
-### 支持formatter
-
-:::demo
-
-<CodeBlock src='taro/demo9.tsx'></CodeBlock>
-
-:::
-
-## InputNumber
-
-### Props
-
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| allowEmpty | 是否允许内容为空 | `boolean` | `false` |
-| defaultValue | 默认值 | `string` \| `number` | `0` |
-| value | 当前值，受控值 | `string` \| `number` | `-` |
-| min | 最小值限制 | `string` \| `number` | `1` |
-| max | 最大值限制 | `string` \| `number` | `9999` |
-| type | input 的类型 | `digit` \| `number` | `digit` |
-| step | 步长 | `string` \| `number` | `1` |
-| digits | 设置保留的小数位 | `string` \| `number` | `0` |
-| disabled | 禁用所有功能 | `boolean` | `false` |
-| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
-| async | 支持异步修改 | `boolean` | `false` |
-| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
-| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
-| onChange | 值改变时触发 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
-| onFocus | 输入框获得焦点时触发 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
-| onBlur | 输入框失去焦点时触发 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
-
-## 主题定制
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
-
-| 名称 | 说明 | 默认值 |
-| --- | --- | --- |
-| \--nutui-inputnumber-input-width | 数字输入框中input的宽度 | `40px` |
-| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `24px` |
-| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
-| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
-| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `14px` |
-| \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
-| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `6px` |
-| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `0` |
-| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `14px` |
-| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `16px` |
-| \--nutui-inputnumber-button-border-radius | 数字输入框左右按钮的圆角 | `30px` |
-| \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
-| \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
-| \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |
-| \--nutui-inputnumber-disabled-color | 数字输入框禁用色 | `$color-text-disabled` |
+# InputNumber 数字输入框
+
+通过点击按钮控制数字增减。
+
+## 引入
+
+```tsx
+import { InputNumber } from '@nutui/nutui-react-taro'
+```
+
+## 示例代码
+
+### 基础用法
+
+初始化一个默认值
+
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
+
+:::
+
+### 步长设置
+
+设置步长 `step` 5
+
+:::demo
+
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
+
+:::
+
+### 限制输入范围
+
+`min` 和 `max` 属性分别表示最小值和最大值
+
+:::demo
+
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
+
+:::
+
+### 禁用状态
+
+`disabled` 禁用状态下无法点击按钮或修改输入框。
+
+:::demo
+
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
+
+:::
+
+### 只读禁用输入框
+
+`readOnly` 设置只读禁用输入框输入行为
+
+:::demo
+
+<CodeBlock src='taro/demo5.tsx'></CodeBlock>
+
+:::
+
+### 设置按钮样式
+
+可使用`ConfigProvider`组件来设置按钮样式。
+
+:::demo
+
+<CodeBlock src='taro/demo6.tsx'></CodeBlock>
+
+:::
+
+### 支持小数点
+
+设置步长 `step` 0.1 `decimal-places` 小数保留1位
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
+### 支持异步修改
+
+通过 `change` 事件和 `model-value` 进行异步修改
+
+:::demo
+
+<CodeBlock src='taro/demo8.tsx'></CodeBlock>
+
+:::
+
+### 支持formatter
+
+:::demo
+
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
+
+:::
+
+## InputNumber
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| allowEmpty | 是否允许内容为空 | `boolean` | `false` |
+| defaultValue | 默认值 | `string` \| `number` | `0` |
+| value | 当前值，受控值 | `string` \| `number` | `-` |
+| min | 最小值限制 | `string` \| `number` | `1` |
+| max | 最大值限制 | `string` \| `number` | `9999` |
+| type | input 的类型 | `digit` \| `number` | `digit` |
+| step | 步长 | `string` \| `number` | `1` |
+| digits | 设置保留的小数位 | `string` \| `number` | `0` |
+| disabled | 禁用所有功能 | `boolean` | `false` |
+| readOnly | 只读状态禁用输入框操作行为 | `boolean` | `false` |
+| async | 支持异步修改 | `boolean` | `false` |
+| formatter | 指定输入框展示值的格式 | `function(value: number \| string): string` | `-` |
+| onPlus | 点击增加按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onMinus | 点击减少按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onOverlimit | 点击不可用的按钮时触发 | `(e: MouseEvent) => void` | `-` |
+| onChange | 值改变时触发 | `(param: string \| number, e: MouseEvent \| ChangeEvent<HTMLInputElement>) => void` | `-` |
+| onFocus | 输入框获得焦点时触发 | `(e: FocusEvent<HTMLInputElement>) => void` | `-` |
+| onBlur | 输入框失去焦点时触发 | `(e: ChangeEvent<HTMLInputElement>) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-inputnumber-input-height | 数字输入框中input的高度 | `20px` |
+| \--nutui-inputnumber-input-background-color | 数字输入框中input的背景颜色 | `$color-background` |
+| \--nutui-inputnumber-input-font-color | 数字输入框中input的字号颜色 | `$color-title` |
+| \--nutui-inputnumber-input-font-size | 数字输入框中input的字号大小 | `12px` |
+| \--nutui-inputnumber-input-border | 数字输入框中input的border值 | `0` |
+| \--nutui-inputnumber-input-border-radius | 数字输入框中input的圆角 | `4px` |
+| \--nutui-inputnumber-input-margin | 数字输入框中input的margin值 | `2px` |
+| \--nutui-inputnumber-button-width | 数字输入框左右按钮的宽度 | `20px` |
+| \--nutui-inputnumber-button-height | 数字输入框左右按钮的高度 | `20px` |
+| \--nutui-inputnumber-button-background-color | 数字输入框左右按钮的背景色 | `transparent` |
+| \--nutui-inputnumber-icon-color | 数字输入框中icon的颜色 | `$color-text` |
+| \--nutui-inputnumber-icon-size | 数字输入框中icon的大小 | `8px` |
+| \--nutui-inputnumber-disabled-color | 数字输入框禁用色 | `$color-text-disabled` |