From f591f74586aa7ccb887d2fc7f5b4e4541855e464 Mon Sep 17 00:00:00 2001
From: renzp94 <1074720760@qq.com>
Date: Sun, 15 Oct 2023 09:49:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0InputNumber=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.mts                    |   4 +
 docs/components/InputNumber.md                | 164 ++++++++++
 docs/example/input-number/addon.svelte        |  24 ++
 docs/example/input-number/basic.svelte        |   7 +
 docs/example/input-number/bordered.svelte     |   5 +
 docs/example/input-number/disabled.svelte     |   5 +
 docs/example/input-number/formatter.svelte    |  20 ++
 docs/example/input-number/keyboard.svelte     |  10 +
 docs/example/input-number/precision.svelte    |   9 +
 docs/example/input-number/prefix.svelte       |   7 +
 docs/example/input-number/size.svelte         |   9 +
 packages/adorn-ui/package.json                |   1 +
 packages/adorn-ui/src/Input/Input.svelte      |   1 +
 packages/adorn-ui/src/Input/Number.svelte     |   0
 packages/adorn-ui/src/Input/index.js          |   2 -
 .../adorn-ui/src/InputNumber/index.svelte     | 296 ++++++++++++++++++
 packages/adorn-ui/src/index.js                |   1 +
 pnpm-lock.yaml                                |   7 +
 18 files changed, 570 insertions(+), 2 deletions(-)
 create mode 100644 docs/components/InputNumber.md
 create mode 100644 docs/example/input-number/addon.svelte
 create mode 100644 docs/example/input-number/basic.svelte
 create mode 100644 docs/example/input-number/bordered.svelte
 create mode 100644 docs/example/input-number/disabled.svelte
 create mode 100644 docs/example/input-number/formatter.svelte
 create mode 100644 docs/example/input-number/keyboard.svelte
 create mode 100644 docs/example/input-number/precision.svelte
 create mode 100644 docs/example/input-number/prefix.svelte
 create mode 100644 docs/example/input-number/size.svelte
 delete mode 100644 packages/adorn-ui/src/Input/Number.svelte
 create mode 100644 packages/adorn-ui/src/InputNumber/index.svelte

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 472a420..4c3630c 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -84,6 +84,10 @@ const components = [
           text: 'Input 输入框',
           link: '/components/Input'
         },
+        {
+          text: 'InputNumber 数字输入框',
+          link: '/components/InputNumber'
+        },
       ]
     },
 ]
diff --git a/docs/components/InputNumber.md b/docs/components/InputNumber.md
new file mode 100644
index 0000000..1939912
--- /dev/null
+++ b/docs/components/InputNumber.md
@@ -0,0 +1,164 @@
+---
+title: InputNumber 数字输入框
+lang: zh-CN
+---
+
+# InputNumber 数字输入框
+
+通过鼠标或键盘，输入范围内的数值。
+
+## 基本使用
+
+基本使用。
+
+<demo src="../../../../example/input-number/basic.svelte"></demo>
+
+## 三种大小
+
+我们为`<Input />`输入框定义了三种尺寸（大、默认、小），高度分别为`40px`、`32px` 和 `24px`。
+
+<demo src="../../../../example/input-number/size.svelte"></demo>
+
+## 前置/后置标签
+
+使用`addonBefore`插槽自定义前置标签，`addonAfter`插槽自定义后置标签。
+
+<demo src="../../../../example/input-number/addon.svelte"></demo>
+
+## 不可用
+
+禁用的输入框。
+
+<demo src="../../../../example/input-number/disabled.svelte"></demo>
+
+## 精度限制
+
+使用`precision`属性指定精度，为`0`表示只能输入整数。
+
+<demo src="../../../../example/input-number/precision.svelte"></demo>
+
+## 格式化展示
+
+通过`formatter`格式化数字，以展示具有具体含义的数据。此属性只控制展示效果，如果使用了`bind:value`的话，value永远为`数字`。
+
+需要获取`格式化数字`，可通过`input`或`change`事件获取。默认如果存在`formatter`则`input`或`change`事件返回的值是`数字`，如果需要`格式化数字`则可以使用`isParse=false`。
+
+> 再次说明：`isParse`属性只控制`input`或`change`事件中的值，不控制`value`，`value`永远为`数字`。
+
+<demo src="../../../../example/input-number/formatter.svelte"></demo>
+
+## 键盘行为
+
+使用`keyboard`属性可以控制键盘行为。
+
+<demo src="../../../../example/input-number/keyboard.svelte"></demo>
+
+## 无边框
+
+没有边框。
+
+<demo src="../../../../example/input-number/bordered.svelte"></demo>
+
+## 前置内容
+
+使用`prefix`插槽自定义前置内容。
+
+<demo src="../../../../example/input-number/prefix.svelte"></demo>
+
+## Input Props 属性
+
+| 属性         | 说明                                                                                                                                                                                           | 类型                       | 默认值   | 版本 |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | -------- | ---- |
+| allowClear   | 可以点击清除图标删除内容                                                                                                                                                                       | `boolean`                  | `false`  |      |
+| bordered     | 是否有边框                                                                                                                                                                                     | `boolean`                  | `true`   |      |
+| defaultValue | 输入框默认内容                                                                                                                                                                                 | `string`                   | -        |      |
+| disabled     | 设置按是否禁用状态                                                                                                                                                                             | `boolean`                  | `false`  |
+| id           | 输入框的id                                                                                                                                                                                     | `string`                   | -        |      |
+| maxLength    | 最大长度                                                                                                                                                                                       | `number`                   | -        |      |
+| showCount    | 是否展示字数                                                                                                                                                                                   | `boolean`                  | `false`  |      |
+| status       | 设置校验状态                                                                                                                                                                                   | `error \| warning`         | -        |      |
+| size         | 控件大小。                                                                                                                                                                                     | `large \| middle \| small` | `middle` |      |
+| type         | 声明`input`类型，同原生`input`标签的`type`属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%E5%B1%9E%E6%80%A7)(请直接使用`Input.TextArea`代替`type="textarea"`) | `string`                   | `text`   |      |
+| value        | 输入框内容                                                                                                                                                                                     | `string`                   | -        |      |
+
+## Events 事件
+
+| 事件       | 说明               | 类型                                                        |
+| ---------- | ------------------ | ----------------------------------------------------------- |
+| input      | 输入事件           | `(value: CustomEvent<string>) => void`                      |
+| change     | 输入改变事件       | `ChangeEventHandler<HTMLInputElement> \| undefined \| null` |
+| blur       | 失去焦点事件       | `FocusEventHandler<T> \| undefined \| null`                 |
+| focus      | 获取焦点事件       | `FocusEventHandler<T> \| undefined \| null`                 |
+| keyup      | 键盘抬起事件       | `KeyboardEventHandler<T> \| undefined \| null`              |
+| keydown    | 键盘按下事件       | `KeyboardEventHandler<T> \| undefined \| null`              |
+| keypress   | 键盘按下并松开事件 | `KeyboardEventHandler<T> \| undefined \| null`              |
+| mouseenter | 鼠标移入事件       | `MouseEventHandler<T> \| undefined \| null`                 |
+| mouseleave | 鼠标移出事件       | `MouseEventHandler<T> \| undefined \| null`                 |
+| mousemove  | 鼠标移动事件       | `MouseEventHandler<T> \| undefined \| null`                 |
+
+## Slots 插槽
+
+| 插槽名      | 说明                          |
+| ----------- | ----------------------------- |
+| addonBefore | 带标签的`input`，设置前置标签 |
+| addonAfter  | 带标签的`input`，设置后置标签 |
+| prefix      | 带有前缀图标的`input`         |
+| suffix      | 带有后缀图标的`input`         |
+
+## Input.Search Props 属性
+
+| 属性        | 说明                             | 类型      | 默认值  | 版本 |
+| ----------- | -------------------------------- | --------- | ------- | ---- |
+| enterButton | 是否有确认按钮，可设为按钮文字。 | `boolean` | `false` |      |
+| loading     | 搜索 loading                     | `boolean` | `false` |      |
+
+其余属性和`Input`一致。
+
+## Events 事件
+
+| 事件   | 说明                             | 类型                                   |
+| ------ | -------------------------------- | -------------------------------------- |
+| search | 点击搜索图标或按下回车键时的回调 | `(value: CustomEvent<string>) => void` |
+
+其余事件和`Input`一致。
+
+## Slots 插槽
+
+除了没有`addonAfter`插槽，其他的和`Input`一致。
+
+## Input.Password Props 属性
+
+| 属性    | 说明         | 类型      | 默认值  | 版本 |
+| ------- | ------------ | --------- | ------- | ---- |
+| visible | 是否显示密码 | `boolean` | `false` |      |
+
+其余属性和`Input`一致。
+
+## Events 事件
+
+| 事件          | 说明           | 类型                                    |
+| ------------- | -------------- | --------------------------------------- |
+| visibleChange | 显隐密码的回调 | `(value: CustomEvent<boolean>) => void` |
+
+其余事件和`Input`一致。
+
+## Slots 插槽
+
+除了没有`suffix`插槽，其他的和`Input`一致。
+
+## Input.TextArea Props 属性
+
+| 属性         | 说明                     | 类型               | 默认值  | 版本 |
+| ------------ | ------------------------ | ------------------ | ------- | ---- |
+| allowClear   | 可以点击清除图标删除内容 | `boolean`          | `false` |      |
+| bordered     | 是否有边框               | `boolean`          | `true`  |      |
+| defaultValue | 输入框默认内容           | `string`           | -       |      |
+| disabled     | 设置按是否禁用状态       | `boolean`          | `false` |
+| maxLength    | 最大长度                 | `number`           | -       |      |
+| showCount    | 是否展示字数             | `boolean`          | `false` |      |
+| status       | 设置校验状态             | `error \| warning` | -       |      |
+| value        | 输入框内容               | `string`           | -       |      |
+
+## Events 事件
+
+事件和`Input`一致。
diff --git a/docs/example/input-number/addon.svelte b/docs/example/input-number/addon.svelte
new file mode 100644
index 0000000..cc43246
--- /dev/null
+++ b/docs/example/input-number/addon.svelte
@@ -0,0 +1,24 @@
+<script>
+  import { Icon, InputNumber, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical" style="width: 100%;">
+  <InputNumber placeholder="请输入" size="small">
+    <span slot="addonBefore">http://</span>
+  </InputNumber>
+  <InputNumber placeholder="请输入" size="small">
+    <Icon slot="addonAfter" name="search" />
+  </InputNumber>
+  <InputNumber placeholder="请输入" size="small">
+    <span slot="addonBefore">http://</span>
+    <Icon slot="addonAfter" name="search" />
+  </InputNumber>
+  <InputNumber placeholder="请输入" size="middle">
+    <span slot="addonBefore">http://</span>
+    <Icon slot="addonAfter" name="search" />
+  </InputNumber>
+  <InputNumber placeholder="请输入" size="large">
+    <span slot="addonBefore">http://</span>
+    <Icon slot="addonAfter" name="search" />
+  </InputNumber>
+</Space>
diff --git a/docs/example/input-number/basic.svelte b/docs/example/input-number/basic.svelte
new file mode 100644
index 0000000..375f3f4
--- /dev/null
+++ b/docs/example/input-number/basic.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { InputNumber } from 'adorn-ui'
+
+  let value = 1
+</script>
+
+<InputNumber placeholder="0.0" bind:value min={1} max={10} />
diff --git a/docs/example/input-number/bordered.svelte b/docs/example/input-number/bordered.svelte
new file mode 100644
index 0000000..08af600
--- /dev/null
+++ b/docs/example/input-number/bordered.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { InputNumber } from 'adorn-ui'
+</script>
+
+<InputNumber bordered={false} />
diff --git a/docs/example/input-number/disabled.svelte b/docs/example/input-number/disabled.svelte
new file mode 100644
index 0000000..a45a08b
--- /dev/null
+++ b/docs/example/input-number/disabled.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { InputNumber } from 'adorn-ui'
+</script>
+
+<InputNumber placeholder="0.0" disabled defaultValue={1} />
diff --git a/docs/example/input-number/formatter.svelte b/docs/example/input-number/formatter.svelte
new file mode 100644
index 0000000..49d5115
--- /dev/null
+++ b/docs/example/input-number/formatter.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { InputNumber } from 'adorn-ui'
+
+  let value = 1000
+
+  $: {
+    console.log(value)
+  }
+  const onInput = e => {
+    console.log(e)
+  }
+</script>
+
+<InputNumber
+  placeholder="0.0"
+  bind:value
+  on:input={onInput}
+  formatter={v => `$ ${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+  stringMode
+/>
diff --git a/docs/example/input-number/keyboard.svelte b/docs/example/input-number/keyboard.svelte
new file mode 100644
index 0000000..86bc3dd
--- /dev/null
+++ b/docs/example/input-number/keyboard.svelte
@@ -0,0 +1,10 @@
+<script>
+  import { Button, InputNumber, Space } from 'adorn-ui'
+  let keyboard = false
+  const onTrigger = () => (keyboard = !keyboard)
+</script>
+
+<Space>
+  <InputNumber placeholder="0.0" min={1} max={10} {keyboard} />
+  <Button on:click={onTrigger}>{keyboard ? '关闭' : '开启'}Keyboard</Button>
+</Space>
diff --git a/docs/example/input-number/precision.svelte b/docs/example/input-number/precision.svelte
new file mode 100644
index 0000000..2a1b228
--- /dev/null
+++ b/docs/example/input-number/precision.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { InputNumber, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical">
+  <InputNumber placeholder="0" />
+  <InputNumber placeholder="0.0" precision={1} />
+  <InputNumber placeholder="0.00" precision={2} />
+</Space>
diff --git a/docs/example/input-number/prefix.svelte b/docs/example/input-number/prefix.svelte
new file mode 100644
index 0000000..de7abfb
--- /dev/null
+++ b/docs/example/input-number/prefix.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { InputNumber, Icon } from 'adorn-ui'
+</script>
+
+<InputNumber placeholder="请输入">
+  <Icon slot="prefix" name="user" />
+</InputNumber>
diff --git a/docs/example/input-number/size.svelte b/docs/example/input-number/size.svelte
new file mode 100644
index 0000000..117d8d4
--- /dev/null
+++ b/docs/example/input-number/size.svelte
@@ -0,0 +1,9 @@
+<script>
+  import { InputNumber, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical" style="width: 100%;">
+  <InputNumber placeholder="请输入" size="small" />
+  <InputNumber placeholder="请输入" size="middle" />
+  <InputNumber placeholder="请输入" size="large" />
+</Space>
diff --git a/packages/adorn-ui/package.json b/packages/adorn-ui/package.json
index dec174a..36968eb 100644
--- a/packages/adorn-ui/package.json
+++ b/packages/adorn-ui/package.json
@@ -79,6 +79,7 @@
 	},
 	"dependencies": {
 		"@renzp/classes": "^0.0.3",
+		"@renzp/number-correct": "^0.0.6",
 		"lodash-es": "^4.17.21"
 	}
 }
diff --git a/packages/adorn-ui/src/Input/Input.svelte b/packages/adorn-ui/src/Input/Input.svelte
index 71a92c0..d6b2492 100644
--- a/packages/adorn-ui/src/Input/Input.svelte
+++ b/packages/adorn-ui/src/Input/Input.svelte
@@ -60,6 +60,7 @@
       dispatch('input', value)
     }
   }
+
   const onChange = (e: any) => dispatch('change', e.target?.value)
 
   let focused = false
diff --git a/packages/adorn-ui/src/Input/Number.svelte b/packages/adorn-ui/src/Input/Number.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/packages/adorn-ui/src/Input/index.js b/packages/adorn-ui/src/Input/index.js
index 6d4b97e..dbed04c 100644
--- a/packages/adorn-ui/src/Input/index.js
+++ b/packages/adorn-ui/src/Input/index.js
@@ -1,5 +1,4 @@
 import Component from './Input.svelte'
-import Number from './Number.svelte'
 import Password from './Password.svelte'
 import Search from './Search.svelte'
 import TextArea from './TextArea.svelte'
@@ -7,7 +6,6 @@ import TextArea from './TextArea.svelte'
 const Input = Object.assign(
   Component,
   {
-    Number,
     Password,
     Search,
     TextArea
diff --git a/packages/adorn-ui/src/InputNumber/index.svelte b/packages/adorn-ui/src/InputNumber/index.svelte
new file mode 100644
index 0000000..274c708
--- /dev/null
+++ b/packages/adorn-ui/src/InputNumber/index.svelte
@@ -0,0 +1,296 @@
+<script lang="ts">
+  import classes from '@renzp/classes'
+  import { Icon, Input } from '../index'
+  import type { IconName, Size } from '../utils/types'
+  import { createEventDispatcher } from 'svelte'
+  import type { KeyboardEventHandler } from 'svelte/elements'
+  import { isUndef } from '../utils/tools'
+  import { plus, isGreat, isLess, isGreatEqual, isLessEqual } from '@renzp/number-correct'
+  const dispatch = createEventDispatcher()
+  type Controls = { upIconName: IconName; downIconName: IconName }
+
+  export let allowClear = false
+  export let bordered = true
+  export let controls: boolean | Controls = true
+  export let defaultValue: string | undefined = undefined
+  export let disabled: boolean = false
+  export let formatter: ((value: string | undefined) => string) | undefined = undefined
+  export let keyboard = true
+  export let max: string | number | undefined = undefined
+  export let min: string | number | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let isParse = !!formatter
+  export let value: string | undefined = defaultValue
+  export let id: string | undefined = undefined
+  export let maxLength: number | undefined = undefined
+  export let precision: number | undefined = undefined
+  export let step: number = 1
+  export let size: Size = 'middle'
+
+  const numberFilter = (v: string | undefined) => v?.replace(/[^-0-9\.]/g, '')
+
+  const parseNumber = (v: string | undefined) => (!isUndef(v) ? numberFilter(v) : undefined)
+  const formatterStr = (v: string | undefined) => (formatter ? formatter(v) : v?.toString())
+
+  let model: string | undefined
+  $: model = formatterStr(value)
+
+  let className = ''
+  export { className as class }
+  $: classList = classes([
+    'adorn-input-number',
+    className,
+    `adorn-input-number--${size}`,
+    { ['has-addon']: $$slots.addonBefore || $$slots.addonAfter },
+    { ['has-only-addon-before']: $$slots.addonBefore && !$$slots.addonAfter },
+    { ['has-only-addon-after']: $$slots.addonAfter && !$$slots.addonBefore }
+  ])
+
+  $: upIconName = (controls as Controls)?.upIconName ?? 'arrow-up-s'
+  $: downIconName = (controls as Controls)?.downIconName ?? 'arrow-down-s'
+  $: upDisabled = value !== undefined && max && isGreatEqual(value, max)
+  $: downDisabled = value !== undefined && min && isLessEqual(value, min)
+
+  const getRangeValue = (
+    v: string,
+    max: string | number | undefined,
+    min: string | number | undefined
+  ) => {
+    let rangeValue = v
+    if (max !== undefined && max !== null) {
+      rangeValue = isGreat(rangeValue, max) ? max.toString() : rangeValue
+    }
+    if (min !== undefined && min !== null) {
+      rangeValue = isLess(rangeValue, min) ? min.toString() : rangeValue
+    }
+
+    return rangeValue
+  }
+
+  const onStep = (type: 'up' | 'down') => {
+    let v = model ? model : '0'
+    v = plus(numberFilter(v) as string, type === 'up' ? step : -step)
+    value = getRangeValue(v, max, min)
+
+    dispatch('step', { value, type })
+    dispatch('change', isParse ? value : model)
+  }
+
+  const onKeyup: KeyboardEventHandler<any> = e => {
+    const { key } = e
+    if (keyboard && ['ArrowUp', 'ArrowDown'].includes(key)) {
+      onStep(key === 'ArrowUp' ? 'up' : 'down')
+    }
+
+    dispatch('keyup', key)
+  }
+
+  const onKeydown: KeyboardEventHandler<any> = e => {
+    const { key } = e
+    if (keyboard && ['ArrowUp', 'ArrowDown'].includes(key)) {
+      e.preventDefault()
+    }
+    dispatch('keyup', key)
+  }
+
+  const getPassValue = (v: string) => {
+    // 替换中文小数点
+    let val = v.replace('。', '.')
+    // 只能输入-、0-9、.
+    val = val?.replace(/[^-0-9\.]/g, '')
+    // 有负号且只能有一个，而且不在第一个则移除
+    const hasMinusSign = v.includes('-')
+    if (hasMinusSign) {
+      val = val.replace(/-+/g, (_, offset) => (offset === 0 ? '-' : ''))
+    }
+    // 有且只能有一个小数点，而且不能在第一位
+    const decimalPointCount = val.match(/\./g)?.length ?? 0
+    const hasDecimalPoint = decimalPointCount > 0
+    // 如果精度为0则只能输入整数
+    if (precision === 0 && hasDecimalPoint) {
+      return val
+    }
+    // 存在小数点
+    if (hasDecimalPoint) {
+      // 小数点在第一位则移除
+      if (val.indexOf('.') === 0) {
+        val = val.replace('.', '')
+      }
+      // 多个小数点则移除一个
+      if (decimalPointCount > 1) {
+        const [integer, decimal] = val.split('.')
+        val = `${integer}.${decimal}`
+      }
+      if (precision && precision > 0) {
+        let [integer, decimal] = val.split('.')
+        decimal = decimal.slice(0, precision)
+        val = `${integer}.${decimal}`
+      }
+    }
+
+    return val
+  }
+
+  const validateNumber = (v: string) => /^[-\d.]+$/.test(v)
+  const validateMinusSign = (v: string) => {
+    const count = v.match(/\-/g)?.length ?? 0
+    // 不含-✅
+    if (count === 0) {
+      return true
+    }
+    // 只有一个且在首位✅
+    if (count === 1 && v.indexOf('-') === 0) {
+      return true
+    }
+
+    return false
+  }
+  const validateDecimalPoint = (v: string) => {
+    const count = v.match(/\./g)?.length ?? 0
+    // 不含小数点✅
+    if (count === 0) {
+      return true
+    }
+    // 有小数点且不在首位✅
+    if (count === 1 && v.indexOf('.') > 0) {
+      return true
+    }
+
+    return false
+  }
+  const isValidator = (v: string) =>
+    validateMinusSign(v) && validateDecimalPoint(v) && validateNumber(v)
+
+  const onInput = (e: CustomEvent<string>) => {
+    value = e.detail ? getPassValue(getRangeValue(e.detail, max, min)) : e.detail
+    model = formatterStr(value)
+    // 如果是有效输入才触发input事件
+    if (!e.detail || isValidator(e.detail)) {
+      dispatch('input', isParse ? value : model)
+    }
+    dispatch('input', isParse ? value : model)
+  }
+  const onChange = () => {
+    // 此处主要是处理input事件中最后一位拼接的小数点
+    value = parseNumber(value?.toString())
+    dispatch('change', isParse ? value : model)
+  }
+</script>
+
+<div class={classList} {...$$restProps} class:disabled>
+  <Input
+    {allowClear}
+    {bordered}
+    defaultValue={defaultValue?.toString()}
+    {disabled}
+    {placeholder}
+    bind:value={model}
+    {id}
+    {maxLength}
+    {size}
+    type="text"
+    on:input={onInput}
+    on:compositionstart
+    on:compositionend
+    on:change={onChange}
+    on:blur
+    on:focus
+    on:keyup={onKeyup}
+    on:keydown={onKeydown}
+    on:keypress
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+  >
+    <slot name="prefix" slot="prefix" />
+    <div class="adorn-input-number-arrow" slot="suffix">
+      {#if controls}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="arrow-item" class:disabled={upDisabled} on:click={() => onStep('up')}>
+          <Icon name={upIconName} size={size === 'small' ? '6px' : undefined} />
+        </div>
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div class="arrow-item" class:disabled={downDisabled} on:click={() => onStep('down')}>
+          <Icon name={downIconName} size={size === 'small' ? '6px' : undefined} />
+        </div>
+      {/if}
+    </div>
+    <slot name="addonBefore" slot="addonBefore" />
+    <slot name="addonAfter" slot="addonAfter" />
+  </Input>
+</div>
+
+<style lang="less" global>
+  .adorn-input-number {
+    :global(.adorn-input-wrapper.bordered .adorn-input) {
+      border-radius: var(--adorn-radius-sm);
+      position: relative;
+    }
+
+    &.has-addon {
+      :global(.adorn-input-wrapper.bordered .adorn-input) {
+        border-radius: 0;
+      }
+    }
+    &.has-only-addon-before {
+      :global(.adorn-input-wrapper.bordered .adorn-input) {
+        border-radius: 0 var(--adorn-radius-sm) var(--adorn-radius-sm) 0;
+      }
+    }
+    &.has-only-addon-after {
+      :global(.adorn-input-wrapper.bordered .adorn-input) {
+        border-radius: var(--adorn-radius-sm) 0 0 var(--adorn-radius-sm);
+      }
+    }
+
+    &-arrow {
+      position: absolute;
+      right: 0;
+      top: 0;
+      height: 100%;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    &:hover :global(.adorn-input-wrapper.bordered .adorn-input) {
+      padding-right: 24px;
+    }
+    &:not(.disabled):hover &-arrow {
+      opacity: 1;
+    }
+
+    .arrow-item {
+      height: 50%;
+      width: 24px;
+      text-align: center;
+      line-height: 14px;
+      border-left: 1px solid var(--adorn-border-color);
+      cursor: pointer;
+      color: var(--adorn-disabled-text-color);
+      transition: color 0.3s;
+
+      &:not(.disabled):hover {
+        color: var(--adorn-primary-color);
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+      }
+
+      &:first-child {
+        border-radius: 0 var(--adorn-radius-sm) 0 0;
+        border-bottom: 1px solid var(--adorn-border-color);
+      }
+
+      &:last-child {
+        border-radius: 0 0 var(--adorn-radius-sm) 0;
+      }
+    }
+
+    &--small .arrow-item {
+      line-height: 6px;
+    }
+  }
+</style>
diff --git a/packages/adorn-ui/src/index.js b/packages/adorn-ui/src/index.js
index 11e98f7..a579551 100644
--- a/packages/adorn-ui/src/index.js
+++ b/packages/adorn-ui/src/index.js
@@ -8,6 +8,7 @@ export { FloatButton } from './FloatButton'
 export { Row, Col } from './Grid'
 export { default as Icon } from './Icon/index.svelte'
 export { Input } from './Input'
+export { default as InputNumber } from './InputNumber/index.svelte'
 export { Layout } from './Layout'
 export { Menu } from './Menu'
 export { default as Pagination } from './Pagination/index.svelte'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0174cb7..b8cff0b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@renzp/classes':
         specifier: ^0.0.3
         version: 0.0.3
+      '@renzp/number-correct':
+        specifier: ^0.0.6
+        version: 0.0.6
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
@@ -709,6 +712,10 @@ packages:
     resolution: {integrity: sha512-imuC92ILS4s/SLnJzf4C6hbmwS6EBuwQXBfceoveT0VEmpfenCAK66cbzzfjt/+lkmmSgIuifIo4SoZUknPR6A==}
     dev: false
 
+  /@renzp/number-correct@0.0.6:
+    resolution: {integrity: sha512-dDMxL5MCRwBOVXNMAAb7rdBrtAe19/7Eycz/L1JJ5V54A9ib0LmK0m+iAsI/K74Um1s7kQbhKBwLJJC34X3j9w==}
+    dev: false
+
   /@sveltejs/kit@1.23.0(svelte@4.2.0)(vite@4.4.9):
     resolution: {integrity: sha512-MuDM6afpSMnPFMtEsE1O+Qn6NVPNHDqsDYYZE/8/+Z3IvGmE+GKHC+za6fEmCfwXLqNlxFZiV8s8kKOeNVJP+g==}
     engines: {node: ^16.14 || >=18}