smbls 0.8.7 → 0.8.10

package/package.json

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

package/src/Block/index.js

@@ -31,7 +31,9 @@ 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 +68,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 +89,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/Link/index.js

@@ -10,7 +10,9 @@ export const Link = {
     href: '',
     target: '',
     theme: 'link',
-    aria: {}
+    aria: {},
+    fontWeight: 'bold',
+    textDecoration: 'none'
   },
   attr: {
     href: element => exec(element.props.href, element) || exec(element.props, element).href,

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/Text/index.js

@@ -10,10 +10,10 @@ 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 }),
+    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
+    })
   }
 }