docs: updtae docs components to use attrs api

Author: codebender828

packages/chakra-ui-core/src/CAccordion/CAccordion.js

@@ -38,6 +38,7 @@ import CIcon from '../CIcon'
  * @see Docs https://vue.chakra-ui.com/accordion
  */
 const CAccordion = {
+  name: 'CAccordion',
   mixins: [createStyledAttrsMixin('CAccordion')],
   props: {
     allowMultiple: Boolean,
@@ -150,6 +151,7 @@ const CAccordion = {
  */
 
 const CAccordionItem = {
+  name: 'CAccordionItem',
   mixins: [createStyledAttrsMixin('CAccordionItem', true)],
   props: {
     isOpen: {
@@ -355,6 +357,7 @@ const CAccordionPanel = {
  * @see Docs https://vue.chakra-ui.com/accordion
  */
 const CAccordionIcon = {
+  name: 'CAccordionIcon',
   mixins: [createStyledAttrsMixin('CAccordionIcon')],
   inject: ['$AccordionContext'],
   props: iconProps,

packages/chakra-ui-core/src/CAlert/CAlert.js

@@ -36,6 +36,7 @@ export const statuses = {
  * @see Docs https://vue.chakra-ui.com/alert
  */
 const CAlert = {
+  name: 'CAlert',
   mixins: [createStyledAttrsMixin('CAlert')],
   provide () {
     return {

packages/chakra-ui-core/src/CAspectRatioBox/CAspectRatioBox.js

@@ -25,6 +25,7 @@ import { cloneVNode, createStyledAttrsMixin } from '../utils'
  * @see Docs https://vue.chakra-ui.com/aspectratiobox
  */
 const CAspectRatioBox = {
+  name: 'CAspectRatioBox',
   mixins: [createStyledAttrsMixin('CAspectRatioBox', true)],
   props: {
     ratio: {

packages/chakra-ui-core/src/CAvatar/CAvatar.js

@@ -37,6 +37,7 @@ const getInitials = (name) => {
  * @see Docs https://vue.chakra-ui.com/avatar
  */
 const CAvatarBadge = {
+  name: 'CAvatarBadge',
   mixins: [createStyledAttrsMixin('CAvatarBadge')],
   props: {
     size: [String, Number, Array]
@@ -80,6 +81,7 @@ const CAvatarBadge = {
  * @see Docs https://vue.chakra-ui.com/avatar
  */
 const CAvatarName = {
+  name: 'CAvatarName',
   mixins: [createStyledAttrsMixin('CAvatarName')],
   props: {
     name: [String, Array],
@@ -157,6 +159,7 @@ const CDefaultAvatar = {
  * @see Docs https://vue.chakra-ui.com/avatar
  */
 const CAvatar = {
+  name: 'CAvatar',
   mixins: [createStyledAttrsMixin('CAvatar')],
   props: {
     size: {

packages/chakra-ui-core/src/CBadge/CBadge.js

@@ -18,6 +18,7 @@ import useBadgeStyles from './utils/badge.styles'
  * @see Docs https://vue.chakra-ui.com/badge
  */
 const CBadge = {
+  name: 'CBadge',
   mixins: [createStyledAttrsMixin('CBadge')],
   props: {
     variant: {

packages/chakra-ui-core/src/CBreadcrumb/CBreadcrumb.js

@@ -29,6 +29,7 @@ import CLink from '../CLink'
 * @see Docs https://vue.chakra-ui.com/breadcrumb
 */
 const CBreadcrumbSeparator = {
+  name: 'CBreadcrumbSeparator',
   mixins: [createStyledAttrsMixin('CBreadcrumbSeparator')],
   props: {
     spacing: [String, Number, Array],
@@ -82,6 +83,7 @@ const Span = {
 * @see Docs https://vue.chakra-ui.com/breadcrumb
 */
 const CBreadcrumbLink = {
+  name: 'CBreadcrumbLink',
   mixins: [createStyledAttrsMixin('CBreadcrumbLink', true)],
   props: {
     isCurrentPage: Boolean,
@@ -113,6 +115,7 @@ const CBreadcrumbLink = {
 * @see Docs https://vue.chakra-ui.com/breadcrumb
 */
 const CBreadcrumbItem = {
+  name: 'CBreadcrumbItem',
   mixins: [createStyledAttrsMixin('CBreadcrumbItem')],
   props: {
     isCurrentPage: Boolean,
@@ -183,6 +186,7 @@ const CBreadcrumbItem = {
 * @see Docs https://vue.chakra-ui.com/breadcrumb
 */
 const CBreadcrumb = {
+  name: 'CBreadcrumb',
   mixins: [createStyledAttrsMixin('CBreadcrumb')],
   props: {
     spacing: {

packages/chakra-ui-core/src/CButton/CButton.js

@@ -28,6 +28,7 @@ import { buttonProps } from './utils/button.props'
  * @see Docs https://vue.chakra-ui.com/button
  */
 const CButtonIcon = {
+  name: 'CBreadcrumb',
   mixins: [createStyledAttrsMixin('CButtonIcon', true)],
   props: {
     icon: {
@@ -77,6 +78,7 @@ const CButtonIcon = {
  * @see Docs https://vue.chakra-ui.com/button
  */
 const CButton = {
+  name: 'CButton',
   mixins: [createStyledAttrsMixin('CButton', true)],
   props: buttonProps,
   computed: {
@@ -100,6 +102,7 @@ const CButton = {
   render (h) {
     return h(this.as, {
       class: this.className,
+      props: this.$props,
       attrs: {
         type: this.type,
         tabIndex: 0,

packages/chakra-ui-core/src/CCheckbox/CCheckbox.js

@@ -27,6 +27,7 @@ import useCheckboxStyle from './utils/checkbox.styles'
  * @see Docs https://vue.chakra-ui.com/checkbox
  */
 const CCheckbox = {
+  name: 'CCheckbox',
   mixins: [createStyledAttrsMixin('CCheckbox')],
   model: {
     prop: 'isChecked',

packages/chakra-ui-core/src/CCheckboxGroup/CCheckboxGroup.js

@@ -24,6 +24,7 @@ import CBox from '../CBox'
  * @see Docs https://vue.chakra-ui.com/button
  */
 const CCheckboxGroup = {
+  name: 'CCheckboxGroup',
   mixins: [createStyledAttrsMixin('CCheckboxGroup')],
   model: {
     prop: 'value',

packages/chakra-ui-core/src/CCircularProgress/CCircularProgress.js

@@ -21,6 +21,7 @@ import { getComputedProps } from './utils/circularprogress.styles'
  * @see Docs https://vue.chakra-ui.com/circularprogress
  */
 const CCircularProgressLabel = {
+  name: 'CCircularProgressLabel',
   mixins: [createStyledAttrsMixin('CCircularProgressLabel')],
   computed: {
     componentStyles () {