smbls 0.15.10 → 0.15.12

package/package.json

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

package/src/Button.js

@@ -18,7 +18,7 @@ export const Button = {
     whiteSpace: 'nowrap',
     padding: 'Z A1',
     fontFamily: 'inherit',
-    round: 'C2',
+    round: 'C2'
   },
   attr: {
     type: ({ props }) => props.type

package/src/Input.js

@@ -13,7 +13,7 @@ export const Input = {
     fontSize: 'A',
     round: 'C',
     lineHeight: 1,
-    padding: 'Z A'
+    padding: 'Z A',
   },
 
   attr: {

package/src/atoms/Block.js

@@ -4,7 +4,7 @@ import { getSpacingBasedOnRatio, getSpacingByKey } from '@symbo.ls/scratch'
 
 export const Block = {
   class: {
-    boxSizing: ({ props }) => props.boxSizing ? ({ display: props.boxSizing }) : {
+    boxSizing: ({ props }) => props.boxSizing ? ({ boxSizing: props.boxSizing }) : {
       boxSizing: 'border-box'
     },
 

package/src/atoms/Media.js

@@ -7,7 +7,8 @@ const keySetters = {
   '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
   ':': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
   $: (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
-  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element)
+  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? result : result.case, element),
+  '!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(key, props, isSubtree ? result : result.case, element)
 }
 
 const execClass = (key, props, result, element) => {
@@ -84,6 +85,12 @@ const applyConditionalCaseProps = (key, props, result, element) => {
   return merge(result, convertPropsToClass(props, result, element))
 }
 
+const applyConditionalFalsyProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey]
+  if (!isPropTrue) return merge(result, convertPropsToClass(props, result, element))
+}
+
 const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
 
 const beforeClassAssign = (element, s) => {

package/src/atoms/Theme.js

@@ -10,6 +10,7 @@ const isBorderStyle = str =>
 const transformBorder = border => {
   const arr = border.split(', ')
   return arr.map(v => {
+    v = v.trim()
     if (isBorderStyle(v)) return v || 'solid'
     else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
     else if (getColor(v).length > 2) return getColor(v)
@@ -24,16 +25,16 @@ const transformTextStroke = stroke => ({
   }).join(' ')
 })
 
-const transformShadow = shadow => ({
-  boxShadow: shadow.split(', ').map(v => {
-    if (v !== getColor(v)) return getColor(v)
-    if (v.includes('px')) return v
-
+const transformShadow = shadows => shadows.split('|').map(shadow => {
+  return shadow.split(', ').map(v => {
+    v = v.trim()
+    if (getColor(v).length > 2) return getColor(v)
+    if (v.includes('px') || v.slice(-2) === 'em') return v
     const arr = v.split(' ')
     if (!arr.length) return v
     return arr.map(v => getSpacingByKey(v, 'shadow').shadow).join(' ')
   }).join(' ')
-})
+}).join(',')
 
 const transformBackgroundImage = (backgroundImage, ctx) => ({
   backgroundImage: backgroundImage.split(', ').map(v => {
@@ -86,7 +87,9 @@ export const Theme = {
       borderBottom: transformBorder(props.borderBottom)
     }),
 
-    boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
+    boxShadow: ({ props }) => props.boxShadow && ({
+      boxShadow: transformShadow(props.boxShadow)
+    }),
 
     opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
     visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })