refactor(input-number): button-placement prop

2025-03-13 13:59:04 +08:00 · 2022-05-23 01:50:32 +08:00 · 2022-05-23 01:50:32 +08:00 · c75b26eeac
commit c75b26eeac
parent 3d7cbf3a4e
9 changed files with 145 additions and 63 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -5,6 +5,10 @@
 - Fix `n-tree` throw error when use `pattern` prop filter the tree node, closes [#2960].
 - Fix `n-watermark` not working when provided `cls-prefix`

+### Feats
+
+- `n-input-number` adds `button-placement` prop.
+
 ## 2.29.0

 ### Breaking Changes
@ -153,8 +157,6 @@

 - `n-time` uses `formatDistanceStrict` rather than `formatDistance` in `date-fns`, closes [#2703](https://github.com/TuSimple/naive-ui/issues/2703).

- Fix `n-input-number` add `justify-icon` props for justify add,remove icon (like: [- 0 +])
-
 ### Fixes

 - Fix `n-tabs` has unexpected line animation when nested with `n-tabs`, closes [#2689](https://github.com/TuSimple/naive-ui/issues/2689).
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -5,6 +5,10 @@
 - 修复 `n-tree` 使用 `pattern` 属性过滤树节点时报错, 关闭 [#2960].
 - 修复 `n-watermark` 在全局配置了 `cls-prefix` 时失效

+### Feats
+
+- `n-input-number` 新增 `button-placement` 属性
+
 ## 2.29.0

 ### Breaking Changes
--- a/package.json
+++ b/package.json
@ -87,7 +87,7 @@
    "@vue/eslint-config-standard": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/server-renderer": "3.2.33",
-    "@vue/test-utils": "2.0.0-rc.16",
+    "@vue/test-utils": "^2.0.0",
    "autoprefixer": "^10.4.4",
    "babel-jest": "^28.0.2",
    "codesandbox": "^2.2.3",
--- a/src/input-number/demos/enUS/button-placement.demo.vue
+++ b/src/input-number/demos/enUS/button-placement.demo.vue
@ -0,0 +1,33 @@
+<markdown>
+# Button placement
+
+Button can be placed at both ends.
+</markdown>
+
+<template>
+  <n-space vertical>
+    <n-input-number v-model:value="value" button-placement="both" />
+    <n-input-number v-model:value="value" button-placement="both">
+      <template #prefix>
+        $
+      </template>
+    </n-input-number>
+    <n-input-number v-model:value="value" button-placement="both">
+      <template #suffix>
+        ฿
+      </template>
+    </n-input-number>
+  </n-space>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(0)
+    }
+  }
+})
+</script>
--- a/src/input-number/demos/enUS/index.demo-entry.md
+++ b/src/input-number/demos/enUS/index.demo-entry.md
@ -8,8 +8,8 @@ If you just want a number, this is for you.
 basic.vue
 disabled.vue
 event.vue
-justify-icon.vue
 icon.vue
+button-placement.vue
 loading.vue
 min-max.vue
 size.vue
@ -30,6 +30,7 @@ custom-icon.vue
 | --- | --- | --- | --- | --- |
 | autofocus | `boolean` | `false` | Whether to autofocus. | 2.26.1 |
 | bordered | `boolean` | `true` | Whether to show a border. |  |
+| button-placement | `'both' \| 'right'` | `'right'` | Placement of add & minus button. | NEXT_VERSION |
 | clearable | `boolean` | `false` | Whether the input is clearable. |  |
 | default-value | `number \| null` | `null` | Default value when not manually set. |  |
 | disabled | `boolean` | `false` | Whether to disable the input. |  |
--- a/src/input-number/demos/zhCN/button-placement.demo.vue
+++ b/src/input-number/demos/zhCN/button-placement.demo.vue
@ -1,21 +1,25 @@
 <markdown>
-# Justify Icon
+# 按钮位置
+
+按钮可以被放在两侧。
 </markdown>
+
 <template>
  <n-space vertical>
-    <n-input-number v-model:value="value" justify-icon />
-    <n-input-number v-model:value="value" justify-icon>
+    <n-input-number v-model:value="value" button-placement="both" />
+    <n-input-number v-model:value="value" button-placement="both">
      <template #prefix>
        $
      </template>
    </n-input-number>
-    <n-input-number v-model:value="value" justify-icon>
+    <n-input-number v-model:value="value" button-placement="both">
      <template #suffix>
        ฿
      </template>
    </n-input-number>
  </n-space>
 </template>
+
 <script lang="ts">
 import { defineComponent, ref } from 'vue'

--- a/src/input-number/demos/zhCN/index.demo-entry.md
+++ b/src/input-number/demos/zhCN/index.demo-entry.md
@ -9,6 +9,7 @@ basic.vue
 disabled.vue
 event.vue
 icon.vue
+button-placement.vue
 loading.vue
 min-max.vue
 size.vue
@ -31,6 +32,7 @@ rtl-debug.vue
 | --- | --- | --- | --- | --- |
 | autofocus | `boolean` | `false` | 是否自动获取焦点 | 2.26.1 |
 | bordered | `boolean` | `true` | 是否有边框 |  |
+| button-placement | `'both' \| 'right'` | `'right'` | 加减按钮的位置 | NEXT_VERSION |
 | clearable | `boolean` | `false` | 是否可清空 |  |
 | default-value | `number \| null` | `null` | 非受控模式下的默认值 |  |
 | disabled | `boolean` | `false` | 是否禁用 |  |
--- a/src/input-number/src/InputNumber.tsx
+++ b/src/input-number/src/InputNumber.tsx
@ -6,7 +6,8 @@ import {
  watch,
  computed,
  PropType,
-  watchEffect
+  watchEffect,
+  VNode
 } from 'vue'
 import { rgba } from 'seemly'
 import { useMemo, useMergedState } from 'vooks'
@ -24,7 +25,8 @@ import {
  ExtractPublicPropTypes,
  warnOnce,
  call,
-  resolveSlot
+  resolveSlot,
+  resolveWrappedSlot
 } from '../../_utils'
 import { inputNumberLight } from '../styles'
 import type { InputNumberTheme } from '../styles'
@ -69,9 +71,9 @@ const inputNumberProps = {
    type: Boolean,
    default: true
  },
-  justifyIcon: {
-    type: Boolean,
-    default: false
+  buttonPlacement: {
+    type: String as PropType<'right' | 'both'>,
+    default: 'right'
  },
  readonly: Boolean,
  clearable: Boolean,
@ -502,6 +504,54 @@ export default defineComponent({
  },
  render () {
    const { mergedClsPrefix, $slots } = this
+    const renderMinusButton = (): VNode => {
+      return (
+        <NxButton
+          text
+          disabled={!this.minusable || this.mergedDisabled || this.readonly}
+          focusable={false}
+          builtinThemeOverrides={this.buttonThemeOverrides}
+          onClick={this.handleMinusClick}
+          onMousedown={this.handleMinusMousedown}
+          ref="minusButtonInstRef"
+        >
+          {{
+            icon: () =>
+              resolveSlot($slots['minus-icon'], () => [
+                <NBaseIcon clsPrefix={mergedClsPrefix}>
+                  {{
+                    default: () => <RemoveIcon />
+                  }}
+                </NBaseIcon>
+              ])
+          }}
+        </NxButton>
+      )
+    }
+    const renderAddButton = (): VNode => {
+      return (
+        <NxButton
+          text
+          disabled={!this.addable || this.mergedDisabled || this.readonly}
+          focusable={false}
+          builtinThemeOverrides={this.buttonThemeOverrides}
+          onClick={this.handleAddClick}
+          onMousedown={this.handleAddMousedown}
+          ref="addButtonInstRef"
+        >
+          {{
+            icon: () =>
+              resolveSlot($slots['add-icon'], () => [
+                <NBaseIcon clsPrefix={mergedClsPrefix}>
+                  {{
+                    default: () => <AddIcon />
+                  }}
+                </NBaseIcon>
+              ])
+          }}
+        </NxButton>
+      )
+    }
    return (
      <div
        class={[
@ -536,59 +586,45 @@ export default defineComponent({
          internalLoadingBeforeSuffix
        >
          {{
-            prefix: () => $slots.prefix?.(),
+            prefix: () =>
+              this.showButton
+                ? [
+                    this.buttonPlacement === 'both'
+                      ? renderMinusButton()
+                      : null,
+                    resolveWrappedSlot($slots.prefix, (children) => {
+                      if (children) {
+                        return (
+                          <span
+                            class={`${mergedClsPrefix}-input-number-prefix`}
+                          >
+                            {children}
+                          </span>
+                        )
+                      }
+                      return null
+                    })
+                  ]
+                : $slots.prefix?.(),
            suffix: () =>
              this.showButton
                ? [
-                    $slots.suffix && (
-                      <span class={`${mergedClsPrefix}-input-number-suffix`}>
-                        {{ default: $slots.suffix }}
-                      </span>
-                    ),
-                    <NxButton
-                      text
-                      disabled={
-                        !this.minusable || this.mergedDisabled || this.readonly
+                    resolveWrappedSlot($slots.suffix, (children) => {
+                      if (children) {
+                        return (
+                          <span
+                            class={`${mergedClsPrefix}-input-number-suffix`}
+                          >
+                            {children}
+                          </span>
+                        )
                      }
-                      focusable={false}
-                      builtinThemeOverrides={this.buttonThemeOverrides}
-                      onClick={this.handleMinusClick}
-                      onMousedown={this.handleMinusMousedown}
-                      ref="minusButtonInstRef"
-                    >
-                      {{
-                        icon: () =>
-                          resolveSlot($slots['minus-icon'], () => [
-                            <NBaseIcon clsPrefix={mergedClsPrefix}>
-                              {{
-                                default: () => <RemoveIcon />
-                              }}
-                            </NBaseIcon>
-                          ])
-                      }}
-                   </NxButton>,
-                    <NxButton
-                      text
-                      disabled={
-                        !this.addable || this.mergedDisabled || this.readonly
-                      }
-                      focusable={false}
-                      builtinThemeOverrides={this.buttonThemeOverrides}
-                      onClick={this.handleAddClick}
-                      onMousedown={this.handleAddMousedown}
-                      ref="addButtonInstRef"
-                    >
-                      {{
-                        icon: () =>
-                          resolveSlot($slots['add-icon'], () => [
-                            <NBaseIcon clsPrefix={mergedClsPrefix}>
-                              {{
-                                default: () => <AddIcon />
-                              }}
-                            </NBaseIcon>
-                          ])
-                      }}
-                    </NxButton>
+                      return null
+                    }),
+                    this.buttonPlacement === 'right'
+                      ? renderMinusButton()
+                      : null,
+                    renderAddButton()
                  ]
                : $slots.suffix?.()
          }}
--- a/src/input-number/src/styles/input-number.cssr.ts
+++ b/src/input-number/src/styles/input-number.cssr.ts
@ -7,6 +7,6 @@ export default c([
  `),
  cB('input-number-prefix', `
    display: inline-block;
-    margin-right: 4px;
+    margin-left: 10px;
  `)
 ])