Performance: Use $attrs to manage styles

[codebender828]

Performance: Use $attrs to manage styles

Closes #241

Description

This pull request seeks to provide an improvement in performance in the component primitives.

After doing some investigation here, and a large portion of the performance expense has to do with how the Chakra primitives are managing their props. Because of the props architecture with Vue, quite a lot of logic runs in between merging of consumer + default props.

To improve performance we sought to use the component $attrs as opposed to props resolution.

View demo:

• CBox demo
• CPseudoBox demo

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/inz8oot5n
✅ Preview: https://chakra-ui-vue-git-refactor-primitive-performance.chakra-ui.vercel.app