smbls 0.15.33 → 0.15.35

package/package.json

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

package/src/atoms/Media.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { merge, isArray } from '@domql/utils'
+import { getSystemTheme } from './Theme'
 
 const keySetters = {
   '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
@@ -16,7 +17,11 @@ const execClass = (key, props, result, element) => {
 
   if (typeof classnameExec !== 'function') return
 
-  let classExec = classnameExec({ props, context: element.context })
+  let classExec = classnameExec({
+    props,
+    context: element.context,
+    state: element.state
+  })
   if (isArray(classExec)) {
     classExec = classExec.reduce((a, c) => merge(a, c), {})
   }
@@ -48,7 +53,8 @@ const applyMediaProps = (key, props, result, element) => {
   const { context } = element
   console.log(context, element)
   if (!context.SYSTEM || !context.SYSTEM.MEDIA) return
-  const { globalTheme, MEDIA } = context.SYSTEM
+  const globalTheme = getSystemTheme(element)
+  const { MEDIA } = context.SYSTEM
   const mediaName = MEDIA[key.slice(1)]
   const generatedClass = convertPropsToClass(props, result, element)
 
@@ -113,7 +119,8 @@ const beforeClassAssign = (element, s) => {
 }
 
 export const initUpdate = element => {
-  const { props, context, class: className } = element
+  const { props, class: className } = element
+  const globalTheme = getSystemTheme(element)
 
   const parentProps = element.parent.props
   if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
@@ -126,8 +133,6 @@ export const initUpdate = element => {
     })
   }
 
-  const { globalTheme } = context.SYSTEM
-
   if (globalTheme) {
     const CLASS_NAMES = {
       media: {},

package/src/atoms/Picture.js

@@ -0,0 +1,18 @@
+'use strict'
+
+export const Picture = {
+  tag: 'picture',
+
+  childExtend: {
+    tag: 'source',
+    attr: {
+      media: ({ props, key, context }) => {
+        const { MEDIA } = context.SYSTEM
+        return MEDIA[(props.media || key).slice(1)]
+      },
+      srcset: ({ props }) => props.srcset
+    }
+  },
+
+  Img: ({ props }) => ({ src: props.src })
+}

package/src/atoms/Theme.js

@@ -36,34 +36,60 @@ const transformShadow = shadows => shadows.split('|').map(shadow => {
   }).join(' ')
 }).join(',')
 
-const transformBackgroundImage = (backgroundImage, ctx) => ({
+const transformBackgroundImage = (backgroundImage, ctx, globalTheme) => ({
   backgroundImage: backgroundImage.split(', ').map(v => {
     if (v.includes('url') || v.includes('gradient')) return v
     else if (ctx.SYSTEM.GRADIENT[backgroundImage]) {
-      return getMediaColor(backgroundImage, 'backgroundImage')
+      return getMediaColor(backgroundImage, 'backgroundImage', globalTheme)
     }
     return `url(${v})`
   }).join(' ')
 })
 
+export const getSystemTheme = (element, state) => {
+  const { context } = element
+  const rootState = element.__root ? element.__root.state : element.state
+  return rootState.globalTheme || context.SYSTEM.globalTheme
+}
+
 export const Theme = {
   class: {
     depth: ({ props }) => depth[props.depth],
 
-    theme: ({ props, context }) => {
+    theme: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
       if (!props.theme) return
-      return getMediaTheme(props.theme, props.themeModifier || context.SYSTEM.globalTheme)
+      return getMediaTheme(props.theme, props.themeModifier || globalTheme)
+    },
+
+    color: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.color) return
+      return getMediaColor(props.color, 'color', globalTheme)
     },
 
-    color: ({ props, context }) => props.color && (
-      getMediaColor(props.color, 'color', context.SYSTEM.globalTheme)
-    ),
-    background: ({ props, context }) => {
+    background: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
       if (!props.background) return
-      return getMediaColor(props.background, 'background', context.SYSTEM.globalTheme)
+      return getMediaColor(props.background, 'background', globalTheme)
+    },
+
+    backgroundColor: (element) => {
+      const { props } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundColor) return
+      return getMediaColor(props.backgroundColor, 'backgroundColor', globalTheme)
+    },
+
+    backgroundImage: (element) => {
+      const { props, context } = element
+      const globalTheme = getSystemTheme(element)
+      if (!props.backgroundImage) return
+      return transformBackgroundImage(props.backgroundImage, context, globalTheme)
     },
-    backgroundColor: ({ props, context }) => (props.backgroundColor) && getMediaColor(props.backgroundColor, 'backgroundColor', context.SYSTEM.globalTheme),
-    backgroundImage: ({ props, context }) => (props.backgroundImage) && transformBackgroundImage(props.backgroundImage, context),
     backgroundSize: ({ props }) => props.backgroundSize ? ({ backgroundSize: props.backgroundSize }) : null,
     backgroundPosition: ({ props }) => props.backgroundPosition ? ({ backgroundPosition: props.backgroundPosition }) : null,