Merge pull request #5515 from skdud4659/feature/hide-spin-button

feat: apply hide spin button at text-input
cloudforet-io · Jan 14, 2025 · 86e6c37 · 86e6c37
2 parents 7dbbc50 + 8c347c2
commit 86e6c37
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -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
@@ -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
@@ -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' },