feat(input-number): add justify-icon prop (#2723)

* 🐛 fix(input-number): add `justify-icon` props justify-icon props can make input-number control(-+) icon stay around input ex: [- {number} +] * Update src/input-number/src/InputNumber.tsx * Update src/input-number/src/InputNumber.tsx Co-authored-by: 07akioni <[email protected]>
tusen-ai · May 22, 2022 · 3d7cbf3 · 3d7cbf3
1 parent 19844b9
commit 3d7cbf3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 1 deletion.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -153,6 +153,8 @@
 
 - `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).

diff --git a/src/input-number/demos/enUS/index.demo-entry.md b/src/input-number/demos/enUS/index.demo-entry.md
@@ -8,6 +8,7 @@ If you just want a number, this is for you.
 basic.vue
 disabled.vue
 event.vue
+justify-icon.vue
 icon.vue
 loading.vue
 min-max.vue

diff --git a/src/input-number/demos/enUS/justify-icon.demo.vue b/src/input-number/demos/enUS/justify-icon.demo.vue
@@ -0,0 +1,29 @@
+<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>
+      <template #prefix>
+        $
+      </template>
+    </n-input-number>
+    <n-input-number v-model:value="value" justify-icon>
+      <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>
diff --git a/src/input-number/src/InputNumber.tsx b/src/input-number/src/InputNumber.tsx
@@ -69,6 +69,10 @@ const inputNumberProps = {
     type: Boolean,
     default: true
   },
+  justifyIcon: {
+    type: Boolean,
+    default: false
+  },
   readonly: Boolean,
   clearable: Boolean,
   keyboard: {
@@ -562,7 +566,7 @@ export default defineComponent({
                             </NBaseIcon>
                           ])
                       }}
-                    </NxButton>,
+                   </NxButton>,
                     <NxButton
                       text
                       disabled={

diff --git a/src/input-number/src/styles/input-number.cssr.ts b/src/input-number/src/styles/input-number.cssr.ts
@@ -4,5 +4,9 @@ export default c([
   cB('input-number-suffix', `
     display: inline-block;
     margin-right: 10px;
+  `),
+  cB('input-number-prefix', `
+    display: inline-block;
+    margin-right: 4px;
   `)
 ])