feat(InputNumber): add showButtons prop

docs/content/3.components/input-number.md

@@ -216,6 +216,23 @@ props:
 ---
 ::
 
+### Buttons
+
+Use the `showButtons` prop to configure the visibility of increment and decrement buttons.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 0
+  showButtons: false
+  orientation: 'horizontal'
+---
+::
+
 ## Examples
 
 ### With decimal format

playground/app/pages/components/input-number.vue

@@ -56,6 +56,19 @@
         orientation="vertical"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <UInputNumber
+        class="w-48"
+        placeholder="No buttons horizontal"
+        :show-buttons="false"
+      />
+      <UInputNumber
+        class="w-48"
+        placeholder="No buttons vertical"
+        orientation="vertical"
+        :show-buttons="false"
+      />
+    </div>
   </div>
 </template>
 

src/runtime/components/InputNumber.vue

@@ -51,6 +51,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrementIcon?: string
   /** Disable the decrement button. */
   decrementDisabled?: boolean
+  showButtons?: boolean
   autofocus?: boolean
   autofocusDelay?: number
   /**
@@ -90,7 +91,8 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
   disabledIncrement: false,
-  disabledDecrement: false
+  disabledDecrement: false,
+  showButtons: true
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
@@ -112,7 +114,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   size: inputSize.value,
   highlight: highlight.value,
   orientation: props.orientation,
-  buttonGroup: orientation.value
+  buttonGroup: orientation.value,
+  showButtons: props.showButtons
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -171,7 +174,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="showButtons" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -186,7 +189,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="showButtons" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton

src/theme/input-number.ts

@@ -47,6 +47,9 @@ export default (options: Required<ModuleOptions>) => {
       },
       highlight: {
         true: ''
+      },
+      showButtons: {
+        false: ''
       }
     },
     compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -105,7 +108,17 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'vertical',
       size: 'xl',
       class: 'pe-11'
-    }],
+    }, {
+      orientation: 'vertical',
+      showButtons: false,
+      class: 'pe-2.5'
+    },
+    {
+      orientation: 'horizontal',
+      showButtons: false,
+      class: 'px-2.5 text-start '
+    }
+    ],
     defaultVariants: {
       size: 'md',
       color: 'primary',

test/components/InputNumber.spec.ts

@@ -29,6 +29,7 @@ describe('InputNumber', () => {
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'absolute' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
+    ['without buttons', { props: { showButtons: false } }],
     // Slots
     ['with increment slot', { slots: { increment: () => '+' } }],
     ['with decrement slot', { slots: { decrement: () => '-' } }]

test/components/__snapshots__/InputNumber-vue.spec.ts.snap

@@ -385,3 +385,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;

test/components/__snapshots__/InputNumber.spec.ts.snap

@@ -385,3 +385,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;