feat(InputNumber): add option to hide increment/decrement buttons

[J-Michalek]

🔗 Linked issue

Resolves: #4718

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I added a new props showButtons that add the option to hide the buttons.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[J-Michalek]

The wording in the docs could be improved and also I'm not sure about the prop name some alternatives would be hideButtons: boolean, buttons: boolean or perhaps integrate it into the increment and decrement props to allow false to be passed in and hide the button...

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4805

commit: ef6fcc2

[J-Michalek]

@benjamincanac I've addressed #4805 (comment)

I am wondering if we could get rid of incrementDisabled and decrementDisabled props in favor of increment.disabled and decrement.disabled, what do you think?

[benjamincanac]

I agree it would be better but this would cause a breaking change 😬

[benjamincanac]

This is incorrect because it depends on the size, on horizontal orientation the padding should depend on increment / decrement for right and left independently. Do we really need to reset this padding? 🤔

[J-Michalek]

I didn't realize it changes with each size 😬 I think we have to adjust it atleast for the horizontal orientation as it leaves this empty space to the left of the value. I was think that the number input without buttons should look the same as Input.

[benjamincanac]

I guess we need to play with increment: false and decrement: false in the actual compoundVariants to not add the px-* or pe-* instead.

[J-Michalek]

I've pushed the changes, Its kinda long and might be confusing tho, but I was able to achieve the same look for both orientations this way.

we could simplify it by removing this part d0b66d9#diff-6fe3c9038bd5faf484a683d874590e0f317c7027cca6f9d6451b7d67efb73b58R100-R124 , but then the inputs would have different widths:

d0b66d9

[benjamincanac]

@J-Michalek If decrement is false but increment is true we still need some padding. We need to split those px-* into individual ps-* and pe-* I think.