fix(Input): hide wrapper when type is hidden

[eduardo-faith]

🔗 Linked issue

Resolves #1784

❓ 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

In some layout, i. e. a grid with gap-4, the wrapper is still existent. Therefore there are two gaps between the previous and following visible elements.
Now the wrapping div has class 'hidden' when type="hidden". Otherwise it has the classes from ui.wrapper.

📝 Checklist

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

Sorry, I couldn't resist to try the PR. 🤓
Hope everything is according to the conventions. Don't hesitate to change anything or close the PR if I made a mistake 🙈

[Tarabass]

Works great!

I prefer class objects though for future enhancements like:

<div :class="{ 'hidden': type === 'hidden', 'ui.wrapper': type !== 'hidden' }">

But that doesn't change the behavior..

[eduardo-faith]

@Tarabass Thanks! Never seen that style before, sorry. Shall I change the code to class object?

[Tarabass]

Maybe one of the maintainers can answer that. For me it doesn't matter that much :)

[benjamincanac]

I'd like to ask, why use a UInput with a hidden type? It's main goal is for styling and icons, is there a reason to use it instead of a classic <input type="hidden">? 🤔

[eduardo-faith]

@benjamincanac In my case the value of the field has to be sent to the backend via the form. But depending on a prior input of the user the field should be visible and editable.

I was using :type="..." and thought it could be mentioned.

You can close the PR if the change is not clean code! 🤓

[benjamincanac]

The ui.wrapper contains the relative class for absolute icons underneath, did you try with icons?

[eduardo-faith]

No, I did not style the input with icons.
As I mentioned in the description, when the UInput is part of (for example) a div.grid.gap-4 the div.relative (ui.wrapper) of UInput will cause a gap between other elements - that's the root of my PR.

[eduardo-faith]

But semantically you're absolutely right, there is not much sense of using a UI library for a hidden input-field - it just felt right for me to "fix" this 😅