feat(pseudobox): added pseudo props to pseudobox component

Author: codebender828

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <theme-provider :theme="theme">
-    {{ state.greeting }}
-    <Button variant="ghost" color="success" size="lg" @click="increment">{{ state.buttonText }}</Button>
+    {{ incrementState.greeting }}
+    <Button variant="ghost" color="success" size="lg" @click="increment">{{ incrementState.buttonText }}</Button>
     <br>
-    <h1>{{ state.count }}</h1>
+    <h1>{{ incrementState.count }}</h1>
     <br>
     <Box bg="yellow.200" border-left="4px" font-family="body" rounded="md" mb="5" shadow="md" p="3" color="yellow.800">
       <Box font-family="heading" font-size="3xl" mb="2">Random Title</Box>
@@ -28,6 +28,23 @@
     >
       Pseudobox here
     </PseudoBox>
+    <Box
+      rounded="md"
+      overflow="hidden"
+      mt="4"
+    >
+      <PseudoBox
+        v-for="(box, index) in boxes"
+        :key="index"
+        px="4"
+        py="2"
+        bg="white"
+        :_hover="{ opacity: '80%' }"
+        :_odd="{ bg: 'gray.100' }"
+        >
+        {{ box.name }}
+      </PseudoBox>
+    </Box>
   </theme-provider>
 </template>
 
@@ -37,13 +54,30 @@ import Button from './components/Button'
 import { Box, PseudoBox } from './lib/core/'
 import theme from './lib/theme'
 import { useIncrement } from './use-increment'
+import { reactive } from '@vue/composition-api'
 
 export default {
   setup () {
-    const { state, increment } = useIncrement()
-
+    const { state: incrementState, increment } = useIncrement()
+    const state = reactive({
+      boxes: [
+        {
+          id: 1,
+          name: 'Box 1'
+        },
+        {
+          id: 2,
+          name: 'Box 2'
+        },
+        {
+          id: 3,
+          name: 'Box 3'
+        }
+      ]
+    })
     return {
-      state,
+      ...state,
+      incrementState,
       increment,
       theme
     }

src/lib/config/props/props.js

@@ -57,6 +57,7 @@ const baseProps = {
   fontSize: [String, Array],
   textAlign: [String, Array],
   textDecoration: [String, Array],
+  overflow: [String, Array],
   overflowX: [String, Array],
   overflowY: [String, Array],
   textTransform: [String, Array],

src/lib/config/props/pseudo.js

@@ -1,7 +1,28 @@
 const pseudoProps = {
   _hover: [Object, String, Array],
   _active: [Object, String, Array],
-  _focus: [Object, String, Array]
+  _focus: [Object, String, Array],
+  _odd: [Object, String, Array],
+  _visited: [Object, String, Array],
+  _even: [Object, String, Array],
+  _disabled: [Object, String, Array],
+  _checked: [Object, String, Array],
+  _mixed: [Object, String, Array],
+  _selected: [Object, String, Array],
+  _invalid: [Object, String, Array],
+  _pressed: [Object, String, Array],
+  _readOnly: [Object, String, Array],
+  _first: [Object, String, Array],
+  _last: [Object, String, Array],
+  _expanded: [Object, String, Array],
+  _grabbed: [Object, String, Array],
+  _notFirst: [Object, String, Array],
+  _notLast: [Object, String, Array],
+  _groupHover: [Object, String, Array],
+  _before: [Object, String, Array],
+  _after: [Object, String, Array],
+  _focusWithin: [Object, String, Array],
+  _placeholder: [Object, String, Array]
 }
 
 export default pseudoProps