smbls 0.8.28 → 0.8.29

package/package.json

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

package/src/Block/index.js

@@ -38,10 +38,10 @@ export const Block = {
     height: ({ props }) => props.height && mapBasedOnRatio(props, 'height'),
     boxSize: ({ props }) => {
       if (typeof props.boxSize !== 'string') return
-      const [width, height] = props.boxSize.split(' ')
+      const [height, width] = props.boxSize.split(' ')
       return {
-        ...mapSpacing(width, 'width'),
-        ...mapSpacing(height, 'height')
+        ...mapSpacing(height, 'height'),
+        ...mapSpacing(width, 'width')
       }
     },
 

package/src/Media.js

@@ -1,91 +1,50 @@
 'use strict'
 
-import { getTheme, CASES, MEDIA as BREAKPOINTS } from '@symbo.ls/scratch'
+import { merge } from '@domql/utils'
+import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
+
+const convertToClass = (subProps, element) => {
+  const { class: className } = element
+  const subPropsClassname = {}
+  for (const prop in subProps) {
+    const classnameExec = className[prop]
+    if (typeof classnameExec !== 'function') continue
+
+    const contertedToClass = classnameExec({ props: subProps })
+    for (const finalProp in contertedToClass) subPropsClassname[finalProp] = contertedToClass[finalProp]
+  }
+  return subPropsClassname
+}
 
 const init = (el, s) => {
   const { props, class: className } = el
 
   for (const screen in props) {
     if (screen.slice(0, 1) === '@') {
-      const mediaName = screen.slice(1)
-      const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
+      const mediaName = CONFIG_MEDIA[screen.slice(1)]
+      const mediaKey = `@media screen and ${mediaName}`
       const screenProps = props[screen]
-      const calculatedScreenProps = {}
-
-      for (const prop in screenProps) {
-        // if (!className || !className[prop]) return
-        // const classProp = className[prop]
-        const classProp = className[prop]
-        if (typeof classProp !== 'function') continue
-        let calculatedProp = classProp({ props: screenProps })
-
-        if (Array.isArray(calculatedProp)) {
-          calculatedProp = Object.assign({}, ...calculatedProp)
-        }
-
-        for (const finalProp in calculatedProp) {
-          calculatedScreenProps[finalProp] = calculatedProp[finalProp]
-        }
-      }
 
       const { MEDIA } = className
       if (!MEDIA) className.MEDIA = {}
-      className.MEDIA[responsiveKey] = calculatedScreenProps
+      className.MEDIA[mediaKey] = convertToClass(screenProps, el)
     } else if (screen.slice(0, 1) === ':') {
-      const selectorProps = {}
-      // const selectorName = screen.slice(1)
-      const underSelectorProps = props[screen]
+      const selectorProps = props[screen]
       const selectorKey = `&${screen}`
 
-      for (const prop in underSelectorProps) {
-        const classProp = className[prop]
-        if (typeof classProp !== 'function') continue
-        let calculatedProp = classProp({ props: underSelectorProps })
-
-        if (Array.isArray(calculatedProp)) {
-          calculatedProp = Object.assign({}, ...calculatedProp)
-        }
-
-        for (const finalProp in calculatedProp) {
-          selectorProps[finalProp] = calculatedProp[finalProp]
-        }
-      }
-
       const { SELECTORS } = className
-      if (SELECTORS) SELECTORS[selectorKey] = selectorProps
-      else {
-        className.SELECTORS = {
-          [selectorKey]: selectorProps
-        }
-      }
+      if (!SELECTORS) className.SELECTORS = {}
+      className.SELECTORS[selectorKey] = convertToClass(selectorProps, el)
     } else if (screen.slice(0, 1) === '$') {
       const caseKey = screen.slice(1)
-      const caseProps = props[screen]
-      const calculatedCaseProps = {}
-
-      if (!CASES[caseKey]) return
+      if (!CONFIG_CASES[caseKey]) continue
 
-      for (const prop in caseProps) {
-        // if (!className || !className[prop]) return
-        // const classProp = className[prop]
-        const classProp = className[prop]
-        if (typeof classProp !== 'function') continue
-        let calculatedProp = classProp({ props: caseProps })
-
-        if (Array.isArray(calculatedProp)) {
-          calculatedProp = Object.assign({}, ...calculatedProp)
-        }
-
-        for (const finalProp in calculatedProp) {
-          calculatedCaseProps[finalProp] = calculatedProp[finalProp]
-        }
-      }
+      const caseProps = props[screen]
+      const execCaseProps = convertToClass(caseProps, el)
 
       const { CASE } = className
       if (!CASE) className.CASE = {}
-      className.CASE[caseKey] = calculatedCaseProps
-      // Object.assign(className.CASE[caseKey], calculatedCaseProps)
-      // console.log(className.CASE)
+      merge(className.CASE, execCaseProps)
     }
   }
 }
@@ -96,31 +55,34 @@ export const Responsive = {
     initUpdate: el => {
       const { props, class: className } = el
       const rootState = el.__root ? el.__root.state : el.state
+      // console.log(props)
 
       if (props.theme) {
-        props.returnGeneratedTheme = getTheme(props.theme)
-        const { returnGeneratedTheme } = props
+        // console.group(props.theme)
+        const { theme } = props
 
-        for (const key in returnGeneratedTheme) {
+        for (const key in theme) {
           if (key.includes('dark') || key.includes('light')) {
             const parse = key.split(': ')[1].split(')')[0]
             if (rootState.globalTheme === parse) {
-              props.returnGeneratedTheme = getTheme(returnGeneratedTheme[key])
-            } else props.returnGeneratedTheme = returnGeneratedTheme
-            className.MEDIA_FORCED_BY_STATE = props.returnGeneratedTheme
+              props.theme = getTheme(theme[key])
+            } else props.theme = theme
+            className.MEDIA_FORCED_BY_STATE = props.theme
+            props.generatedTheme = true
           }
         }
+        // console.groupEnd(props.theme)
       }
 
       for (const screen in props) {
         if (screen.slice(0, 1) === '@') {
           const mediaName = screen.slice(1)
-          const responsiveKey = `@media screen and ${BREAKPOINTS[mediaName]}`
+          const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
           if (mediaName === 'dark' || mediaName === 'light') {
             const { MEDIA_FORCE } = className
             if (!MEDIA_FORCE) className.media = {}
             if (rootState.globalTheme === mediaName) {
-              className.MEDIA_FORCED = className.MEDIA[responsiveKey]
+              className.MEDIA_FORCED = className.MEDIA[mediaKey]
             } else className.MEDIA_FORCED = {}
           }
         }

package/src/Shape/index.js

@@ -48,12 +48,11 @@ export const Shape = {
 
     theme: ({ props }) => {
       if (!props.theme) return
-      return props.returnGeneratedTheme || getTheme(props.theme)
+      return getTheme(props.theme)
     },
 
     color: ({ props }) => props.color ? ({ color: getColor(props.color) }) : null,
     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,
 

package/src/Shape/style.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { UNIT, getColor } from '@symbo.ls/scratch'
+import { UNIT, getColor, getTheme } from '@symbo.ls/scratch'
 
 export default {
   boxSizing: 'border-box'
@@ -27,7 +27,7 @@ export const SHAPES = {
       display: 'block',
       width: '0px',
       height: '0px',
-      border: `6px solid ${getColor(props.background)}`,
+      border: `6px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
       position: 'absolute',
       borderRadius: '2px'
     }
@@ -71,10 +71,10 @@ export const SHAPES = {
       display: 'block',
       width: '0',
       height: '0',
-      border: `16px solid ${getColor(props.background)}`,
+      border: `16px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
       borderRadius: '6px',
       position: 'absolute'
-    },
+    }
   }),
 
   tagDirection: {