fix(flex): flex style not working, #7

Author: b2nil

src/components/flex/index.ts

@@ -1,5 +1,4 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
-import _forEach from 'lodash/forEach'
 import { View } from '@tarojs/components'
 import { AtFlexProps } from 'types/flex'
 
@@ -9,52 +8,36 @@ const AtFlex = defineComponent({
   props: {
     wrap: {
       type: String as PropType<AtFlexProps['wrap']>,
-      default: 'no-wrap',
     },
     align: {
       type: String as PropType<AtFlexProps['align']>,
-      default: 'stretch',
     },
     justify: {
       type: String as PropType<AtFlexProps['justify']>,
-      default: 'start',
     },
     direction: {
       type: String as PropType<AtFlexProps['direction']>,
-      default: 'row',
     },
     alignContent: {
       type: String as PropType<AtFlexProps['alignContent']>,
-      default: 'center'
     },
   },
 
   setup(props: AtFlexProps, { attrs, slots }) {
 
-    const rootClass = computed(() => {
-      const root = { 'at-row': true }
-
-      _forEach(props, (value, key) => {
-        switch (key) {
-          case 'wrap':
-            root[`at-row--${value}`] = true
-            return
-          case 'alignContent':
-            root[`at-row__align-content--${value}`] = true
-            return
-          default:
-            root[`at-row__${key}--${value}`] = true
-            return
-        }
-      })
-
-      return root
-    })
+    const rootClasses = computed(() => ({
+      'at-row': true,
+      [`at-row--${props.wrap}`]: Boolean(props.wrap),
+      [`at-row__align--${props.align}`]: Boolean(props.align),
+      [`at-row__justify--${props.justify}`]: Boolean(props.justify),
+      [`at-row__direction--${props.direction}`]: Boolean(props.direction),
+      [`at-row__align-content--${props.alignContent}`]: Boolean(props.alignContent)
+    }))
 
     return () => (
       h(View, mergeProps(attrs, {
-        class: rootClass.value
-      }), { default: () => slots.default && slots.default() })
+        class: rootClasses.value
+      }), { default: () => slots.default?.() })
     )
   }
 })

src/components/flex/item/index.ts

@@ -1,20 +1,13 @@
 import { h, defineComponent, computed, mergeProps, PropType } from "vue"
-import _forEach from 'lodash/forEach'
 import { View } from '@tarojs/components'
 import { AtFlexItemProps } from 'types/flex'
 
 const AtFlexItem = defineComponent({
   name: "AtFlexItem",
 
   props: {
-    isAuto: {
-      type: Boolean,
-      default: false,
-    },
-    isWrap: {
-      type: Boolean,
-      default: false,
-    },
+    isAuto: Boolean,
+    isWrap: Boolean,
     align: {
       type: String as PropType<AtFlexItemProps['align']>,
       default: 'center',
@@ -31,48 +24,19 @@ const AtFlexItem = defineComponent({
 
   setup(props: AtFlexItemProps, { attrs, slots }) {
 
-    const rootClass = computed(() => {
-      const root = { 'at-col': true }
-
-      _forEach(props, (value, key) => {
-        switch (key) {
-          case 'isAuto':
-            if (value) {
-              root['at-col--auto'] = true
-              return
-            }
-            return
-          case 'isWrap':
-            if (value) {
-              root[`at-col--wrap`] = true
-              return
-            }
-            return
-          case 'size':
-            if (value) {
-              root[`at-col-${value}`] = true
-              return
-            }
-            return
-          case 'offset':
-            if (value != 0) {
-              root[`at-col__offset-${value}`] = true
-              return
-            }
-            return
-          default:
-            root[`at-col__${key}--${value}`] = true
-            return
-        }
-      })
-
-      return root
-    })
+    const rootClasses = computed(() => ({
+      [`at-col-${props.size}`]: Boolean(props.size),
+      [`at-col__align--${props.align}`]: Boolean(props.align),
+      [`at-col__offset-${props.offset}`]: Boolean(props.offset),
+      'at-col--auto': Boolean(props.isAuto),
+      'at-col--wrap': Boolean(props.isWrap),
+      'at-col': true,
+    }))
 
     return () => (
       h(View, mergeProps(attrs, {
-        class: rootClass.value
-      }), { default: () => slots.default && slots.default() })
+        class: rootClasses.value
+      }), { default: () => slots.default?.() })
     )
   }
 })