smbls 0.8.18 → 0.8.21

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.18",
+  "version": "0.8.21",
   "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 }),
 
-    padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
-    margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
-    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+    borderWidth: ({ props }) => props.borderWidth ? mapBasedOnRatio(props, 'borderWidth') : null,
+
+    padding: ({ props }) => props.padding ? mapBasedOnRatio(props, 'padding') : null,
+    margin: ({ props }) => props.margin ? mapBasedOnRatio(props, 'margin') : null,
+
+    gap: ({ props }) => props.gap ? mapBasedOnRatio(props, 'gap') : null,
+    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/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.gap ? mapBasedOnRatio(props, 'gap') : null,
+    columnGap: ({ props }) => props.template ? mapBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props }) => props.template ? mapBasedOnRatio(props, 'rowGap') : null
   }
 }

package/src/Shape/index.js

@@ -19,6 +19,14 @@ const diffBorder = (border, key = 'border') => {
   return obj
 }
 
+const diffStroke = stroke => {
+  const WebkitTextStroke = stroke.split(', ').map(v => {
+    if (v.includes('px')) return v
+    else if (getColor(v)) return getColor(v)
+  }).join(' ')
+  return { WebkitTextStroke }
+}
+
 export const Shape = {
   class: {
     default: style,
@@ -42,7 +50,12 @@ export const Shape = {
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
     // border: ({ props }) => props.border ? ({ borderColor: getColor(props.border) }) : null,
 
+    textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : 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,