Add scroll area element

[eli-kha]

Scroll Area is a Quasar component that offers a neat way of customizing the scrollbars by encapsulating your content.

It is particularly useful when you want to allow large content in a smaller element.
Some added benefits are better controls over the scroll interface and programmatic access to the scroll movement.

This PR introduces a new element with matching CSS definitions based on the feedback I got here.
In addition, I want to expose the scroll event and the setScrollPosition and setScrollPercentage

EDIT:The event and functions are not working ATM.

[falkoschindler]

@eli-kha Thanks for this PR!
But why did you close it? Looks like you changed your mind and don't want to have this reviewed and merged.

[eli-kha]

@falkoschindler I wasn't sure if it was better to seek guidance in a PR or the discussion.
I updated the comment and reopened the PR.

The code is currently broken and I couldn't get the scroll event to trigger a callback in my testing code.

Some guidance on how to get it to work or what to test would be much appreciated

[eli-kha]

I resolved the event issues and feel ready for a proper review

[falkoschindler]

@eli-kha Thanks again for this pull request!

I updated the code here and there (see 2d62887) and merged it. 🙂

• Now the ScrollEventArguments follow the Python naming convention instead of the original Quasar attribute names. This makes the scroll area implementation a bit longer, but feels more natural for the user.
• The _handle_scroll method should use handle_event from the "events" module. This allows using async handlers and automatically uses the right UI context, e.g. when adding new UI elements.
• I renamed the set_scroll_position to the simpler scroll_to. Furthermore I introduced separate parameters pixels and percent to distinguish both units. Using the type alone seems a bit unreliable.
• The default size of 200x200px seems a bit arbitrary. But I understand that giving no initial size causes the scroll area to collapse to zero size, which might confuse the user. So I decided to use the same somewhat arbitrary values of 100% width and 16rem height like for ui.aggrid.