smbls 0.9.4 → 0.9.7

package/package.json

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

package/src/Button.js

@@ -23,6 +23,7 @@ export const Button = {
     lineHeight: '1',
     whiteSpace: 'nowrap',
     padding: 'Z A1',
+    fontFamily: 'inherit',
     round: 'C2',
     style
   },

package/src/Flex.js

@@ -12,7 +12,7 @@ export const Flex = {
     flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
-    wrap: ({ props }) => props.wrap && ({ wrap: props.wrap }),
+    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
     gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap'),

package/src/Media.js

@@ -21,6 +21,9 @@ 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/Transition.js

@@ -2,25 +2,31 @@
 
 import { mapTiming } from '@symbo.ls/scratch'
 
-const diffTransition = (transition, key = 'transition') => {
+const diffTransition = transition => {
   const arr = transition.split(' ')
 
-  if (!arr.length) return { transition: props.transition }
+  if (!arr.length) return transition
 
+  return arr.map(v => {
+    if (v.length < 3 || v.includes('ms')) {
+      const mapWithSequence = mapTiming(v)
+      return mapWithSequence.duration
+    }
+    return v
+  }).join(' ')
+}
+
+const splitTransition = transition => {
+  const arr = transition.split(',')
+  if (!arr.length) return
   return {
-    transition: arr.map(v => {
-      if (v.length < 3 || v.includes('ms')) {
-        const mapWithSequence = mapTiming(v)
-        return mapWithSequence.duration
-      }
-      return v
-    }).join(' ')
+    transition: arr.map(diffTransition).join(',')
   }
 }
 
 export const Transition = {
   class: {
-    transition: ({ props }) => props.transition && diffTransition(props.transition),
+    transition: ({ props }) => props.transition && splitTransition(props.transition),
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,
       willChange: props.transitionProperty