smbls 0.8.19 → 0.8.22

package/package.json

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

package/src/Block/index.js

@@ -69,12 +69,12 @@ export const Block = {
 
     aspectRatio: ({ props }) => props.aspectRatio && ({ aspectRatio: props.aspectRatio }),
 
-    borderWidth: ({ props }) => mapBasedOnRatio(props, 'borderWidth'),
+    borderWidth: ({ props }) => props.borderWidth ? mapBasedOnRatio(props, 'borderWidth') : null,
 
-    padding: ({ props }) => mapBasedOnRatio(props, 'padding'),
-    margin: ({ props }) => mapBasedOnRatio(props, 'margin'),
+    padding: ({ props }) => props.padding ? mapBasedOnRatio(props, 'padding') : null,
+    margin: ({ props }) => props.margin ? mapBasedOnRatio(props, 'margin') : null,
 
-    gap: ({ props }) => mapBasedOnRatio(props, 'gap'),
+    gap: ({ props }) => props.gap ? mapBasedOnRatio(props, 'gap') : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flexFlow: ({ props }) => props.flexFlow && ({

package/src/Grid/index.js

@@ -14,7 +14,7 @@ export const Grid = {
     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,
+    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/IconText/index.js

@@ -8,10 +8,15 @@ export const IconText = {
     display: 'flex',
     alignItems: 'center',
     alignContent: 'center',
-    lineHeight: 1
+    lineHeight: 1,
+    icon: 'noicon'
   },
 
-  icon: { proto: Icon, if: ({ parent }) => parent.props.icon, props: ({ parent }) => ({ icon: parent.props.icon }) },
+  icon: {
+    proto: Icon,
+    if: ({ parent }) => parent.props.icon,
+    props: ({ parent }) => ({ icon: parent.props.icon })
+  },
 
   text: ({ props }) => props.text
 }

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,6 +50,8 @@ 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 }),