feat: add number-field component

[romanslonov]

Hello,

I have implemented this feature #567.

CleanShot.2024-05-25.at.14.09.20-converted.5.mp4

This is my first take. Let's discuss it.

upd:
I found a bug that seems to be when you completely erase the value of an input that is in the form, type a new value and if you press enter, the form will be submitted but the value is not updated, the value will only be updated on the blur event. You can find same behaviour on radix-vue preview page of this component. <NumberFieldInput @keydown.enter.prevent /> this fix the issue though.

[sadeghbarati]

@romanslonov Thanks for the PR, next time please create new branch for your PRs

---

Everything looks good to me in Number Field except this behaviour in Number Field input, @zernonia

• Manually update Number Field value
• Hit up and down arrows to update the value

Number.Field.-.shadcn_vue.-.Google.Chrome.2024-05-26.09-11-47.mp4

[zernonia]

Thanks for the PR @romanslonov !
Thanks @sadeghbarati for catching that. Will create an issue for that.

Also, I kinda regret adding NumberFieldLabel component lol 😅, as it would required additional configuration if dev wanna use it with AutoForm, which will generate the label automatically.

[romanslonov]

Also, I kinda regret adding NumberFieldLabel component lol 😅, as it would required additional configuration if dev wanna use it with AutoForm, which will generate the label automatically.

Yes, what if you remove NumberFieldLabel component and let users to use common <Label /> similar as we do it for <Input />, <Textarea /> etc.

[zernonia]

Also, I kinda regret adding NumberFieldLabel component lol 😅, as it would required additional configuration if dev wanna use it with AutoForm, which will generate the label automatically.

Yes, what if you remove NumberFieldLabel component and let users to use common <Label /> similar as we do it for <Input />, <Textarea /> etc.

Yup that's what I should've done hahaha.. Since the NumberFieldLabel is just wrapper for Label anyway.

[romanslonov]

Also, I kinda regret adding NumberFieldLabel component lol 😅, as it would required additional configuration if dev wanna use it with AutoForm, which will generate the label automatically.

Yes, what if you remove NumberFieldLabel component and let users to use common <Label /> similar as we do it for <Input />, <Textarea /> etc.

Yup that's what I should've done hahaha.. Since the NumberFieldLabel is just wrapper for Label anyway.

I will submit a PR to radix-vue to remove it, and then update this PR as well

[sadeghbarati]

Let's wait for new Number Field fixes to be released, then we can merge this