feat: separate component logic, add <MotionGroup> and tests

[BobbieGoede]

🔗 Linked issue

• feat(docs): algolia doc search #45
• chore(deps): update dependencies #186

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSDoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ 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

This is both the continuation and replacement of #186, after a closer look it appeared that the <Motion> component broke by the dependency updates. As mentioned there, these changes resolve #45, and remove a type (SVGAttributes in MotoonProperties type) of which I'm not sure what the impact is on existing projects.

Since the <Motion> component isn't really documented at the moment I figured it would be safe to give it a refactor and see if some changes could be made. I separated its logic and added another component <MotionGroup>, this component is used when wanting to apply motion configuration on its child nodes/slots, which I removed from the <Motion> component, this makes it possible to no longer require is property as well. Please let me know if you have any feedback!

I spent some time to figure out how to test both the v-motion directive as well as the <Motion> component, hopefully we can expand on it more to keep things stable as we make changes.

📝 Checklist

• I have linked an issue or discussion.
• I have added tests (if possible).
• I have updated the documentation accordingly.

[Tahul]

This is really great ; amazing work as always @BobbieGoede :)

Should we document the component now that you even tested it?

[BobbieGoede]

This is really great ; amazing work as always @BobbieGoede :)

Should we document the component now that you even tested it?

@Tahul
I would like to fix the visibility variant tests before documenting it, which I'll do in a separate PR!

Also, while I was writing tests I noticed the onComplete function is called on completion for each animated property (see https://github.com/vueuse/motion/pull/187/files#diff-a7b34acf51de8436e2ca88b53a6aedbe534a5e0fba8949e24a8a820157843a6cR42-R46), shouldn't this happen just once for the variant itself?