smbls 0.8.8 → 0.8.11

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.8",
+  "version": "0.8.11",
   "repository": "https://github.com/rackai/symbols",
   "main": "src/index.js",
   "files": [

package/src/Block/index.js

@@ -2,9 +2,10 @@
 
 import { SPACING, mapSpacing } from '@symbo.ls/scratch'
 
-export const mapBasedOnRatio = (props, prop) => {
+export const mapBasedOnRatio = (props, prop, unit) => {
   const { spacingRatio } = props
   const val = props[prop]
+  // TODO: move this to mapSpacing
   if (spacingRatio) {
     const params = SPACING[spacingRatio]
 
@@ -20,18 +21,18 @@ export const mapBasedOnRatio = (props, prop) => {
       }
     }
 
-    const result = mapSpacing(val, prop, params)
-
-    return result
+    return mapSpacing(val, prop, params, unit)
   }
-  return mapSpacing(val, prop)
+  return mapSpacing(val, prop, null, unit)
 }
 
 export const Block = {
   props: {},
 
   class: {
-    display: ({ props }) => ({ display: props.display }),
+    display: ({ props }) => props.display && ({ display: props.display }),
+
+    hide: ({ props }) => props.hide && ({ display: 'none' }),
 
     width: ({ props }) => props.width && mapBasedOnRatio(props, 'width'),
     height: ({ props }) => props.height && mapBasedOnRatio(props, 'height'),
@@ -66,7 +67,7 @@ export const Block = {
       }
     },
 
-    aspectRatio: ({ props }) => ({ aspectRatio: props.aspectRatio }),
+    aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
     padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
     margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
@@ -87,6 +88,9 @@ export const Block = {
     },
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
 
+    gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
+    gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
+
     size: ({ props }) => {
       // if (typeof props.size !== 'string') return
       // const [fontSize, padding, margin] = props.size.split(' ')

package/src/Box/index.js

@@ -1,9 +1,9 @@
 'use strict'
 
-import { Shape, Position, Block, Text, Overflow, Transition, Responsive } from '..'
+import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '..'
 
 export const Box = {
-  proto: [Shape, Position, Block, Text, Overflow, Transition, Responsive],
+  proto: [Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive],
   class: {
     fromProps: ({ props }) => props && props.css
   }

package/src/Flex/index.js

@@ -11,11 +11,11 @@ export const Flex = {
   },
 
   class: {
-    flow: ({ props }) => ({ flexFlow: props.flow }),
-    flexDirection: ({ props }) => ({ flexDirection: props.flexDirection }),
-    alignItems: ({ props }) => ({ alignItems: props.alignItems }),
-    alignContent: ({ props }) => ({ alignContent: props.alignContent }),
-    justifyContent: ({ props }) => ({ justifyContent: props.justifyContent }),
-    gap: ({ props }) => mapBasedOnRatio(props, 'gap')
+    flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
+    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
+    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
+    gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap')
   }
 }

package/src/Overflow/index.js

@@ -2,6 +2,6 @@
 
 export const Overflow = {
   class: {
-    overflow: ({ props }) => ({ overflow: props.overflow }),
+    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow }),
   }
 }

package/src/Shape/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { isArray, isObject } from '@domql/utils'
 import { mapSpacing, getTheme, getColor } from '@symbo.ls/scratch'
 
 import style, { shape, depth } from './style'
@@ -9,7 +10,7 @@ const isBorderStyle = str =>
 
 const diffBorder = (border, key = 'border') => {
   const obj = {}
-  const arr = border.split(' ')
+  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
   arr.map(v => {
     if (v.includes('px')) obj[`${key}Width`] = v
     else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'

package/src/Text/index.js

@@ -10,10 +10,11 @@ export const Text = {
   class: {
     fontSize: ({ props }) => props.fontSize ? mapFontSize(props.fontSize) : null,
     fontFamily: ({ props }) => props.fontFamily && ({ fontFamily: getFontFamily(FONT_FAMILY, props.fontFamily) || props.fontFamily }),
-    lineHeight: ({ props }) => ({ lineHeight: props.lineHeight }),
-    textDecoration: ({ props }) => ({ textDecoration: props.textDecoration }),
-    textTransform: ({ props }) => ({ textTransform: props.textTransform }),
-    textAlign: ({ props }) => ({ textAlign: props.textAlign }),
-    fontWeight: ({ props }) => ({ fontWeight: props.fontWeight })
+    lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
+    // lineHeight: ({ props }) => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
+    textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
+    textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
+    textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
+    fontWeight: ({ props }) => props.fontWeight && ({ fontWeight: props.fontWeight })
   }
 }

package/src/Transform/index.js

@@ -2,7 +2,7 @@
 
 export const Transform = {
   class: {
-    transform: ({ props }) => ({
+    transform: ({ props }) => props.transform && ({
       transform: props.transform
     }),
   }

package/src/Transition/index.js

@@ -2,7 +2,10 @@
 
 export const Transition = {
   class: {
-    transition: ({ props }) => ({ transition: props.transition }),
-    transitionProperty: ({ props }) => ({ transitionProperty: props.transitionProperty })
+    transition: ({ props }) => props.transition && ({ transition: props.transition }),
+    transitionProperty: ({ props }) => props.transitionProperty && ({
+      transitionProperty: props.transitionProperty,
+      willChange: props.transitionProperty
+    })
   }
 }