From 8c347c2d83c22de110ae5205208d41854fcb182d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?NaYeong=2CKim=28=EA=B9=80=EB=82=98=EC=98=81=29?=
 <nayeongkim@megazone.com>
Date: Tue, 14 Jan 2025 14:45:45 +0900
Subject: [PATCH] feat: apply hide spin button at text-input

Signed-off-by: NaYeong,Kim <nayeongkim@megazone.com>
---
 .../input/text-input/PTextInput.stories.ts    |  1 +
 .../controls/input/text-input/PTextInput.vue  | 19 ++++++++++++++++++-
 .../controls/input/text-input/story-helper.ts | 16 ++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts b/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
index 0833192a12..014781feb1 100644
--- a/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
+++ b/packages/mirinae/src/controls/input/text-input/PTextInput.stories.ts
@@ -56,6 +56,7 @@ const Template: Story = {
                         :show-password="showPassword"
                         :appearance-type="appearanceType"
                         :page-size="pageSize"
+                        :hide-spin-button="hideSpinButton"
             >
                 <template v-if="inputRightSlot" #input-right>
                     <span v-html="inputRightSlot"></span>
diff --git a/packages/mirinae/src/controls/input/text-input/PTextInput.vue b/packages/mirinae/src/controls/input/text-input/PTextInput.vue
index 75ab9991eb..8452bfe69a 100644
--- a/packages/mirinae/src/controls/input/text-input/PTextInput.vue
+++ b/packages/mirinae/src/controls/input/text-input/PTextInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-on-click-outside="() => hideMenu(false)"
          class="p-text-input"
-         :class="{block, focused: isInputFocused, [size]: true}"
+         :class="{block, focused: isInputFocused, [size]: true, 'hide-spin-button': hideSpinButton}"
     >
         <div ref="targetRef"
              class="input-container"
@@ -170,6 +170,7 @@ interface TextInputProps {
     appearanceType?: InputAppearanceType;
     pageSize?: number;
     skipMaskToggleTabIndex?: boolean;
+    hideSpinButton?: boolean;
 }
 
 export default defineComponent<TextInputProps>({
@@ -232,6 +233,10 @@ export default defineComponent<TextInputProps>({
             type: Array as PropType<InputItem[]>,
             default: () => [],
         },
+        hideSpinButton: {
+            type: Boolean,
+            default: false,
+        },
         /* context menu fixed style props */
         visibleMenu: {
             type: Boolean,
@@ -652,6 +657,18 @@ export default defineComponent<TextInputProps>({
             flex-shrink: 0;
         }
     }
+    &.hide-spin-button {
+        input[type="number"] {
+            -moz-appearance: textfield;
+            appearance: textfield;
+        }
+
+        input[type="number"]::-webkit-outer-spin-button,
+        input[type="number"]::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
     .p-context-menu {
         z-index: 1000;
     }
diff --git a/packages/mirinae/src/controls/input/text-input/story-helper.ts b/packages/mirinae/src/controls/input/text-input/story-helper.ts
index 9d314299f1..1230cdc35a 100644
--- a/packages/mirinae/src/controls/input/text-input/story-helper.ts
+++ b/packages/mirinae/src/controls/input/text-input/story-helper.ts
@@ -51,6 +51,7 @@ export const getTextInputArgs = (): Args => {
         rightExtraSlot: '',
         inputRightSlot: '',
         rightEdgeSlot: '',
+        hideSpinButton: false,
     };
 };
 
@@ -216,6 +217,21 @@ export const getTextInputArgTypes = (): ArgTypes => {
             },
             control: 'object',
         },
+        hideSpinButton: {
+            name: 'hideSpinButton',
+            type: { name: 'boolean' },
+            description: 'Whether to hide spin button at number type or not.',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'props',
+                defaultValue: {
+                    summary: 'false',
+                },
+            },
+            control: 'boolean',
+        },
         visibleMenu: {
             name: 'visibleMenu',
             type: { name: 'boolean' },