Merge pull request #60 from chakra-ui/bug/cflex-prop-object-notation

fix(component): fix c-flex prop to be also object

Author: codebender828

.changeset/proud-apples-compare.md

@@ -0,0 +1,5 @@
+---
+'@chakra-ui/c-flex': patch
+---
+
+Fix bug where it was not possible to use object as prop

packages/c-flex/examples/base-flex.vue

@@ -1,6 +1,6 @@
 <template>
   <c-flex align="center">
-    <c-flex bg="green.50" align="flex-end">
+    <c-flex :bg="{ base: 'green.50', sm: 'blue.50' }" align="flex-end">
       <chakra.p>Box 1</chakra.p>
     </c-flex>
     <c-flex

packages/c-flex/src/flex.ts

@@ -1,52 +1,55 @@
 import { h, defineComponent, PropType, reactive } from 'vue'
 import type CSS from 'csstype'
-import { chakra, DOMElements, ThemingProps } from '@chakra-ui/vue-system'
-
-type ArrayOrStringProp<T> = T | T[]
+import {
+  chakra,
+  DOMElements,
+  ThemingProps,
+  SystemStyleObject,
+} from '@chakra-ui/vue-system'
 
 export interface FlexProps {
   /**
    * Shorthand for `alignItems` style prop
    * @type SystemStyleObject["alignItems"]
    * SystemStyleObject because prop can be String, Array or Object
    */
-  align?: ArrayOrStringProp<CSS.Properties['alignItems']>
+  align?: SystemStyleObject['alignItems']
 
   /**
    * Shorthand for `justifyContent` style prop
    * @type SystemStyleObject["justifyContent"]
    */
-  justify?: ArrayOrStringProp<CSS.Properties['justifyContent']>
+  justify?: SystemStyleObject['justifyContent']
 
   /**
    * Shorthand for `flexWrap` style prop
    * @type SystemStyleObject["flexWrap"]
    */
-  wrap?: ArrayOrStringProp<CSS.Properties['flexWrap']>
+  wrap?: SystemStyleObject['flexWrap']
 
   /**
    * Shorthand for `flexDirection` style prop
    * @type SystemStyleObject["flexDirection"]
    */
-  direction?: ArrayOrStringProp<CSS.Properties['flexDirection']>
+  direction?: SystemStyleObject['flexDirection']
 
   /**
    * Shorthand for `flexBasis` style prop
    * @type SystemStyleObject["flexBasis"]
    */
-  basis?: ArrayOrStringProp<CSS.Properties['flexBasis']>
+  basis?: SystemStyleObject['flexBasis']
 
   /**
    * Shorthand for `flexGrow` style prop
    * @type SystemStyleObject["flexGrow"]
    */
-  grow?: ArrayOrStringProp<CSS.Properties['flexGrow']>
+  grow?: SystemStyleObject['flexGrow']
 
   /**
    * Shorthand for `flexShrink` style prop
    * @type SystemStyleObject["flexShrink"]
    */
-  shrink?: ArrayOrStringProp<CSS.Properties['flexShrink']>
+  shrink?: SystemStyleObject['flexShrink']
 }
 
 const CFlex = defineComponent({