refactor(tabs): use aattrs api

Author: codebender828

.storybook/config.js

@@ -1,6 +1,7 @@
 import { configure, addDecorator, addParameters } from '@storybook/vue';
 import Vue from 'vue'
 import VueLive from 'vue-live'
+import Lorem from 'vue-lorem-ipsum'
 import Chakra, { CThemeProvider, CColorModeProvider, CReset } from '../packages/chakra-ui-core/src'
 import Canvas from './components/Canvas.vue'
 import theme from '../packages/chakra-ui-core/src/lib/theme'
@@ -84,6 +85,8 @@ addDecorator(() => ({
 // For playground
 Vue.use(VueLive)
 
+Vue.component('Lorem', Lorem)
+
 function loadStories() {
   const req = require.context('../packages/chakra-ui-core/src', true, /\.stories\.(js|mdx)$/);
   req.keys().forEach(filename => req(filename));

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

@@ -7,13 +7,7 @@
  * @see Source   https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CTabs/CTabs.js
  */
 
-import { baseProps } from '../config'
-import { useVariantColorWarning, isDef, useId, forwardProps, cleanChildren, cloneVNodeElement } from '../utils'
-import styleProps from '../config/props'
-
-import CFlex from '../CFlex'
-import CBox from '../CBox'
-import CPseudoBox from '../CPseudoBox'
+import { useVariantColorWarning, isDef, useId, cleanChildren, cloneVNodeElement, createStyledAttrsMixin } from '../utils'
 import { useTabListStyle, useTabStyle } from './utils/tabs.styles'
 
 /**
@@ -25,10 +19,8 @@ import { useTabListStyle, useTabStyle } from './utils/tabs.styles'
  * @see Docs https://vue.chakra-ui.com/tabs
  */
 const CTabs = {
-  name: 'CTabs',
-  inject: ['$chakraTheme', '$chakraColorMode'],
+  mixins: [createStyledAttrsMixin('CTabs')],
   props: {
-    ...baseProps,
     index: Number,
     defaultIndex: Number,
     isManual: Boolean,
@@ -87,12 +79,6 @@ const CTabs = {
         set: this.set
       }
     },
-    theme () {
-      return this.$chakraTheme()
-    },
-    colorMode () {
-      return this.$chakraColorMode()
-    },
     isControlled () {
       return isDef(this.index)
     },
@@ -180,11 +166,10 @@ const CTabs = {
     }
   },
   render (h) {
-    return h(CBox, {
-      props: forwardProps(this.$props),
-      attrs: {
-        'data-chakra-component': 'CTabs'
-      }
+    return h(this.as, {
+      class: [this.className],
+      attrs: this.computedAttrs,
+      on: this.computedListeners
     }, this.$slots.default)
   }
 }
@@ -198,9 +183,8 @@ const CTabs = {
  * @see Docs https://vue.chakra-ui.com/tabs
  */
 const CTabList = {
-  name: 'CTabList',
-  props: baseProps,
-  inject: ['$TabContext', '$chakraTheme', '$chakraColorMode'],
+  mixins: [createStyledAttrsMixin('CTabList')],
+  inject: ['$TabContext'],
   data () {
     return {
       allNodes: {},
@@ -212,20 +196,17 @@ const CTabList = {
     context () {
       return this.$TabContext()
     },
-    theme () {
-      return this.$chakraTheme()
-    },
-    colorMode () {
-      return this.$chakraColorMode()
-    },
-    tabListStyleProps () {
+    componentStyles () {
       const { align, variant, orientation } = this.context
-      return useTabListStyle({
-        theme: this.theme,
-        align,
-        orientation,
-        variant
-      })
+      return {
+        display: 'flex',
+        ...useTabListStyle({
+          theme: this.theme,
+          align,
+          orientation,
+          variant
+        })
+      }
     },
     enabledSelectedIndex () {
       const { selectedIndex } = this.context
@@ -329,17 +310,15 @@ const CTabList = {
       .map((child, index) => (child.componentOptions.propsData.isDisabled === true ? null : index))
       .filter(index => index != null)
 
-    return h(CFlex, {
+    return h(this.as, {
+      class: [this.className],
       attrs: {
         role: 'tablist',
         'aria-orientation': orientation,
-        'data-chakra-component': 'CTabList'
-      },
-      props: {
-        ...this.tabListStyleProps,
-        ...forwardProps()
+        ...this.computedAttrs
       },
-      nativeOn: {
+      on: {
+        ...this.computedListeners,
         keydown: this.handleKeyDown
       }
     }, clones)
@@ -355,46 +334,40 @@ const CTabList = {
  * @see Docs https://vue.chakra-ui.com/tabs
  */
 const CTab = {
-  name: 'CTab',
-  inject: ['$chakraTheme', '$chakraColorMode', '$TabContext'],
+  mixins: [createStyledAttrsMixin('CTab', true)],
+  inject: ['$TabContext'],
   props: {
-    ...styleProps,
     isSelected: Boolean,
     isDisabled: Boolean,
-    id: String
+    id: String,
+    as: {
+      type: [String, Object],
+      default: 'button'
+    }
   },
   computed: {
     context () {
       return this.$TabContext()
     },
-    tabStyleProps () {
+    componentStyles () {
       const { color, isFitted, orientation, size, variant } = this.context
-      const styles = useTabStyle({
-        colorMode: this.colorMode,
-        theme: this.theme,
-        color,
-        isFitted,
-        orientation,
-        size,
-        variant
-      })
-      return styles
-    },
-    theme () {
-      return this.$chakraTheme()
-    },
-    colorMode () {
-      return this.$chakraColorMode()
+      return {
+        outline: 'none',
+        ...useTabStyle({
+          colorMode: this.colorMode,
+          theme: this.theme,
+          color,
+          isFitted,
+          orientation,
+          size,
+          variant
+        })
+      }
     }
   },
   render (h) {
-    return h(CPseudoBox, {
-      props: {
-        outline: 'none',
-        as: 'button',
-        ...this.tabStyleProps,
-        ...forwardProps(this.$props)
-      },
+    return h(this.as, {
+      class: [this.className],
       attrs: {
         role: 'tab',
         tabIndex: this.isSelected ? 0 : -1,
@@ -404,8 +377,9 @@ const CTab = {
         'aria-disabled': this.isDisabled,
         'aria-selected': this.isSelected,
         'aria-controls': `panel:${this.id}`,
-        'data-chakra-component': 'CTab'
-      }
+        ...this.computedAttrs
+      },
+      on: this.computedListeners
     }, this.$slots.default)
   }
 }
@@ -419,25 +393,25 @@ const CTab = {
  * @see Docs https://vue.chakra-ui.com/tabs
  */
 const CTabPanel = {
-  name: 'CTabPanel',
+  mixins: [createStyledAttrsMixin('CTabPanel')],
   props: {
-    ...baseProps,
     isSelected: Boolean,
     selectedPanelNode: Object,
     id: String
   },
   render (h) {
-    return h(CBox, {
-      props: forwardProps(this.$props),
+    return h(this.as, {
+      class: [this.className],
       attrs: {
         role: 'tabpanel',
         tabIndex: -1,
         'aria-labelledby': `tab:${this.id}`,
         hidden: !this.isSelected,
         id: `panel:${this.id}`,
         outline: 0,
-        'data-chakra-component': 'CTabPanel'
-      }
+        ...this.computedAttrs
+      },
+      on: this.computedListeners
     }, this.$slots.default)
   }
 }
@@ -451,9 +425,8 @@ const CTabPanel = {
  * @see Docs https://vue.chakra-ui.com/tabs
  */
 const CTabPanels = {
-  name: 'CTabPanels',
+  mixins: [createStyledAttrsMixin('CTabPanels')],
   inject: ['$TabContext'],
-  props: baseProps,
   computed: {
     context () {
       return this.$TabContext()
@@ -470,20 +443,22 @@ const CTabPanels = {
     const validChildren = cleanChildren(this.$slots.default)
 
     const clones = validChildren.map((child, index) => {
+      const isSelected = isManual ? index === manualIndex : index === selectedIndex
       return cloneVNodeElement(child, {
         props: {
-          isSelected: isManual ? index === manualIndex : index === selectedIndex,
+          isSelected,
           id: `${id}-${index}`
         }
       }, h)
     })
 
-    return h(CBox, {
-      props: forwardProps(this.$props),
+    return h(this.as, {
+      class: [this.className],
       attrs: {
         tabIndex: -1,
-        'data-chakra-component': 'CTabPanels'
-      }
+        ...this.computedAttrs
+      },
+      on: this.computedListeners
     }, clones)
   }
 }

packages/chakra-ui-core/src/CTabs/CTabs.stories.js

@@ -5,7 +5,7 @@ storiesOf('UI | Tabs', module)
   .add('Basic Usage', () => ({
     components: { CBox, CTabs, CTabList, CTab, CTabPanels, CTabPanel },
     template: `
-      <CBox w="600px">
+      <CBox w="600px" h="500px">
         <CTabs>
           <CTabList>
             <CTab>One</CTab>
@@ -14,14 +14,23 @@ storiesOf('UI | Tabs', module)
           </CTabList>
 
           <CTabPanels>
-            <CTabPanel>
-              <p>one!</p>
-            </CTabPanel>
-            <CTabPanel>
-              <p>two!</p>
-            </CTabPanel>
-            <CTabPanel>
-              <p>three!</p>
+            <CTabPanel p="4">
+              <p v-chakra font-size="xl" font-weight="bold">
+                <lorem add="2w" />
+              </p>
+              <lorem add="10s" />
+            </CTabPanel>
+            <CTabPanel p="4">
+              <p v-chakra font-size="xl" font-weight="bold">
+                <lorem add="3w" />
+              </p>
+              <lorem add="5s" />
+            </CTabPanel>
+            <CTabPanel p="4">
+              <p v-chakra font-size="xl" font-weight="bold">
+                <lorem add="4w" />
+              </p>
+              <lorem add="8s" />
             </CTabPanel>
           </CTabPanels>
         </CTabs>