Button to reset input number to default value

[robigan]

Description

It would be cool if input number could have a button that can be shown beside either the increment/decrement button which, upon clicking it, resets the input back to its default value.

This is useful in forms whereby there may already be a sensibly inferred default for a value, but I want to allow the user to override that value without "getting in the way", and then if they want to change that value back to its default, the press of this reset button will reset the input back to its predefined default.

As of right now, I've used on a form field's label slot, a checkbox, that when toggled, enables my input and lets the user override the value, but this requires a click of the toggle, and then incrementing/decrementing the value.
But I'd prefer my UI to adapt to the user's needs on the fly, so say they want to change the value, they press the increment/decrement buttons, the input number's border changes to an active color like primary through the highlight option, thus indicating a change/override. Where this comes in useful, is once the user wants to revert the value back to default, the revert button in one click would revert the input's border back to the default secondary color (with highlight set to false) and the value displayed would revert to the default.

The reason for opening this PR is that I've tried implementing this using the increment slot in InputNumber, but I found myself having to copy a lot of the logic from InputNumber just to replicate the increment button, to then have my custom reset button and to get the Reka UI NumberFieldIncrement to pass the props to the right button, and it was starting to get clunky, so I thought about opening this issue to discuss this implementation here.

Additional context

I'll attach some media tomorrow showing what I mean.

[J-Michalek]

@robigan Hello, can't you use UButtonGroup for this?

<script setup lang="ts">
const modelValue = ref(0)
</script>

<template>
  <UButtonGroup>
    <UInputNumber v-model="modelValue" />
    <UButton color="neutral" variant="outline" @click="modelValue = 0">
      Reset
    </UButton>
  </UButtonGroup>
</template>

[robigan]

Hmm, that could work with what I was thinking about.

I have had one doubt (which may be better in another issue), but I've had difficulty getting the props for the increment button when overriding it with a slot and trying to recreate the increment button. I believe that most of the library is built like this, but is there a reason why the props for the increment/decrement buttons are not passed to the slot(s) as props either? It would really help with adding functionality to components without copying logic in other components.

[J-Michalek]

Sounds like a different issue, which props would you like to receive in the slot props?

[J-Michalek]

I'm gonna close this issue, if you have a need for props to be exposed on the increment/decrement slots, please create a new issue.

[robigan]

I'm gonna close this issue, if you have a need for props to be exposed on the increment/decrement slots, please create a new issue.

Will do, sorry for the late reply, I'm on holiday with my girlfriend right now