Add keepMounted and itemProps to Vue API to enable sticky groups

[AmitJoki]

I wanted to use virtua for the usecase of sticky groups + virtualized scrolls in Vue but found that the APIs for that is not yet there.

I have added keepMounted from the React API and an additional itemProps to facilitate the Sticky Groups in Vue.

I have also added a story for the same.

If the PR is okay in its direction, I can add some documentation as well if needed.

[inokawa]

Hi, thanks for the PR.

The docs will be autogenerated from JSDoc so you don't need to modify /docs dir.

[inokawa]

Could you try existed item prop instead of adding new prop? I don't think we need 2 props for 1 purpose.

Suggested change

	/**
	* A function that provides properties/attributes for item element
	*/
	itemProps: Function as PropType<ItemProps>,

[AmitJoki]

Refs work a bit differently in Vue https://vuejs.org/guide/essentials/template-refs and there's no equivalent of forwardRef

Also, on native elements, the ref correctly points to the DOM element but for a Vue component, the structure changes and the ref points to the component's instance and you have to use .$el to actually get the DOM element.

Also while JSX is "supported", SFCs are the first-class way of building Vue applications and there refs are extracted from the template.

The item prop only accepts the native element and not user component like it does in React API perhaps for the reasons laid out above.

[inokawa]

Thanks for the replay.

Also while JSX is "supported", SFCs are the first-class way of building Vue applications and there refs are extracted from the template.

Okay, we have a plan to migrate to SFC (#556). So we need to complete it at first, and change item prop to accept element and component. You mean it's possible with SFC, right?

[AmitJoki]

@inokawa yes it is possible. Here's how one could do it using ref function: Playground

VirtualItem component accepts item prop which can be a string for native elements or the component itself. The setRef function will distinguish between the two and give you the correct DOM element be it a native element or a user component.