feat(inputNumber): add NInputNumber slots

CHANGELOG.en-US.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-message` add `destroyAll` method.
+- `n-input-number` add `prefix`, `suffix` slots, closes [#609](https://github.com/TuSimple/naive-ui/issues/609).
 
 ### Fixes
 

CHANGELOG.zh-CN.md

@@ -5,6 +5,7 @@
 ### Feats
 
 - `n-message` 增加 `destroyAll` 方法
+- `n-input-number` 增加 `prefix`、`suffix` slots, 关闭 [#609](https://github.com/TuSimple/naive-ui/issues/609)
 
 ### Fixes
 

src/input-number/demos/enUS/icon.demo.md

@@ -0,0 +1,29 @@
+# Prefix & Suffix
+
+Add content to prefix and suffix.
+
+```html
+<n-space vertical>
+  <n-input-number v-model:value="value">
+    <template #prefix>$</template>
+  </n-input-number>
+  <n-input-number v-model:value="value">
+    <template #suffix>%</template>
+  </n-input-number>
+  <n-input-number :show-button="false" v-model:value="value">
+    <template #suffix>%</template>
+  </n-input-number>
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(0)
+    }
+  }
+})
+```

src/input-number/demos/enUS/index.demo-entry.md

@@ -8,6 +8,7 @@ If you want just input number, use it.
 basic
 disabled
 event
+icon
 min-max
 size
 step
@@ -33,3 +34,10 @@ show-button
 | on-blur | `(event: FocusEvent) => void` | `undefined` | Callback when blur. |
 | on-focus | `(event: FocusEvent) => void` | `undefined` | Callback when focused. |
 | on-update:value | `(value: number \| null) => void` | `undefined` | Callback when the component's value changes. |
+
+### Input Slots
+
+| Name   | Parameters | Description                    |
+| ------ | ---------- | ------------------------------ |
+| prefix | `()`       | Input box prefix content slot. |
+| suffix | `()`       | Input box suffix content slot. |

src/input-number/demos/zhCN/icon.demo.md

@@ -0,0 +1,29 @@
+# 前缀 & 后缀
+
+在前缀后缀添加内容
+
+```html
+<n-space vertical>
+  <n-input-number v-model:value="value">
+    <template #prefix>￥</template>
+  </n-input-number>
+  <n-input-number v-model:value="value">
+    <template #suffix>%</template>
+  </n-input-number>
+  <n-input-number :show-button="false" v-model:value="value">
+    <template #suffix>%</template>
+  </n-input-number>
+</n-space>
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(0)
+    }
+  }
+})
+```

src/input-number/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 basic
 disabled
 event
+icon
 min-max
 size
 step
@@ -34,3 +35,10 @@ debug
 | on-blur | `(event: FocusEvent) => void` | `undefined` | 移除焦点的回调 |
 | on-focus | `(event: FocusEvent) => void` | `undefined` | 获取焦点的回调 |
 | on-update:value | `(value: number \| null) => void` | `undefined` | 组件值发生变化的回调 |
+
+### Slots
+
+| 属性   | 类型 | 说明               |
+| ------ | ---- | ------------------ |
+| prefix | `()` | 输入框头部内容插槽 |
+| suffix | `()` | 输入框尾部内容插槽 |

src/input-number/src/InputNumber.tsx

@@ -12,6 +12,7 @@ import { warn, call, MaybeArray, ExtractPublicPropTypes } from '../../_utils'
 import { inputNumberLight, InputNumberTheme } from '../styles'
 import { parse, validator, format, parseNumber } from './utils'
 import type { OnUpdateValue } from './interface'
+import style from './styles/input-number.cssr'
 
 const inputNumberProps = {
   ...(useTheme.props as ThemeProps<InputNumberTheme>),
@@ -68,7 +69,7 @@ export default defineComponent({
     const themeRef = useTheme(
       'InputNumber',
       'InputNumber',
-      undefined,
+      style,
       inputNumberLight,
       props,
       mergedClsPrefixRef
@@ -368,9 +369,13 @@ export default defineComponent({
           onKeydown={this.handleKeyDown}
           onMousedown={this.handleMouseDown}
         >
-          {this.showButton
-            ? {
-                suffix: () => [
+          {{
+            prefix: this.$slots.prefix,
+            suffix: this.showButton
+              ? () => [
+                  <span class={`${mergedClsPrefix}-input-number-suffix`}>
+                    {{ default: this.$slots.suffix }}
+                  </span>,
                   <NButton
                     text
                     disabled={!this.minusable || this.disabled}
@@ -408,8 +413,8 @@ export default defineComponent({
                     }}
                   </NButton>
                 ]
-              }
-            : null}
+              : this.$slots.suffix
+          }}
         </NInput>
       </div>
     )

src/input-number/src/styles/input-number.cssr.ts

@@ -0,0 +1,8 @@
+import { cB, c } from '../../../_utils/cssr'
+
+export default c([
+  cB('input-number-suffix', `
+    display: inline-block;
+    margin-right: 10px;
+  `)
+])

src/input-number/tests/InputNumber.spec.tsx

@@ -55,4 +55,17 @@ describe('n-input-number', () => {
     expect(onBlur).toHaveBeenCalledTimes(1)
     wrapper.unmount()
   })
+
+  it('should work with `prefix` & `suffix` slots', async () => {
+    const wrapper = mount(NInputNumber, {
+      slots: { prefix: () => '$', suffix: () => '%' }
+    })
+    expect(wrapper.find('.n-input__prefix').exists()).toBe(true)
+    expect(wrapper.find('.n-input__prefix').text()).toBe('$')
+    expect(wrapper.find('.n-input__suffix').exists()).toBe(true)
+    expect(wrapper.find('.n-input-number-suffix-has-button').exists()).toBe(
+      true
+    )
+    expect(wrapper.find('.n-input-number-suffix-has-button').text()).toBe('%')
+  })
 })

src/input/src/styles/input.cssr.ts

@@ -299,7 +299,7 @@ export default c([
       transition: color .3s var(--bezier);
       flex-wrap: nowrap;
       flex-shrink: 0;
-      line-height: 1.5;
+      line-height: var(--height);
       white-space: nowrap;
       display: inline-flex;
       align-items: center;