Adding support for transitions and multiple sources
About this release
It's been a while, hasn't it? I'm grateful for everyone's patience with this release. I know that a lot of people requested the features we are now introducing, and I know you guys had to wait quite a while to get them.
I learned that it can be really challenging to create a thoroughly tested and documented release even for a relatively small library like this, when you have other work going on as well and you have problems to find a decent time slot that you can fully dedicate to get the release done.
I found that time last weekend, so here it is.
Things we added
Better Transition support (#72)
You could always do this:
<portal to="destination">
<transition name="fade">
<p v-if="hasMessages" key="1">You have {{messages.length}} new messages</p>
<p v-else key="2">No unread messages</p>
</transition>
</portal>But now, you can also define a transition on the <portal-target>:
<portal-target
:transition="{ name: 'fade'}"
:transition-events="{ enter: onEnterCallBack }"
/>Multiple sources (#80, @eschalks)
While it was always possible to switch between multiple <portal> components as the source for one <portal-target>, the target could only ever render the content from one of them the same time.
Now, <portal-target> has a multiple prop, which activates support for rendering content from multiple <portal> components at the same time.
You can use the order prop on the <portal> components to control the order of the content in the <portal-target>:
Source
<portal name="destination" :order="2">
<p>some content</p>
</portal>
<portal name="destination" :order="1">
<p>some other content</p>
</portal>
<portal-target name="destination" multiple />Result
<div clas="vue-portal-target">
<p>some other content</p>
<p>some content</p>
</div>A special thanks to @eschalks who wrote a great PR for this and was very patient with me, as I took my sweet time to merge his PR and finally release it today.