smbls 0.8.16 → 0.8.19

package/package.json

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

package/src/Block/index.js

@@ -69,9 +69,13 @@ export const Block = {
 
     aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
+    borderWidth: ({ props }) => mapBasedOnRatio(props, 'borderWidth'),
+
     padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
     margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
+
     gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+    gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flexFlow: ({ props }) => props.flexFlow && ({
       display: 'flex',
@@ -86,14 +90,22 @@ export const Block = {
         justifyContent: justifyContent
       }
     },
+
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
+    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
 
     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(' ')
+      if (typeof props.heightRange !== 'string') return
+      const [minHeight, maxHeight] = props.heightRange.split(' ')
+      return {
+        ...mapSpacing(minHeight, 'minHeight'),
+        ...mapSpacing(maxHeight, 'maxHeight')
+      }
     }
   }
 }

package/src/Box/index.js

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

package/src/Button/index.js

@@ -31,9 +31,7 @@ export const SquareButton = {
     round: 'Z'
   },
   class: {
-    squareButton: {
-      boxSizing: 'content-box'
-    }
+    squareButton: { boxSizing: 'content-box' }
   }
 }
 

package/src/Grid/index.js

@@ -9,10 +9,13 @@ export const Grid = {
   props: {},
 
   class: {
-    columns: ({ props }) => ({ gridTemplateColumns: props.columns }),
-    rows: ({ props }) => ({ gridTemplateRows: props.rows }),
-    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
-    columnGap: ({ props }) => mapBasedOnRatio(props, 'columnGap'),
-    rowGap: ({ props }) => mapBasedOnRatio(props, 'rowGap')
+    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
+    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
+    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+    gap: ({ props }) => props.template ? mapBasedOnRatio(props, 'gap') : null,
+    columnGap: ({ props }) => props.template ? mapBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props }) => props.template ? mapBasedOnRatio(props, 'rowGap') : null
   }
 }

package/src/Link/index.js

@@ -7,8 +7,6 @@ export const Link = {
   proto: [Shape, Text],
   tag: 'a',
   props: {
-    href: '',
-    target: '',
     theme: 'link',
     aria: {},
     fontWeight: 'bold',

package/src/Shape/index.js

@@ -43,6 +43,9 @@ export const Shape = {
     // border: ({ props }) => props.border ? ({ borderColor: getColor(props.border) }) : null,
 
     border: ({ props }) => props.border ? diffBorder(props.border) : null,
+    borderColor: ({ props }) => props.borderColor ? ({ borderColor: getColor(props.borderColor) }) : null,
+    borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
+
     borderLeft: ({ props }) => props.borderLeft ? diffBorder(props.borderLeft, 'borderLeft') : null,
     borderTop: ({ props }) => props.borderTop ? diffBorder(props.borderTop, 'borderTop') : null,
     borderRight: ({ props }) => props.borderRight ? diffBorder(props.borderRight, 'borderRight') : null,