smbls 0.9.7 → 0.9.8

package/package.json

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

package/src/Media.js

@@ -21,9 +21,6 @@ const execClass = (key, props, result, element) => {
     classExec = classExec.reduce((a, c) => merge(a, c), {})
   }
 
-  if (key === 'style') {
-  }
-
   for (const finalProp in classExec) {
     result[finalProp] = classExec[finalProp]
   }

package/src/Theme.js

@@ -8,7 +8,7 @@ import { depth } from './Shape/style'
 const isBorderStyle = str =>
   ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
 
-const diffBorder = (border, key = 'border') => {
+const transformBorder = (border, key = 'border') => {
   const obj = {}
   const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
   arr.map(v => {
@@ -19,21 +19,23 @@ const diffBorder = (border, key = 'border') => {
   return obj
 }
 
-const diffStroke = stroke => {
-  const WebkitTextStroke = stroke.split(', ').map(v => {
+const transformTextStroke = stroke => ({
+  WebkitTextStroke: stroke.split(', ').map(v => {
     if (v.includes('px')) return v
     else if (getColor(v)) return getColor(v)
   }).join(' ')
-  return { WebkitTextStroke }
-}
+})
 
-const diffShadow = stroke => {
-  const boxShadow = stroke.split(', ').map(v => {
+const transformShadow = shadow => ({
+  boxShadow: shadow.split(', ').map(v => {
+    if (v !== getColor(v)) return getColor(v)
     if (v.includes('px')) return v
-    else if (getColor(v)) return getColor(v)
+
+    const arr = v.split(' ')
+    if (!arr.length) return v
+    return arr.map(v => mapSpacing(v, 'shadow').shadow ).join(' ')
   }).join(' ')
-  return { boxShadow }
-}
+})
 
 export const Theme = {
   class: {
@@ -49,18 +51,18 @@ export const Theme = {
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     background: ({ props }) => props.background ? ({ backgroundColor: getColor(props.background) }) : null,
 
-    textStroke: ({ props }) => props.textStroke ? diffStroke(props.textStroke) : null,
+    textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
 
-    border: ({ props }) => props.border ? diffBorder(props.border) : null,
+    border: ({ props }) => props.border ? transformBorder(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,
-    borderBottom: ({ props }) => props.borderBottom ? diffBorder(props.borderBottom, 'borderBottom') : null,
+    borderLeft: ({ props }) => props.borderLeft ? transformBorder(props.borderLeft, 'borderLeft') : null,
+    borderTop: ({ props }) => props.borderTop ? transformBorder(props.borderTop, 'borderTop') : null,
+    borderRight: ({ props }) => props.borderRight ? transformBorder(props.borderRight, 'borderRight') : null,
+    borderBottom: ({ props }) => props.borderBottom ? transformBorder(props.borderBottom, 'borderBottom') : null,
 
-    shadow: ({ props }) => props.shadow ? diffShadow(props.shadow) : null,
+    boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
 
     opacity: ({ props }) => props.opacity && ({ opacity: props.opacity }),
     visibility: ({ props }) => props.visibility && ({ visibility: props.visibility })

package/src/Transition.js

@@ -2,7 +2,7 @@
 
 import { mapTiming } from '@symbo.ls/scratch'
 
-const diffTransition = transition => {
+const transformTransition = transition => {
   const arr = transition.split(' ')
 
   if (!arr.length) return transition
@@ -20,7 +20,7 @@ const splitTransition = transition => {
   const arr = transition.split(',')
   if (!arr.length) return
   return {
-    transition: arr.map(diffTransition).join(',')
+    transition: arr.map(transformTransition).join(',')
   }
 }