From ec2c785cf4cc3b87b901f1ea0a436c0e3b035a52 Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Fri, 14 Jul 2023 10:51:08 +0800
Subject: [PATCH] feat(counter&number-input): #2537

---
 .changeset/orange-colts-brush.md              |  5 +++++
 .changeset/slimy-walls-wash.md                |  6 ++++++
 packages/ui/counter/src/use-counter.ts        | 21 +++++++++++--------
 .../number-input/src/styles/number-input.scss |  4 ++++
 .../ui/number-input/stories/basic.stories.tsx |  1 +
 5 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/orange-colts-brush.md
 create mode 100644 .changeset/slimy-walls-wash.md

diff --git a/.changeset/orange-colts-brush.md b/.changeset/orange-colts-brush.md
new file mode 100644
index 000000000..ca383c733
--- /dev/null
+++ b/.changeset/orange-colts-brush.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Counter NumberInput feat: 支持 placeholder
diff --git a/.changeset/slimy-walls-wash.md b/.changeset/slimy-walls-wash.md
new file mode 100644
index 000000000..443ae9c29
--- /dev/null
+++ b/.changeset/slimy-walls-wash.md
@@ -0,0 +1,6 @@
+---
+"@hi-ui/counter": patch
+"@hi-ui/number-input": patch
+---
+
+feat: 支持 placeholder
diff --git a/packages/ui/counter/src/use-counter.ts b/packages/ui/counter/src/use-counter.ts
index 68a656102..b52e2a2e3 100644
--- a/packages/ui/counter/src/use-counter.ts
+++ b/packages/ui/counter/src/use-counter.ts
@@ -35,6 +35,7 @@ export const useCounter = ({
   invalid = false,
   formatter,
   parser,
+  placeholder,
   ...rest
 }: UseCounterProps) => {
   const min = minProp ?? Number.MIN_SAFE_INTEGER
@@ -316,6 +317,7 @@ export const useCounter = ({
       tabIndex,
       autoFocus: autoFocus,
       disabled: disabled,
+      placeholder: placeholder,
       onChange: onInputChange,
       onFocus: onInputFocus,
       onBlur: onInputBlur,
@@ -323,22 +325,23 @@ export const useCounter = ({
       onWheel: onInputWheel,
     }
   }, [
-    autoFocus,
-    disabled,
+    formatter,
     focused,
     formattedValue,
-    formatter,
-    maxProp,
+    inputValue,
+    prefixCls,
+    parsedValue,
     minProp,
-    onInputBlur,
+    maxProp,
+    tabIndex,
+    autoFocus,
+    disabled,
+    placeholder,
     onInputChange,
     onInputFocus,
+    onInputBlur,
     onInputKeyDown,
     onInputWheel,
-    parsedValue,
-    prefixCls,
-    tabIndex,
-    inputValue,
   ])
 
   const getMinusButtonProps = useCallback(() => {
diff --git a/packages/ui/number-input/src/styles/number-input.scss b/packages/ui/number-input/src/styles/number-input.scss
index 38178d565..f7a93b4d2 100644
--- a/packages/ui/number-input/src/styles/number-input.scss
+++ b/packages/ui/number-input/src/styles/number-input.scss
@@ -62,6 +62,10 @@ $prefix:  '#{$component-prefix}-number-input' !default;
     color: inherit;
     text-align: left;
     padding: 0 use-spacing(6);
+
+    &::placeholder {
+      color: use-color('gray', 400);
+    }
   }
 
   &__suffix {
diff --git a/packages/ui/number-input/stories/basic.stories.tsx b/packages/ui/number-input/stories/basic.stories.tsx
index a8fa522f5..6231fbf3c 100644
--- a/packages/ui/number-input/stories/basic.stories.tsx
+++ b/packages/ui/number-input/stories/basic.stories.tsx
@@ -14,6 +14,7 @@ export const Basic = () => {
           autoFocus
           defaultValue={5}
           min={1}
+          placeholder="请输入数字"
           onChange={(v) => console.log('onChange', v)}
         />
       </div>